Dropdown Menu

Usage

import { Button } from "@tulipfarm/sprout/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@tulipfarm/sprout/dropdown-menu";

<DropdownMenu>
  <DropdownMenuTrigger
    render={<Button variant="ghost" size="icon-sm" aria-label="Actions for row 1042" />}
  >
    <MoreH size={16} aria-hidden="true" />
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
    <DropdownMenuGroup>
      <DropdownMenuItem onClick={edit}>Edit row</DropdownMenuItem>
      <DropdownMenuItem onClick={history}>History</DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive" onClick={remove}>
      Delete row
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Pass a Button to DropdownMenuTrigger through render. Icon-only triggers need an aria-label. Disable the trigger with disabled on either part, and set aria-busy while work runs.

Sizes

DropdownMenuContent size is "anchor" (the default: as wide as the trigger, at least 8rem) or "menu" (a fixed 16rem). Use anchor for text triggers like “Selected actions” and short row menus. Use menu for icon triggers with icon items, longer labels, and two-line choices. Both stay inside the viewport and scroll when tall.

Placement

Set side, align, sideOffset, and alignOffset. Menus open below and start-aligned by default. Composers and footers use side="top". The menu flips when there is no room.

States

A busy trigger changes its label and sets aria-busy. Items take disabled; they stay readable at half opacity and can’t be chosen. When work finishes, show the result next to the trigger and offer only the actions that still apply.

Checkboxes and radios

DropdownMenuCheckboxItem and DropdownMenuRadioItem show a check on the right. They keep the menu open so people can change several options; filters also pass closeOnClick={false} to say so outright. Pass closeOnClick to close after one choice.

Links and submenus

Render an item as a link with render={<a href="…" />} or your router’s link. DropdownMenuSub nests a menu: the DropdownMenuSubTrigger adds a chevron and opens DropdownMenuSubContent to the side. Long names truncate inside the 16rem menu.

Controlled

Control the menu with open and onOpenChange to open it from a shortcut. finalFocus on the content decides where focus lands when it closes.

Menubar

import { Menubar } from "@base-ui/react/menubar";

<Menubar>
  <DropdownMenu>
    <DropdownMenuTrigger className="menubar-trigger">File</DropdownMenuTrigger>
    <DropdownMenuContent alignOffset={-4} sideOffset={8} className="min-w-48">
      <DropdownMenuItem>New task<DropdownMenuShortcut>⌘ N</DropdownMenuShortcut></DropdownMenuItem>
      <DropdownMenuItem inset>Duplicate</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</Menubar>

API

DropdownMenu, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuGroup, DropdownMenuSub, DropdownMenuRadioGroup, and DropdownMenuSeparator wrap the Base UI menu parts and take their props, including render.

DropdownMenuContent renders its own portal and positioner. It takessize, side, align, sideOffset (4), alignOffset (0), collisionPadding (8), container, and every Base UI popup prop such as finalFocus. DropdownMenuSubContent takes the same props and defaults to side="right".

DropdownMenuItem takes variant ("default" or "destructive") and inset. DropdownMenuLabel, DropdownMenuSubTrigger, and the checkbox and radio items take inset too. DropdownMenuShortcut is a plain span for hint text; it does not bind keys. Every part sets a data-slot, and you can override it.

Accessibility

The trigger has aria-haspopup="menu" and aria-expanded. Enter, Space, and Arrow Down open the menu. Arrow keys move, typing jumps to a matching item, Arrow Right opens a submenu and Arrow Left closes it, and Escape closes the menu and returns focus. Disabled items can still be reached with arrow keys so people know they exist, but they can’t be chosen.

Menus fade and scale in from the trigger over 120ms. Motion turns off when reduced motion is requested. In forced-colors mode the highlighted item gets an outline.

Theme tokens

Menus use --sprout-surface, --sprout-line, --sprout-hover, --sprout-text, --sprout-muted, --sprout-danger, --sprout-danger-subtle, --sprout-shadow-overlay, and the panel and control radii. They need no brand color, so they look the same with the neutral and TulipFarm themes in light and dark mode.