DropdownMenu

In the app

Row actions and column pickers. Items, checkbox items, labels and separators, with arrow-key focus and a 4px rise on open. 20 uses in the app.

@varick/ui/components/dropdown-menuAdded 2 Sept 2026

Usage

import {
  DropdownMenu, DropdownTrigger, DropdownContent,
  DropdownItem, DropdownSeparator,
} from "@varick/ui/components/dropdown-menu";

export function Example() {
  return (
    <DropdownMenu>
      <DropdownTrigger asChild>
        <IconButton label="Row actions" />
      </DropdownTrigger>
      <DropdownContent>
        <DropdownItem shortcut="⌘E" onSelect={edit}>Edit</DropdownItem>
        <DropdownItem onSelect={pause}>Pause agent</DropdownItem>
        <DropdownSeparator />
        <DropdownItem destructive onSelect={remove}>Delete</DropdownItem>
      </DropdownContent>
    </DropdownMenu>
  );
}

Variants

Checkbox items, for column and filter pickers

<DropdownContent align="start">
  <DropdownLabel>Show columns</DropdownLabel>
  <DropdownCheckboxItem checked={cols.runs} onCheckedChange={set("runs")}>
    Runs
  </DropdownCheckboxItem>
  <DropdownSeparator />
  <DropdownItem onSelect={showAll}>Show all</DropdownItem>
</DropdownContent>

API reference

Every component also accepts className and the native props of its root element.

Prop	Type	Default	Description
DropdownMenu.open	boolean	uncontrolled	Controlled open state, with onOpenChange.
DropdownTrigger.asChild	boolean	false	Use the child as the trigger instead of rendering a Button.
DropdownContent.align	'start' \| 'end'	'end'	Which edge of the trigger the menu hangs from.
DropdownItem.onSelect	() => void	undefined	Fires, then the menu closes and focus returns to the trigger.
DropdownItem.destructive	boolean	false	Red text and a red hover wash.
DropdownItem.shortcut	string	undefined	Right-aligned mono hint. Display only.
DropdownCheckboxItem.checked	boolean	required	With onCheckedChange. The menu stays open.

Accessibility

Trigger carries aria-haspopup="menu", aria-expanded and aria-controls.
Content is role="menu"; items are menuitem or menuitemcheckbox with aria-checked.
Opening focuses the first item. Arrow keys, Home and End move; Escape closes and returns focus; Tab closes.
Pointer-down outside the root closes it.

Styles

The CSS as it appears in the app. The live component above is the same values as Tailwind classes.

.dropdown { position: relative; display: inline-flex; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 176px;
  background: #FFFFFF;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.04);
  padding: 4px;
  transform: translateY(-4px) scale(0.98);
  opacity: 0;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
  z-index: 30;
}
.dropdown-menu.open { opacity: 1; transform: none; }
.dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--fg-high);
  border-radius: 4px;
  transition: background 120ms var(--ease-out);
}
.dropdown-item:hover { background: var(--fill); }
.dropdown-sep { border-top: 1px solid var(--hairline-soft); margin: 4px 2px; }