Primitive Adaptersregistry/ui/dropdown-menu.tsx/r/dropdown-menu.json

DropdownMenu

Ink-framed action menu adapter with keyboard Escape/outside-click dismissal and ink-inverted item focus.

← All Components

Light · Paper.f12-theme-light

Interactive preview

Last action: Ready

Dark · Flashback.f12-theme-dark

Interactive preview

Last action: Ready

Install & copy-in source

shadcn CLI (dropdown-menu.json)

npx shadcn@latest add https://frame12.dev/r/dropdown-menu.json

Usage example (DropdownMenu)

import {
  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
  DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem,
} from '@/components/frame12';

export function RowActions() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger variant="secondary" size="sm">Actions ▼</DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuLabel>Webhook</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Replay payload</DropdownMenuItem>
        <DropdownMenuItem>Inspect headers</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

WCAG AAAccessibility guarantees

Accessibility notes

Sets aria-haspopup="menu" and aria-expanded on the trigger and role="menuitem" on each action.

GrammarFRAME/12 rules

Design grammar

Uses 2.5px ink rules, uppercase monospace DropdownMenuLabel, and 1px --f-grid separators.

Props & TypeScript API

Exported from @/components/frame12 (registry/ui/dropdown-menu.tsx)
Prop	Type	Default	Description
`DropdownMenuTrigger`	`{ asChild?: boolean; children: React.ReactElement }`	`required`	Button that toggles the role="menu" popup.
`DropdownMenuItem`	`{ onSelect?: () => void }`	`optional`	Focusable role="menuitem" button that closes the menu on activation.