Components
Dropdown Menu
Displays a menu of actions or options triggered by a button. Use it for contextual actions, account menus, and view toggles.
Preview
Live and interactive: open it, then toggle the theme. The panel, item focus highlight, and separators all remap from Cognition tokens, no dark: classes. Focus is trapped and arrow keys navigate.
API
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">Open</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-56">
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>
<User />
Profile
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>Settings</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>DropdownMenuLabel, DropdownMenuSeparator, and DropdownMenuShortcut structure the panel; a leading Lucide icon in an Item is sized automatically.
Checkbox & radio items
DropdownMenuCheckboxItem and DropdownMenuRadioGroup / RadioItem hold selection state with token-driven check and dot indicators.
Don't and Do
Don't import from @radix-ui/* directly and restyle inline: that's how unstyled, off-token menus creep in. Use the Cognition wrapper. And don't use it for primary navigation; that's a nav or a Select.
// Import the Cognition wrapper, not the Radix primitive
import { DropdownMenu } from "@/components/ui/dropdown-menu";import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
} from "@/components/ui/dropdown-menu";Keyboard navigation, typeahead, focus trapping, and submenus come for free. Compose only the parts you need.