Dropdown
navigationRadix-powered dropdown menu with animated open/close, keyboard navigation, and sub-menu support.
import { Dropdown, DropdownItem, DropdownLabel, DropdownSeparator } from '@/components/forge'Preview
Dropdown
Code Example
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
trigger | React.ReactNode | - | Yes | Element that opens the dropdown |
children | React.ReactNode | - | Yes | Dropdown menu content such as items, labels, and separators |
align | 'start' | 'center' | 'end' | 'start' | No | Horizontal alignment of the menu |
contentClassName | string | - | No | Additional classes for the dropdown content surface |
Variants
itemlabelseparatorcheckbox
Accessibility
- Uses Radix DropdownMenu for full keyboard navigation
- Trigger has aria-haspopup and aria-expanded
- Menu items have role="menuitem"