Dropdown Menu

Displays a menu of actions triggered by a button. Supports shortcuts, nested submenus, checkboxes, radio groups, and destructive items. Chevron and inset spacing use logical properties for LTR and RTL.

Basic

Open a menu from a button with labels and separators.

Installation

CLI

npx @sonojs/ui@latest add dropdown-menu

Also needsnpm i lucide-react

Composition

structure

DropdownMenu
├── DropdownMenuTrigger
└── DropdownMenuContent
    ├── DropdownMenuGroup
    │   ├── DropdownMenuLabel
    │   └── DropdownMenuItem
    ├── DropdownMenuSeparator
    └── DropdownMenuSub
        ├── DropdownMenuSubTrigger
        └── DropdownMenuSubContent

Usage

dropdown-menu.tsx

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Open</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuGroup>
          <DropdownMenuLabel>My Account</DropdownMenuLabel>
          <DropdownMenuItem>Profile</DropdownMenuItem>
          <DropdownMenuItem>Billing</DropdownMenuItem>
          <DropdownMenuItem>Team</DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>Subscription</DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Props

Prop	Type	Default	Description
align	"start" · "center" · "end"	"center"	On DropdownMenuContent — prefer start/end over left/right assumptions.
inset	boolean	—	On Item / SubTrigger / Label / Checkbox / Radio — indent to align with icons.
variant	"default" · "destructive"	"default"	On DropdownMenuItem — destructive styles for deletes.
checked	boolean	—	On DropdownMenuCheckboxItem — checked state.
asChild	boolean	false	On DropdownMenuTrigger — merge props into the child (e.g. Button).