For AI agents: the documentation index is at /llms.txt, and any docs page is available as Markdown by appending .md to its URL.

Dropdown Menu

A menu of actions opened from a button, with checkbox, radio, and submenu items.

When to use

Use when: A list of actions behind one trigger, such as an overflow menu.
Avoid when: People pick a value from options; use Select.

Installation

bunx shelf add dropdown-menu

The source lands in src/components/ui/dropdown-menu.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as DropdownMenu from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";

<DropdownMenu.Root>
  <DropdownMenu.Trigger render={<Button variant="outline" />}>Options</DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item onClick={rename}>Rename</DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item variant="destructive">Delete</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: foundations, Icons, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: Optional native Figma library. See Designers.