Menu
dropdown menu with submenus and selection built on base ui
Installation
pnpm dlx shadcn@latest add https://prototyper-ui.com/r/menu.jsonnpx shadcn@latest add https://prototyper-ui.com/r/menu.jsonyarn dlx shadcn@latest add https://prototyper-ui.com/r/menu.jsonbunx --bun shadcn@latest add https://prototyper-ui.com/r/menu.jsonThis will add the following files to your project:
components/ui/menu.tsx
Usage
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
} from "@/components/ui/menu";
<DropdownMenu>
<DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>Item 1</DropdownMenuItem>
<DropdownMenuItem>Item 2</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>;Anatomy
<DropdownMenu>
<DropdownMenuTrigger />
<DropdownMenuContent>
<DropdownMenuLabel />
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem />
</DropdownMenuGroup>
<DropdownMenuCheckboxItem />
<DropdownMenuRadioGroup>
<DropdownMenuRadioItem />
</DropdownMenuRadioGroup>
<DropdownMenuSub>
<DropdownMenuSubTrigger />
<DropdownMenuSubContent>
<DropdownMenuItem />
</DropdownMenuSubContent>
</DropdownMenuSub>
</DropdownMenuContent>
</DropdownMenu>| Sub-component | data-slot | Purpose | Required |
|---|---|---|---|
DropdownMenu | dropdown-menu | Root provider, manages open/close state | Yes |
DropdownMenuTrigger | dropdown-menu-trigger | Button that opens the menu | Yes |
DropdownMenuPortal | dropdown-menu-portal | Renders children into a portal | No |
DropdownMenuContent | dropdown-menu-content | The popup panel containing menu items | Yes |
DropdownMenuGroup | dropdown-menu-group | Groups related menu items | No |
DropdownMenuLabel | dropdown-menu-label | Non-interactive label for a group | No |
DropdownMenuItem | dropdown-menu-item | Individual actionable menu item | Yes |
DropdownMenuCheckboxItem | dropdown-menu-checkbox-item | Toggleable checkbox menu item | No |
DropdownMenuRadioGroup | dropdown-menu-radio-group | Groups radio menu items | No |
DropdownMenuRadioItem | dropdown-menu-radio-item | Radio-selectable menu item | No |
DropdownMenuSeparator | dropdown-menu-separator | Visual separator between items | No |
DropdownMenuShortcut | dropdown-menu-shortcut | Keyboard shortcut hint text | No |
DropdownMenuSub | dropdown-menu-sub | Root for a submenu | No |
DropdownMenuSubTrigger | dropdown-menu-sub-trigger | Item that opens a submenu | No |
DropdownMenuSubContent | dropdown-menu-sub-content | Popup panel for a submenu | No |
Examples
Content
Disabled Items
Disabled Keys
Links
Long Press
Reusable
Sections
Sections Dynamic
Selection Multiple
Selection Single
Separators
Sub Menu
Sub Menu Dynamic
Text Slots
Styling
Data Slots
Use data-slot attributes to target specific parts of the menu:
| Slot name | Element |
|---|---|
dropdown-menu | Root provider (no DOM rendered) |
dropdown-menu-trigger | The trigger button |
dropdown-menu-portal | Portal wrapper |
dropdown-menu-content | The popup panel |
dropdown-menu-group | Group wrapper |
dropdown-menu-label | Group label |
dropdown-menu-item | Individual menu item |
dropdown-menu-checkbox-item | Checkbox menu item |
dropdown-menu-radio-group | Radio group wrapper |
dropdown-menu-radio-item | Radio menu item |
dropdown-menu-separator | Visual separator line |
dropdown-menu-shortcut | Keyboard shortcut text |
dropdown-menu-sub | Submenu root |
dropdown-menu-sub-trigger | Submenu trigger item |
dropdown-menu-sub-content | Submenu popup panel |
Customization Examples
/* Change menu item highlight color */
[data-slot="dropdown-menu-item"][data-highlighted] {
@apply bg-primary text-primary-foreground;
}
/* Wider menu popup */
[data-slot="dropdown-menu-content"] {
@apply min-w-[12rem];
}{
/* Override styles via className */
}
<DropdownMenuContent className="w-64">
<DropdownMenuItem className="font-medium">Custom Item</DropdownMenuItem>
</DropdownMenuContent>;API Reference
DropdownMenu
Root component that manages open/close state.
Prop
Type
All Base UI Menu.Root props are forwarded via ...props.
DropdownMenuTrigger
Button that opens the menu when clicked.
Prop
Type
All Base UI Menu.Trigger props are forwarded via ...props.
DropdownMenuContent
The popup panel containing menu items, rendered inside a portal with a positioner.
Prop
Type
All Base UI Menu.Popup props are forwarded via ...props.
DropdownMenuGroup
Groups related menu items together.
All Base UI Menu.Group props are forwarded via ...props.
DropdownMenuLabel
Non-interactive label for a group of menu items.
Prop
Type
All Base UI Menu.GroupLabel props are forwarded via ...props.
DropdownMenuItem
Individual actionable menu item.
Prop
Type
All Base UI Menu.Item props are forwarded via ...props.
DropdownMenuCheckboxItem
Toggleable checkbox menu item with a check indicator.
Prop
Type
All Base UI Menu.CheckboxItem props are forwarded via ...props.
DropdownMenuRadioGroup
Groups radio menu items for single-selection behavior.
All Base UI Menu.RadioGroup props are forwarded via ...props.
DropdownMenuRadioItem
Radio-selectable menu item within a radio group.
Prop
Type
All Base UI Menu.RadioItem props are forwarded via ...props.
DropdownMenuSeparator
Visual separator between menu items or groups.
Prop
Type
All Base UI Menu.Separator props are forwarded via ...props.
DropdownMenuShortcut
Displays a keyboard shortcut hint aligned to the right of a menu item.
Prop
Type
All standard span props are forwarded via ...props.
DropdownMenuSub
Root provider for a submenu.
All Base UI Menu.SubmenuRoot props are forwarded via ...props.
DropdownMenuSubTrigger
Menu item that opens a submenu on hover or keyboard navigation.
Prop
Type
All Base UI Menu.SubmenuTrigger props are forwarded via ...props.
DropdownMenuSubContent
Popup panel for a submenu, rendered inside a portal with a positioner.
Prop
Type
All DropdownMenuContent props are forwarded via ...props.
Accessibility
Keyboard Interactions
| Key | Action |
|---|---|
Space | Activates the focused menu item |
Enter | Activates the focused menu item |
ArrowDown | Moves focus to the next menu item |
ArrowUp | Moves focus to the previous menu item |
ArrowRight | Opens a submenu when focused on a sub-trigger |
ArrowLeft | Closes a submenu and returns focus to the parent trigger |
Escape | Closes the menu |
Home | Moves focus to the first menu item |
End | Moves focus to the last menu item |
ARIA Attributes
DropdownMenuContentreceivesrole="menu".DropdownMenuItemreceivesrole="menuitem".DropdownMenuCheckboxItemreceivesrole="menuitemcheckbox"witharia-checked.DropdownMenuRadioItemreceivesrole="menuitemradio"witharia-checked.DropdownMenuSubcontent receivesrole="menu"for nested menus.data-disabledis set on disabled items, which setsaria-disabled.- Focus is managed within the menu and returns to the trigger when the menu closes.