Overlays

Dropdown menu

A button that opens a list of commands.

Client component7 exportsSource

Import

import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@the_viveksingh/vivek-ui'

A menu of actions

role="menu" with the full keyboard map: arrows move, typeahead jumps, Escape closes and returns focus to the trigger. shortcut is display only - bind the key yourself.

<DropdownMenu>
  <DropdownMenuTrigger>Actions</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Invoice INV-1042</DropdownMenuLabel>
    <DropdownMenuItem shortcut="E" onSelect={edit}>Edit</DropdownMenuItem>
    <DropdownMenuItem shortcut="D" onSelect={duplicate}>Duplicate</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem disabled>Send reminder</DropdownMenuItem>
    <DropdownMenuItem onSelect={remove}>Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Checkbox items

closeOnSelect={false} keeps the menu open so several columns can be toggled in one pass, which is what a column picker needs.

<DropdownMenu>
  <DropdownMenuTrigger>View options</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Columns</DropdownMenuLabel>
    <DropdownMenuCheckboxItem defaultChecked closeOnSelect={false}>Invoice</DropdownMenuCheckboxItem>
    <DropdownMenuCheckboxItem defaultChecked closeOnSelect={false}>Client</DropdownMenuCheckboxItem>
    <DropdownMenuCheckboxItem closeOnSelect={false}>Tax</DropdownMenuCheckboxItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem shortcut="R">Reset to defaults</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for DropdownMenu
Prop	Type	Default	Description
`children`	`ReactNode`	—	—
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	—	Initial open state while uncontrolled. Default `false`.
`onOpenChange`	`(open: boolean) => void`	—	—
`side`	`Side`	—	Preferred side. Flipped to its opposite when there is no room. Default `'bottom'`.
`align`	`Align`	—	Cross-axis alignment. Default `'start'` - menus line up with their trigger's edge.
`offset`	`number`	—	Gap between trigger and menu, px. Default `4`.
`padding`	`number`	—	Minimum distance kept from the viewport edges, px. Default `8`.
`loop`	`boolean`	—	Wrap arrow navigation past the ends. Default `true`.
`typeahead`	`boolean`	—	Jump to an item by typing its first letters. Default `true`.
`container`	`PortalContainer`	—	Where to portal the menu. Defaults to `document.body`.
`id`	`string`	—	Ids for the trigger/menu pair. Generated when omitted.

Exports

DropdownMenuDropdownMenuCheckboxItemDropdownMenuContentDropdownMenuItemDropdownMenuLabelDropdownMenuSeparatorDropdownMenuTrigger

Rendering

Client component

DropdownMenu declares 'use client' because it needs state, effects or event handlers. Importing it into a Server Component creates a client boundary at this component — everything above it stays on the server.