Dropdown Menu

A list of actions in a dropdown, enhanced with keyboard navigation.

API Reference

Preview

Installation

Usage

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuGroupLabel,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Log Out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

API Reference

Root component. Alias for Menu.Root from Base UI.

Trigger button that opens the menu. Alias for Menu.Trigger from Base UI.

Popup container that displays the menu content. Wraps Menu.Portal, Menu.Positioner, and Menu.Popup.

Groups related menu items. Alias for Menu.Group from Base UI.

Label for a menu group. Alias for Menu.GroupLabel from Base UI.

Individual selectable menu item. Alias for Menu.Item from Base UI.

Visual separator between items or groups. Alias for Menu.Separator from Base UI.

Toggleable menu item with a check indicator.

Container for exclusive radio menu items. Alias for Menu.RadioGroup from Base UI.

Radio menu item with a dot indicator.

Submenu container. Alias for Menu.SubmenuRoot from Base UI.

Trigger for opening a submenu. Includes a built-in arrow icon.

Examples

With Groups

Checkbox Items

Radio Group