Dropdown menu

A Radix dropdown menu ported from Atlas. Content sits on bg-surface-raised with a light ring. atlas-root → font-sans. Enter/exit is fade-only so motion does not fight Radix popper positioning. Focus wash is bg-fill (Atlas bg-sys-surface-deep).

This is the kit menu primitive. For icon / shortcut / destructive slots, use Menu. For filter chips that compose this menu, see Filter chip.

Usage

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

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>File</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>New</DropdownMenuItem>
    <DropdownMenuItem>Save</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Items, checkboxes, radios, labels, separators, shortcuts, and one-level submenus are all exported. Pair the trigger with a kit Button via asChild.

Install

shadcn add @gesso/dropdown-menu