# Dropdown Menu

Build a menu with DropdownMenu-prefixed part names.

Account dropdown menu

[Complete TSX file](/examples/dropdown-menu/default.tsx)

```tsx
"use client";

import {
  CircleHelpIcon,
  CreditCardIcon,
  KeyRoundIcon,
  LinkIcon,
  LogOutIcon,
  MailIcon,
  PlusIcon,
  SettingsIcon,
  Trash2Icon,
  UserIcon,
  UserPlusIcon,
  UsersIcon,
} from "lucide-react";
import { Button } from "@/siteplane/components/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/siteplane/components/dropdown-menu";

export default function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        Account
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start">
        <DropdownMenuGroup>
          <DropdownMenuLabel>My account</DropdownMenuLabel>
          <DropdownMenuItem>
            <UserIcon />
            Profile
            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <CreditCardIcon />
            Billing
            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <SettingsIcon />
            Settings
            <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          <UsersIcon />
          Team
        </DropdownMenuItem>
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>
            <UserPlusIcon />
            Invite members
          </DropdownMenuSubTrigger>
          <DropdownMenuSubContent>
            <DropdownMenuItem>
              <MailIcon />
              Email
            </DropdownMenuItem>
            <DropdownMenuItem>
              <LinkIcon />
              Invite link
            </DropdownMenuItem>
          </DropdownMenuSubContent>
        </DropdownMenuSub>
        <DropdownMenuItem>
          <PlusIcon />
          New team
          <DropdownMenuShortcut>⌘T</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">
          <Trash2Icon />
          Delete team
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          <CircleHelpIcon />
          Support
        </DropdownMenuItem>
        <DropdownMenuItem disabled>
          <KeyRoundIcon />
          API access
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          <LogOutIcon />
          Sign out
          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
```

## Installation

Complete [one-time setup](/docs/installation/) first.

```bash
pnpm dlx shadcn@4.18.0 add @siteplane/dropdown-menu
```

With npm: `npx shadcn@4.18.0 add @siteplane/dropdown-menu`. [Registry JSON](/registry/dropdown-menu.json) lists source files and dependencies.

For this page’s examples, also install:

```bash
pnpm dlx shadcn@4.18.0 add @siteplane/button
```

## Usage

```tsx
import { PencilIcon } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from "@/siteplane/components/dropdown-menu";
import { Button } from "@/siteplane/components/button";

<DropdownMenu>
  <DropdownMenuTrigger render={<Button />}>Actions</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>
      <PencilIcon />
      Edit
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>;
```

Every part is an alias of the matching [Menu](/docs/components/menu/) part. Menu shows more examples, such as an account menu and checkbox and radio items.

## Composition

```text
DropdownMenu
├── DropdownMenuTrigger
└── DropdownMenuContent
    ├── DropdownMenuGroup → DropdownMenuLabel + items
    ├── DropdownMenuItem / CheckboxItem / RadioGroup
    ├── DropdownMenuSeparator
    └── DropdownMenuSub → SubTrigger + DropdownMenuSubContent
```

## Glass

`DropdownMenuContent` takes `variant="glass"` like [MenuPopup](/docs/components/menu/#glass), for a menu that opens over a photo, a video or a color surface. Give a `DropdownMenuSubContent` the same variant so its submenu matches.

Glass dropdown menu

[Complete TSX file](/examples/dropdown-menu/glass.tsx)

```tsx
"use client";

import { LogOutIcon, SettingsIcon, UserIcon } from "lucide-react";
import { Button } from "@/siteplane/components/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/siteplane/components/dropdown-menu";

export default function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="glass" />}>
        Account
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" variant="glass">
        <DropdownMenuItem>
          <UserIcon />
          Profile
        </DropdownMenuItem>
        <DropdownMenuItem>
          <SettingsIcon />
          Settings
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          <LogOutIcon />
          Sign out
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
```

## API reference

Every export in this module is a direct alias of [Menu](/docs/components/menu/): DropdownMenu→Menu, Trigger→MenuTrigger, Content→MenuPopup, Portal→MenuPortal, Group→MenuGroup, Label→MenuGroupLabel, Item→MenuItem, CheckboxItem→MenuCheckboxItem, RadioGroup→MenuRadioGroup, RadioItem→MenuRadioItem, Separator→MenuSeparator, Shortcut→MenuShortcut, Sub→MenuSub, SubTrigger→MenuSubTrigger and SubContent→MenuSubPopup. Props and behavior are identical; see the [Menu API reference](/docs/components/menu/#api-reference). This module does not export LinkItem, CreateHandle or Primitive; import those from the Menu module under their documented names.

`DropdownMenuPortal` is the MenuPortal alias and accepts its portal props. DropdownMenuContent and DropdownMenuSubContent already include a portal; do not wrap them in another one.

[Read the installed source](/source/dropdown-menu).

## Usage notes

Start every action item with a fitting lucide icon, such as `PencilIcon` for Edit or `Trash2Icon` for Delete; checkbox and radio items show their own indicator instead. Give an item that removes something `variant="destructive"`, which colors its label and its icon red, and set it apart after a `DropdownMenuSeparator`, like Delete team in the example. Arrow keys move through the items, including disabled ones, which cannot be activated. Enter activates an item, and Escape closes the menu with focus restoration. Use real links for navigation. Selection here is menu state, not native form submission.