DropdownMenu
Dropdown menu built on Radix UI DropdownMenu primitives. Supports items, labels, separators, checkbox items, sub-menus, and keyboard shortcuts.
Basic Menu
Preview
With Checkbox Items
Preview
With Sub-Menu
Preview
DropdownMenuItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
| inset | boolean | false | Adds left padding to align with items that have icons or checkboxes. |
| disabled | boolean | false | Prevents the item from being selected or focused. |
DropdownMenuContent Props
| Prop | Type | Default | Description |
|---|---|---|---|
| sideOffset | number | 4 | Distance in pixels from the trigger element. |
| align | "start" | "center" | "end" | "center" | Alignment of the content relative to the trigger. |
DropdownMenuCheckboxItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
| checked* | boolean | - | Whether the checkbox item is checked. |
| onCheckedChange | (checked: boolean) => void | - | Callback when the checked state changes. |
Accessibility
- Built on Radix UI DropdownMenu for full WAI-ARIA compliance.
- Supports keyboard navigation: Arrow keys to move between items, Enter or Space to select, Escape to close.
- Focus is automatically trapped within the open menu.
- Sub-menus are accessible via Arrow Right and Arrow Left keys.
- The trigger element should have descriptive text for screen reader users.