Dropdown Menu

Presents a list of actions or options to the user in a temporary overlay, typically triggered by clicking a button or icon. Ideal for settings menus, action lists, or navigation options.

Docs API Reference

Component Installation Guide

npx shadcn@latest add dropdown-menu

Implementing the Dropdown Menu

  DropdownMenu, // The main container component managing the dropdown state.
  DropdownMenuCheckboxItem, // A menu item variant that behaves like a checkbox.
  DropdownMenuContent, // The panel that appears, containing the menu items.
  DropdownMenuGroup, // Optional component to group related items visually.
  DropdownMenuItem, // Represents a single standard action or option within the menu.
  DropdownMenuLabel, // A non-interactive text label, often used as a title within the menu.
  DropdownMenuPortal, // Used for advanced portal rendering if needed.
  DropdownMenuRadioGroup, // Container for a group of radio button menu items.
  DropdownMenuRadioItem, // A menu item variant that behaves like a radio button.
  DropdownMenuSeparator, // A visual separator line between groups or items.
  DropdownMenuShortcut, // Displays keyboard shortcut text associated with an item.
  DropdownMenuSub, // Container for creating nested sub-menus.
  DropdownMenuSubContent, // The content panel for a sub-menu.
  DropdownMenuSubTrigger, // An item that triggers the opening of a sub-menu.
  DropdownMenuTrigger, // Wraps the element (e.g., a button) that opens the dropdown on click.
} from "@/components/ui/dropdown-menu"; // Adjust import path as necessary.

// Basic structure: Wrap the trigger and content within the main DropdownMenu component.
<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuItem>
        Profile
        <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>Billing</DropdownMenuItem>
      <DropdownMenuItem>Settings</DropdownMenuItem>
      <DropdownMenuItem>Keyboard shortcuts</DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Team</DropdownMenuItem>
    <DropdownMenuItem>Subscription</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Log out</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

This example shows a typical dropdown structure. A <Button> wrapped by <DropdownMenuTrigger> opens the <DropdownMenuContent>. Inside, <DropdownMenuLabel> provides a title, <DropdownMenuSeparator> divides sections, and <DropdownMenuItem> represents clickable actions. You can also include <DropdownMenuCheckboxItem>, <DropdownMenuRadioGroup>, <DropdownMenuRadioItem>, and nested sub-menus using <DropdownMenuSub>.

Dropdown Menu Variations and Examples

Dropdown with Checkbox Items

Dropdown with Radio Group Items

Component Changelog

2024-10-16 Classes for icons

Added gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 to the DropdownMenuItem to automatically style icon inside the dropdown menu item.

Add the following classes to the DropdownMenuItem in your dropdown-menu.tsx file.

const DropdownMenuItem = React.forwardRef<
  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <DropdownMenuPrimitive.Item
    ref={ref}
    className={cn(
      "relative ... gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))

2024-10-25 Classes for `<DropdownMenuSubTrigger />`

Added gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 to the <DropdownMenuSubTrigger /> to automatically style icon inside.

Add the following classes to the cva call in your dropdown-menu.tsx file.

<DropdownMenuPrimitive.SubTrigger
  ref={ref}
  className={cn(
    "focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
    inset && "pl-8",
    className,
  )}
  {...props}
>
  {/* ... */}
</DropdownMenuPrimitive.SubTrigger>

Drawer Form