DropdownMenu
Context menu built on Radix UI. Supports items, labels, separators, checkboxes, radio groups, submenus, and keyboard shortcuts.
Live Demo
Props
| Prop | Type | Default | Description |
|---|---|---|---|
DropdownMenu | Radix Root | — | Root component that controls open/closed state. |
DropdownMenuTrigger | Radix Trigger | — | Element that opens the menu when activated. |
DropdownMenuContent | Radix Content | — | The floating menu panel. |
DropdownMenuItem | Radix Item | — | A single menu item. Supports disabled state. |
DropdownMenuLabel | Radix Label | — | Section label inside the menu. |
DropdownMenuSeparator | Radix Separator | — | Horizontal divider between menu sections. |
DropdownMenuShortcut | span | — | Right-aligned keyboard shortcut hint. |
DropdownMenuCheckboxItem | Radix CheckboxItem | — | Checkbox toggle item. |
DropdownMenuRadioGroup | Radix RadioGroup | — | Group of radio items. |
DropdownMenuRadioItem | Radix RadioItem | — | Single radio option. |
DropdownMenuSub | Radix Sub | — | Submenu root. |
DropdownMenuSubTrigger | Radix SubTrigger | — | Item that opens a submenu. |
DropdownMenuSubContent | Radix SubContent | — | The submenu panel. |
Usage
import {
DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel,
DropdownMenuShortcut,
} from '@ghiberti85/ui'
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button>Open Menu</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>
Profile <DropdownMenuShortcut>⌘P</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>Settings</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>Log out</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>