Dropdown Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
Usage
import {
Button,
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "uilab-core"<DropdownMenu>
<DropdownMenuTrigger render={<Button variant="outline" />}>
Open
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuGroup>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem>
<DropdownMenuSeparator />
</DropdownMenuGroup>
<DropdownMenuGroup>
<DropdownMenuItem>Team</DropdownMenuItem>
<DropdownMenuItem>Subscription</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>Examples
Basic
A basic dropdown menu with labels and separators.
Submenu
Use DropdownMenuSub to nest secondary actions.
Shortcuts
Add DropdownMenuShortcut to show keyboard hints.
Checkboxes
Use DropdownMenuCheckboxItem for toggles.
Radios
Use DropdownMenuRadioGroup for exclusive choices.
Complex
A richer example combining groups, icons, and submenus.