Dropdown Menu

Menu button on the native Popover API with a highlight that glides between items, shortcuts, checkbox and radio items, submenus, typeahead and full keyboard support.

Open

side

align

sideOffset6

Installation

npx shadcn@latest add @glint-ui/dropdown-menu

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/dropdown-menu.json

Usage

import { DropdownMenu } from "@/components/ui/dropdown-menu";

<DropdownMenu>
  <DropdownMenuTrigger>Options</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem icon={<User />} shortcut="⇧⌘P">Profile</DropdownMenuItem>
    <DropdownMenuCheckboxItem checked={bar} onCheckedChange={setBar}>Status bar</DropdownMenuCheckboxItem>
    <DropdownMenuSeparator />
    <DropdownMenuSub>
      <DropdownMenuSubTrigger>Invite</DropdownMenuSubTrigger>
      <DropdownMenuSubContent>
        <DropdownMenuItem>Email</DropdownMenuItem>
      </DropdownMenuSubContent>
    </DropdownMenuSub>
  </DropdownMenuContent>
</DropdownMenu>

Props

Prop	Type	Default	Description
side	"bottom" \| "top" \| "right" \| "left"	"bottom"	Content: preferred side (flips when there is no room).
align	"start" \| "center" \| "end"	"start"	Content: alignment along the trigger.
sideOffset	number	6	Content: gap to the trigger in px.
open	ReactNode	—	DropdownMenu: controlled open state (with onOpenChange), or defaultOpen.
children	ReactNode	—	DropdownMenuItem (onSelect, icon, shortcut, variant, disabled), DropdownMenuCheckboxItem, DropdownMenuRadioGroup + DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub + SubTrigger + SubContent.
className	string	—	Extra classes for the root element.