Dropdown MenuupdateUPDATE
Displays a menu to the user, such as a set of actions or functions, triggered by a button.
Dropdown Props
The DropdownMenu component is composed of several parts, each with their own props.
The root element is the parent component that holds the dropdown menu. Using the autocomplete
prop, you can enable autocomplete functionality. Built on top of Ariakit MenuProvider
Prop | Type | Default |
---|---|---|
autocomplete | boolean | - |
autocompleteMode | "auto" | "manual" | "auto" |
searchValue | string | - |
defaultSearchValue | string | - |
onSearch | (value: string) => void | - |
placement | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | "bottom-start"" |
focusLoop | boolean | true |
DropdownMenu.Trigger
The button that triggers the dropdown menu. Built on top of Ariakit MenuButton
Prop | Type | Default |
---|---|---|
asChild | boolean | - |
DropdownMenu.TriggerItem
TriggerItem
is a helper component that renders a DropdownMenu.Trigger
as a DropdownMenu.MenuItem
.
Accepts all DropdownMenu.Item
props. The component is helpful to match styles for sub menu trigger. Use DropdownMenu.Trigger if you want more control.
DropdownMenu.Content
The container that holds the dropdown menu items. Built on top of Ariakit Menu
Prop | Type | Default |
---|---|---|
searchPlaceholder | string | "Search..." |
gutter | number | 4 |
shift | number | 0 |
asChild | boolean | - |
DropdownMenu.Item
Individual clickable options within the dropdown menu. Built on top of Ariakit MenuItem.
Renders as an Ariakit ComboboxItem when used in an autocomplete dropdown. By default, the item's children
is used for matching and selection, which can be overriden by passing a value
prop.
Prop | Type | Default |
---|---|---|
leadingIcon | ReactNode | - |
trailingIcon | ReactNode | - |
disabled | boolean | - |
value | string | - |
className | string | - |
asChild | boolean | - |
DropdownMenu.Group
A way to group related menu items together. Built on top of Ariakit MenuGroup
Prop | Type | Default |
---|---|---|
className | string | - |
asChild | boolean | - |
DropdownMenu.Label
Renders a label in a menu group. This component should be wrapped with DropdownMenu.Group so the aria-labelledby
is correctly set on the group element. Built on top of Ariakit MenuGroupLabel
Prop | Type | Default |
---|---|---|
className | string | - |
asChild | boolean | - |
DropdownMenu.Separator
Visual divider between menu items or groups. Built on top of Ariakit MenuSeparator
Prop | Type | Default |
---|---|---|
className | string | - |
asChild | boolean | - |
DropdownMenu.EmptyState
Placeholder content when there are no menu items to display.
Prop | Type | Default |
---|---|---|
children | ReactNode | - |
className | string | - |
Examples
Basic Usage
A simple dropdown menu with basic functionality.
With Icons
You can add icons to the dropdown items. Supports both leading and trailing icons.
With Groups and Labels
Organize related menu items into sections with descriptive headers.
Autocomplete
To enable autocomplete, pass the autocomplete
prop to the Dropdown root element. Each menu instance will manage its own autocomplete behavior.
By default, only the top-level menu items are filtered. For more advanced control, set autocompleteMode="manual"
and implement your own custom filtering logic.
Linear inspired Dropdown
This is a Linear-inspired dropdown component that supports custom filtering and displays nested options. Users can search through all nested items using a single input field.
To closely replicate Linear-style filtering, the filtering logic should include result ranking. Using a utility like match-sorter can help achieve this by sorting filtered results based on relevance.