Components/Dropdown Menu

Dropdown Menu

Menu that appears next to a trigger with a list of actions, labels, separators, and shortcuts.


Installation

npx ajaxui add dropdown-menu

Notes

Anatomy

<DropdownMenu>                       // open state owner
  <DropdownMenuTrigger asChild/>
  <DropdownMenuContent>
    <DropdownMenuLabel/>
    <DropdownMenuItem/>                // most common entry
    <DropdownMenuCheckboxItem/>        // toggle-able
    <DropdownMenuRadioGroup>
      <DropdownMenuRadioItem/>         // single choice
    </DropdownMenuRadioGroup>
    <DropdownMenuSeparator/>
    <DropdownMenuSub>                  // nested menu
      <DropdownMenuSubTrigger/>
      <DropdownMenuSubContent/>
    </DropdownMenuSub>
  </DropdownMenuContent>
</DropdownMenu>

Props

PropTypeDefaultDescription
openboolean
defaultOpenboolean
onOpenChange(open: boolean) => void
align"start" | "center" | "end""start"
sideOffsetnumber4