Dropdowns
A dropdown menu component for displaying contextual actions and options. Built on Radix UI primitives with support for sub-menus, separators, and keyboard navigation. Perfect for action menus and navigation.
Installation
Import
Usage
Use DropdownMenu for contextual actions and options. Group related items with separators. Use submenus for nested options. Use icons to provide visual context. Use ComposedDropdownMenu for simpler API when you don't need full control. Keep menu items concise and actionable.
Design Guidelines
Maintain consistent dropdown menu styling throughout your application. Use appropriate positioning to avoid viewport overflow. Group related items visually with separators. Use icons consistently. Keep menu items concise. Position menus clearly relative to their triggers.
Basic Usage
Simple dropdown menu with items
With Icons
Dropdown menu items with icons
With Separators
Dropdown menu with grouped items and separators
With Submenu
Dropdown menu with nested submenu
Composed Dropdown
Using ComposedDropdownMenu for simpler API
DropdownMenu
Root dropdown menu component that manages menu state This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state |
defaultOpen | boolean | — | Uncontrolled default open state |
onOpenChange | (open: boolean) => void | — | Callback fired when open state changes |
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
DropdownMenuTrigger
Element that triggers the dropdown menu This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
tooltip | string | React.ComponentProps<typeof TooltipContent> | — | Optional tooltip to show on hover |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
className | string | — | Additional CSS classes to apply to the component |
DropdownMenuContent
Content container for the dropdown menu This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "bottom" | Side of the trigger to display the menu |
align | "start" | "center" | "end" | "start" | Alignment of the menu relative to trigger |
sideOffset | number | 4 | Distance in pixels from the trigger |
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
DropdownMenuItem
Individual menu item This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | false | Whether the item is disabled |
onSelect | (event: Event) => void | — | Callback fired when item is selected |
children | React.ReactNode | — | Item content |
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
DropdownMenuSeparator
Visual separator between menu items This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
ComposedDropdownMenu
Composed dropdown menu with simplified API This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
Trigger | React.ComponentType | — | Component to use as trigger |
TriggerProps | object | — | Props to pass to the trigger component |
items | ItemOption[] | — | Array of menu items with label, icon, and action |
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
Accessibility
Accessibility features and considerations
DropdownMenu includes proper ARIA attributes and keyboard navigation. Arrow keys navigate between items. Enter or Space selects items. Escape closes the menu. Screen readers announce menu structure and items. Ensure menu items have descriptive labels.