Dropdown Menu

You might be looking for:

Select
Pick one value from a short list.
Combobox
Type to search a long list, then pick one.

Chip is a trigger shape, not this component

The compact pill on a Number Input currency row looks like a “dropdown”, but it is a chip form factor on SelectTrigger variant="chip" — a small secondary pill that opens a Select list. Dropdown Menu is the floating action list itself, not the trigger frame.

See Select → Chip variant for the currency-picker pattern.

Usage

import { CaretDownIcon } from "@phosphor-icons/react";
import { Button } from "@sophic/portal-ui/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@sophic/portal-ui/components/ui/dropdown-menu";

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>
      Actions
      <CaretDownIcon />
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
    <DropdownMenuItem onClick={() => {}}>Update</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuSeparator, and DropdownMenuSub are also exported for longer menus. For action rows with an icon and help text, pass leading and description on DropdownMenuItem instead of hand-rolling layout.

Props

DropdownMenu, DropdownMenuTrigger, and DropdownMenuContent pass every prop through to their Radix counterparts (open, onOpenChange, align, sideOffset, ...). The subcomponents below add props on top.

DropdownMenuItem

Prop

Type

Default

Tokens

Dropdown Menu reads --menu-* for the shell and rows (shared with Select). Fallbacks keep apps without those tokens on the previous look.

Changelog

4 October 2026 — Shared frost via --popover / --popover-blur. Full notes Full notes
19 August 2026 — Shared --floating-surface-shadow elevation token. Full notes
19 August 2026 — “You might be looking for” map to Select and Combobox. Full notes
19 August 2026 — Styles live in a CSS module; look and tokens unchanged. Full notes
15 July 2026 — Open menus use Base System --menu-* shell (shared with Select). Full notes