Dropdown Menu – React component

"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

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

Complete the one-time setup first. Registry JSON lists source files and dependencies.

For this page’s examples, also install:

pnpm dlx shadcn@4.18.0 add @siteplane/button

Usage

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 part. Menu shows more examples, such as an account menu and checkbox and radio items.

Composition

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

Glass

DropdownMenuContent takes variant="glass" like MenuPopup, for a menu that opens over a photo, a video or a color surface. Give a DropdownMenuSubContent the same variant so its submenu matches.

The gradient only makes the glass visible. It is not part of the component.

"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>
  );
}

Every export in this module is a direct alias of 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. 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.

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.