Dropdown Menu

A list of actions in a dropdown, enhanced with keyboard navigation.

Installation


pnpm dlx shadcn@latest add @lumi-ui/dropdown-menu

Anatomy

<Dropdown>
  <DropdownMenuTrigger />
  <DropdownMenuContent>
     <DropdownMenuItem />
     <DropdownMenuItem>
       <DropdownMenuShortcut />
     </DropdownMenuItem>
     <DropdownMenuSeparator />
     <DropdownMenuGroup>
       <DropdownMenuGroupLabel />
     </DropdownMenuGroup>
     <DropdownMenuRadioGroup>
       <DropdownMenuRadioItemContent />
     </DropdownMenuRadioGroup>
     <DropdownMenuCheckboxItemContent />
     <DropdownMenuSubMenu>
       <DropdownMenuSubMenuTriggerGroup />
       <DropdownMenuSubMenuContent>
         {/* Submenu items  */}
       </DropdownMenuSubMenuContent>
     </DropdownMenuSubMenu>
  </DropdownMenuContent>
</Dropdown>

Basic Usage

Features

Matching the Trigger Width

With Arrow

Group labels

Checkbox items

Radio items

Cookbook

Style Trigger when open

Open on hover

Close on click

Navigate to another page

Use the render prop to compose a menu item with an anchor element.

Open a dialog

Control the dialog state and open it imperatively using the onClick handler on the menu item.