Component

Dropdown Menu

Displays a menu to the user — such as a set of actions or functions — triggered by a button. Built on Radix UI Dropdown Menu primitive.

Preview

Installation

pnpm dlx brutx@latest add dropdown-menu

Usage

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
} from "@/components/ui/dropdown-menu"

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>Open</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Examples

With Submenus

Use nested submenus for complex navigation hierarchies.

With Checkboxes

Toggle options using checkbox menu items.

With Radio Items

Select a single option from a group.

With Disabled Items

Use disabled prop to disable specific items.

API Reference

DropdownMenuContent

The container for menu items.

Prop	Type	Default	Description
sideOffset	number	6	Distance from trigger in pixels
side	"top" \| "bottom" \| "left" \| "right"	"bottom"	Position relative to trigger
align	"start" \| "center" \| "end"	"center"	Alignment relative to trigger

DropdownMenuItem

Individual menu item.

Prop	Type	Default	Description
disabled	boolean	false	Disable the menu item
inset	boolean	false	Add left padding for alignment
onSelect	(event) => void	-	Handler when item is selected

All Exports

Component	Description
DropdownMenu	Root component managing state
DropdownMenuTrigger	Button that opens the menu
DropdownMenuContent	Container for items
DropdownMenuItem	Basic menu item
DropdownMenuCheckboxItem	Toggleable checkbox item
DropdownMenuRadioGroup	Group for radio items
DropdownMenuRadioItem	Radio selection item
DropdownMenuLabel	Section label/heading
DropdownMenuSeparator	Visual divider
DropdownMenuShortcut	Keyboard shortcut display
DropdownMenuGroup	Group related items
DropdownMenuSub	Submenu root
DropdownMenuSubTrigger	Opens submenu on hover
DropdownMenuSubContent	Submenu content container
DropdownMenuPortal	Portal for menu content

Accessibility

Enter / Space opens menu and selects item
↑ ↓ navigate between items
→ opens submenu, ← closes submenu
Escape closes the menu
Type to search and focus matching items