Basel Standard / Docs

Dropdown Menu

Compact trigger-attached menu for secondary actions, local settings, and row-level controls.

Dropdown menus reveal a short cluster of actions from an explicit trigger. They work well when the user can see where the actions belong but does not need them visible all the time. In this system the menu keeps a disciplined edge and type rhythm so it can sit inside tables, cards, and toolbars without feeling ornamental.

Installation

Install

Purchase access, then open /account/install to issue a registry token.

Usage

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

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Open actions</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Edit metadata</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Why This Primitive Exists

Some actions should stay available without occupying permanent space. Dropdown menus keep those actions close to the trigger that owns them.

Use them for row actions, toolbar overflow, and compact view settings.
Prefer them when the user expects to click a visible trigger to reveal secondary actions.
Avoid them for destructive confirmations or workflows that deserve a fuller overlay.

Examples

A clear trigger and a short, well-ordered action list are enough for many product surfaces.

<DropdownMenuContent align="start">
  <DropdownMenuLabel>Surface actions</DropdownMenuLabel>
  <DropdownMenuItem>Duplicate section</DropdownMenuItem>
</DropdownMenuContent>

View Settings And Modes

Checkbox items, radio groups, and submenus help keep small configuration controls close to the surface they affect.

<DropdownMenuSub>
  <DropdownMenuSubTrigger>Density mode</DropdownMenuSubTrigger>
  <DropdownMenuSubContent>
    <DropdownMenuRadioGroup value="balanced">
      <DropdownMenuRadioItem value="compact">Compact</DropdownMenuRadioItem>
    </DropdownMenuRadioGroup>
  </DropdownMenuSubContent>
</DropdownMenuSub>

In Context

The menu is strongest when it belongs to a visible object such as a row, card, or issue summary.

Row actions

Dropdown menus work best as compact action clusters attached to a visible trigger.

They should expose secondary actions without displacing the main table or card rhythm.

Issue 06 / Publish checklist

Ready for editorial sign-off and release scheduling.

<div className="flex items-center justify-between">
  <div>{/* issue summary */}</div>
  <DropdownMenu>{/* row actions */}</DropdownMenu>
</div>

Guidance

Keep The Trigger Explicit

Use a visible button, icon button, or row affordance as the trigger.
Do not depend on hidden or ambiguous hover states to reveal important actions.
If the action needs explanation before selection, it likely wants another surface.

Write Short, Ordered Action Lists

Put the most common actions first.
Group settings separately from primary actions.
Keep destructive or irreversible actions clearly named and separated.

Use DropdownMenu when the user clicks a known trigger.
Use ContextMenu when the action surface is tied to right-click or long-press on an object.
Use Dialog or AlertDialog when the next step needs confirmation or more room.

API Reference

Core Exports

Export	Renders	Notes
`DropdownMenu`	`DropdownMenuPrimitive.Root`	Root state container.
`DropdownMenuTrigger`	`DropdownMenuPrimitive.Trigger`	Visible action trigger, often used with `asChild`.
`DropdownMenuContent`	`DropdownMenuPrimitive.Content`	Portal-based menu surface with shared spacing and border treatment.
`DropdownMenuItem`	`DropdownMenuPrimitive.Item`	Standard action row with optional `inset`.
`DropdownMenuCheckboxItem`	`DropdownMenuPrimitive.CheckboxItem`	Toggle row with built-in indicator.
`DropdownMenuRadioItem`	`DropdownMenuPrimitive.RadioItem`	Mutually exclusive selection row.
`DropdownMenuLabel`	`DropdownMenuPrimitive.Label`	Section label.
`DropdownMenuSeparator`	`DropdownMenuPrimitive.Separator`	Divider between groups.
`DropdownMenuShortcut`	`span`	Shortcut hint slot.
`DropdownMenuSub`, `DropdownMenuSubTrigger`, `DropdownMenuSubContent`	Radix submenu parts	Nested action groups.
`DropdownMenuRadioGroup`	`DropdownMenuPrimitive.RadioGroup`	Shared state container for radio items.

Notable Props

Export	Prop	Type	Notes
`DropdownMenuTrigger`	`asChild`	`boolean`	Lets a `Button` or custom element stay the actual trigger.
`DropdownMenuContent`	`sideOffset`	`number`	Defaults to `6` in this implementation.
`DropdownMenuItem`	`inset`	`boolean`	Adds left padding for aligned rows.
`DropdownMenuCheckboxItem`	`checked`, `onCheckedChange`	Radix checkbox item props	For local on/off settings.
`DropdownMenuRadioGroup`	`value`, `onValueChange`	Radix radio group props	For local view modes and density choices.

The dropdown menu is a Swiss wrapper around Radix Dropdown Menu, so focus handling, keyboard navigation, and collision-aware positioning remain available.

Previous: Drawer Next: Empty