Dropdown Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
"use client"
import {
Button,
DropdownMenu,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.
"use client"
import {
Button,
DropdownMenu,Submenu
Use DropdownMenuSub to nest secondary actions.
"use client"
import {
Button,
DropdownMenu,Shortcuts
Add DropdownMenuShortcut to show keyboard hints.
"use client"
import {
Button,
DropdownMenu,Checkboxes
Use DropdownMenuCheckboxItem for toggles.
"use client"
import * as React from "react"
import {
Button,Radios
Use DropdownMenuRadioGroup for exclusive choices.
"use client"
import * as React from "react"
import {
Button,Complex
A richer example combining groups, icons, and submenus.
"use client"
import * as React from "react"
import {
Button,