Installation

Barrel

Granular

Usage

export default function Example() {
  return (
    <DropdownMenu>
      <DropdownMenu.Trigger render={<Button>Menu</Button>} />
      <DropdownMenu.Content>
        <DropdownMenu.Item onClick={() => console.log("edit")}>
          Edit
        </DropdownMenu.Item>
        <DropdownMenu.Item onClick={() => console.log("duplicate")}>
          Duplicate
        </DropdownMenu.Item>
        <DropdownMenu.Separator />
        <DropdownMenu.Item
variant="danger"
          onClick={() => console.log("delete")}
        >
          Delete
        </DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu>
  );
}

Examples

Basic Dropdown

Inset Items

Use inset on items without an icon to align their text with items that have one.

Handling Item Clicks

Use onClick on DropdownMenu.Item to handle actions. Each item receives a standard React mouse event handler.

Checkbox Items

Use DropdownMenu.CheckboxItem for toggleable options that can be independently checked or unchecked.

Nested Menu with Radio Selection

Use DropdownMenu.Sub, DropdownMenu.SubTrigger, and DropdownMenu.SubContent to create nested submenus. For single-selection lists like language or timezone, use DropdownMenu.RadioGroup and DropdownMenu.RadioItem.

Custom Trigger with Avatar

Use the render prop to customize the trigger element while passing children to render inside it. This is useful when you need a non-button trigger (like an avatar) wrapped in an accessible button element.

Navigation Links

Use DropdownMenu.LinkItem for menu items that navigate to a URL. This renders a semantic <a> element with full control over link attributes like target and rel.

API Reference

DropdownMenu

Root component that manages the dropdown state.

DropdownMenu.Trigger

Button that opens the dropdown when clicked.

DropdownMenu.Item

Individual menu item for actions.

DropdownMenu.LinkItem

A menu item that navigates to a URL. Renders a semantic <a> element. Use this instead of Item for navigation links.

DropdownMenu.CheckboxItem

A menu item that can be toggled on or off. Use for independent boolean options.

DropdownMenu.Sub

Root component for a nested submenu. Wrap SubTrigger and SubContent inside this.

DropdownMenu.SubTrigger

Menu item that opens a nested submenu when hovered or clicked. Displays a caret icon automatically.

DropdownMenu.SubContent

Container for submenu items. Positioned relative to the SubTrigger.

DropdownMenu.Separator

A visual divider between menu items.

DropdownMenu.RadioGroup

Groups radio items for single-selection behavior. Only one item can be selected at a time.

DropdownMenu.RadioItem

A menu item that works like a radio button. Must be used inside a RadioGroup.

DropdownMenu.RadioItemIndicator

Shows the selected state for a RadioItem. Displays a checkmark by default.