Dropdown Menu

Dropdown Menu provides the shadcn-compatible alias API for short action lists anchored to a trigger.

Purpose

Dropdown Menu is the shadcn-compatible alias surface for Siteplane Menu. Use the canonical Menu names in new code; use Dropdown Menu names only while migrating existing shadcn-style code.

Alias menu

import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";

export function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>Actions</DropdownMenuTrigger>
      <DropdownMenuContent><DropdownMenuItem>Duplicate</DropdownMenuItem></DropdownMenuContent>
    </DropdownMenu>
  );
}

Installation

With the Siteplane registry alias configured, add the component and import the installed source from your app.

CLI

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

Import

import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";

Need the machine-readable source metadata? View registry JSON.

Usage

Dropdown Menu is the shadcn-compatible alias layer over Siteplane Menu. New product code can use Menu directly.

import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";

export function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>Actions</DropdownMenuTrigger>
      <DropdownMenuContent><DropdownMenuItem>Duplicate</DropdownMenuItem></DropdownMenuContent>
    </DropdownMenu>
  );
}

Examples

Every alias renders the same Menu primitive, so groups, selection items and submenus work unchanged.

Grouped with shortcuts

<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>Manage</DropdownMenuTrigger>
  <DropdownMenuContent aria-label="Manage workspace">
    <DropdownMenuGroup>
      <DropdownMenuLabel>Workspace</DropdownMenuLabel>
      <DropdownMenuItem>
        Invite people
        <DropdownMenuShortcut>⌘I</DropdownMenuShortcut>
      </DropdownMenuItem>
      <DropdownMenuItem>Settings</DropdownMenuItem>
    </DropdownMenuGroup>
    <DropdownMenuSeparator />
    <DropdownMenuGroup>
      <DropdownMenuLabel>Account</DropdownMenuLabel>
      <DropdownMenuItem>Switch workspace</DropdownMenuItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>

Selection items

<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>View</DropdownMenuTrigger>
  <DropdownMenuContent aria-label="View options">
    <DropdownMenuCheckboxItem defaultChecked>Show archived</DropdownMenuCheckboxItem>
    <DropdownMenuCheckboxItem>Show drafts</DropdownMenuCheckboxItem>
    <DropdownMenuSeparator />
    <DropdownMenuRadioGroup defaultValue="week">
      <DropdownMenuRadioItem value="day">Day</DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="week">Week</DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="month">Month</DropdownMenuRadioItem>
    </DropdownMenuRadioGroup>
  </DropdownMenuContent>
</DropdownMenu>

Submenu

<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>Share</DropdownMenuTrigger>
  <DropdownMenuContent aria-label="Share options">
    <DropdownMenuItem>Copy link</DropdownMenuItem>
    <DropdownMenuSub>
      <DropdownMenuSubTrigger>Invite via</DropdownMenuSubTrigger>
      <DropdownMenuSubContent aria-label="Invite via">
        <DropdownMenuItem>Email</DropdownMenuItem>
        <DropdownMenuItem>Slack</DropdownMenuItem>
        <DropdownMenuItem>Link</DropdownMenuItem>
      </DropdownMenuSubContent>
    </DropdownMenuSub>
    <DropdownMenuItem>Download</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Destructive item

Aliases forward the Menu item variants, including destructive.

<DropdownMenuContent aria-label="Row actions">
  <DropdownMenuItem>Rename</DropdownMenuItem>
  <DropdownMenuSeparator />
  <DropdownMenuItem variant="destructive">Delete project</DropdownMenuItem>
</DropdownMenuContent>

Switch items

Checkbox items can render as switches instead of check marks.

<DropdownMenuContent aria-label="Notification settings">
  <DropdownMenuCheckboxItem defaultChecked variant="switch">Email digest</DropdownMenuCheckboxItem>
  <DropdownMenuCheckboxItem variant="switch">Push alerts</DropdownMenuCheckboxItem>
</DropdownMenuContent>

Popup width

width matches the popup to the trigger instead of its content.

<DropdownMenuContent aria-label="Wide menu" width="at-least-trigger">
  <DropdownMenuItem>Open</DropdownMenuItem>
  <DropdownMenuItem>Share</DropdownMenuItem>
</DropdownMenuContent>

API Reference

The reference lists the source-owned exports and props that are easy to miss in visual examples. Inherited Base UI props remain available unless the wrapper narrows them.

DropdownMenuContent width accepts "auto", "trigger", "content", and "at-least-trigger". Trigger width matches the anchor; content width is bounded by the viewport.
Placement props side, align, sideOffset, and alignOffset live on Content. Defaults are bottom, center, and a 4px side offset.
anchor positions the popup against a different element or virtual anchor.
Use inset on items, labels, and submenu triggers to align rows without leading icons.
Checkbox item size accepts "sm", "default", "lg", and "xl".
Items support icons with native size and opacity treatment and accept disabled for unavailable actions.
The alias maps to the same item, selection, and submenu contracts as Menu.

Motion

Component motion uses the shared Siteplane motion contract. See the global motion guide for provider setup, tokens and reduced-motion behavior.

Popup and submenu placement, scale, fade, and reduced-motion behavior come from Menu.
Do not add alias-specific motion.
Active items and submenu triggers use a pointer cursor.

Accessibility

Give the trigger visible text or an accessible label.
Keep keyboard navigation, focus, Escape, outside click, and focus restoration native.
Disabled items remain unavailable and visibly distinct.
Checkbox and radio items retain their selection indicators.

Implementation Guidance

Prefer canonical Menu* names in new code.
Do not mix Menu and Dropdown Menu naming in one file.
Use public width, placement, anchor, inset, size, disabled, and icon behavior instead of local classes.