Overlays · Application UI
Dropdown Menu
A composable dropdown menu built on Base UI's Menu primitive, providing a trigger-controlled popup with support for items, checkboxes, radio groups, submenus, separators, and keyboard shortcuts.
Feature showcase
Installation
Features
7 examples
Default, Disabled, With Checkboxes, With Icons, With Radio, With Shortcuts, With Submenu.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | - | Controls the open state of the menu (controlled mode). |
| defaultOpen | boolean | - | The initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | - | Callback fired when the open state changes. |
| modal | boolean | true | Whether the menu should behave as a modal (trap focus). |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/dropdown-menu.tsx |
| Default example | content/examples/dropdown-menu/default.tsx |
| Disabled example | content/examples/dropdown-menu/disabled.tsx |
| With Checkboxes example | content/examples/dropdown-menu/with-checkboxes.tsx |
| With Icons example | content/examples/dropdown-menu/with-icons.tsx |
| With Radio example | content/examples/dropdown-menu/with-radio.tsx |
| With Shortcuts example | content/examples/dropdown-menu/with-shortcuts.tsx |
| With Submenu example | content/examples/dropdown-menu/with-submenu.tsx |