Dropdown Menu

PreviewCopy Anchor Link

UsageCopy Anchor Link

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from '@vitnode/core/components/ui/dropdown-menu'

<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline">Open</Button>} />
  <DropdownMenuContent className="w-56">
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuItem>
      Profile
      <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Log out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

The menu matches the trigger's width (at least min-w-36). Set a width with className when the trigger is small. DropdownMenuShortcut is only a label: bind the keys yourself.

Nest DropdownMenuSub, DropdownMenuSubTrigger and DropdownMenuSubContent for a submenu. It opens on hover, click or the right arrow.

Icon trigger and destructive itemsCopy Anchor Link

An icon-only trigger needs an aria-label. Use align="end" when the trigger sits at the end of a row, and variant="destructive" for actions you can't take back.

<DropdownMenuTrigger
  render={
    <Button aria-label="Post actions" size="icon-sm" variant="ghost">
      <EllipsisIcon />
    </Button>
  }
/>
<DropdownMenuContent align="end">
  <DropdownMenuItem variant="destructive">
    <Trash2Icon />
    Delete
  </DropdownMenuItem>
</DropdownMenuContent>

Checkbox and radio itemsCopy Anchor Link

DropdownMenuCheckboxItem toggles on its own. Items in a DropdownMenuRadioGroup pick one. The check mark sits at the start of the row, like in the Context Menu and Menubar. Add inset to labels and plain items in the same menu so their text lines up.

<DropdownMenuCheckboxItem checked={showPinned} onCheckedChange={setShowPinned}>
  Pinned threads
</DropdownMenuCheckboxItem>
<DropdownMenuRadioGroup onValueChange={setSort} value={sort}>
  <DropdownMenuRadioItem value="latest">Latest activity</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>

AccessibilityCopy Anchor Link

• Arrow keys move between items, typing a letter jumps to a match and Escape closes the menu and returns focus to the trigger.
• Rows grow to a 44px tap target on touch screens. Long menus scroll without dragging the page.
• The menu scales in from its trigger in 150ms and leaves in 100ms. Reduced motion turns that off.

PropsCopy Anchor Link

DropdownMenuContentCopy Anchor Link

DropdownMenuSubContent opens to the right with alignOffset={-4}, so its first item lines up with the sub-trigger.

DropdownMenuItemCopy Anchor Link

DropdownMenuLabel and DropdownMenuSubTrigger accept inset too.

API ReferenceCopy Anchor Link

Base UI - Menu