> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Dropdown
> Action menus, searchable pickers, and form panels with shared presentation and interaction.
export const StoryEmbed = ({storyId, title, height = 240}) => <>
Open in Storybook
;
`Dropdown` combines a positioned popup, visual rows, keyboard navigation, focus, and dismissal. Your application owns data, filtering, fetching, pagination, and selected values. Import it from `twenty-ui/components`.
## Choose an interaction type
Set `type` on `Dropdown.Root` to match the popup's contents.
| Type | Content | Interaction |
| -------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------- |
| `menu` | Commands and navigation links | Menu semantics with arrow navigation and typeahead. |
| `picker` | Search, selectable values, and optional commands | A dialog containing a search field and selectable toggle buttons. Arrow keys navigate result rows. |
| `panel` | Inputs, forms, and supporting actions | A dialog with native input behavior and Tab navigation. |
Pickers allow creation actions and selectable values in the same list, in any order. Options expose their selected state with `aria-pressed`; commands keep their button semantics. Use a descriptive accessible name on `Content` and `Search`.
The underlying [Menu](/ui/primitives/surfaces/menu), [Select](/ui/primitives/input/select), and [Popover](/ui/primitives/surfaces/popover) remain available for direct composition.
## Anatomy
```text theme={null}
Dropdown.Root
├── Dropdown.Trigger
└── Dropdown.Content
├── Dropdown.Search
└── Dropdown.Section
├── Dropdown.ActionItem
└── Dropdown.OptionItem
```
`Content` includes the portal and positioner. Use `width`, `side`, `align`, `sideOffset`, and `alignOffset` to control placement. `Section` groups rows with shared spacing, and `Separator` divides sections. Rows use [ListItem](/ui/primitives/navigation/list-item) for their appearance.
```tsx theme={null}
import { Dropdown } from 'twenty-ui/components';
import { IconCopy } from 'twenty-ui/icon';
import { Button } from 'twenty-ui/primitives/input';
export const RecordActions = ({ onDuplicate }: { onDuplicate: () => void }) => (
Record actions} />
} onClick={onDuplicate}>
Duplicate
);
```
Pass custom trigger elements through `render` so the trigger remains one interactive element. Custom components must forward the supplied props and ref. `ActionItem` also accepts `render` for links.
## Search and selection
`Search` provides the input and navigation into the result rows. Pass `value` and `onValueChange`; compute or fetch matching results in your application. Render `Loading` while a request is pending and `Empty` when no results match. Both accept caller-provided status text.
```tsx theme={null}
import { useState } from 'react';
import { Dropdown } from 'twenty-ui/components';
import { Button } from 'twenty-ui/primitives/input';
export const PersonPicker = () => {
const [search, setSearch] = useState('');
const [selectedPerson, setSelectedPerson] = useState('');
const people = ['Ada Lovelace', 'Grace Hopper'].filter((person) =>
person.toLowerCase().includes(search.toLowerCase()),
);
return (
Choose person} />
{people.map((person) => (
setSelectedPerson(person)}
>
{person}
))}
);
};
```
Actions and single selection close by default. Set `multiple` on the root to keep option selection open. The application still owns the selected values. `closeOnClick` on actions and `closeOnSelect` on options override those defaults, including repeated actions or asynchronous progress. Use `disabled` to prevent activation while retaining the row's appearance.
## Pages and submenus
Use `Page` for navigation that replaces the contents of the same popup. Wrap the first page in `Page id="root"`, or choose another initial page with `defaultPage`. Set `page` on an action to navigate without closing. `Back` returns to the previous page and restores focus to its invoking row. Closing the dropdown resets its page history.
A page can override the root's `type`. For example, an action menu can open a searchable picker page or a form panel. Search receives focus when entering a searchable page.
```tsx theme={null}
import { Dropdown } from 'twenty-ui/components';
import { Button } from 'twenty-ui/primitives/input';
export const FilterMenu = () => (
Filters} />
StatusFiltersActiveArchived
);
```
Use `Submenu` with `SubmenuTrigger` and a nested `Content` for a side-by-side menu. Arrow Right enters the submenu; Arrow Left returns to its parent. Selecting a closing action closes the whole dropdown.
```text theme={null}
Dropdown.Content
└── Dropdown.Submenu
├── Dropdown.SubmenuTrigger
└── Dropdown.Content
└── Dropdown.ActionItem
```
## Panels and controlled state
Use `type="panel"` for form inputs. Input interaction keeps the panel open; a save action can close it. Own `open` and `onOpenChange` when another component or a shortcut needs to open the dropdown. Keep that state with the feature that coordinates the interaction.
Escape dismisses the popup and restores focus to its trigger. Outside interaction also dismisses it, and the click that dismisses it doesn't activate what it lands on. Keys pressed inside the popup stay inside it, except Ctrl or Cmd shortcuts the dropdown doesn't handle, so page-level shortcuts keep working. `Content` accepts focus and portal options from Popover, including an explicit return-focus target for editor workflows.
## Props
### Dropdown.Root
### Dropdown.Trigger
CSS class applied to the element, or a function that
returns a class based on the component's state.
How long to wait before closing the popover that was opened on hover.
Specified in milliseconds.
Requires the `openOnHover` prop.
How long to wait before the popover may be opened on hover. Specified in milliseconds.
Requires the `openOnHover` prop.
A handle to associate the trigger with a popover.
ID of the trigger. In addition to being forwarded to the rendered element,
it is also used to specify the active trigger for the popover in controlled mode (with the PopoverRoot `triggerId` prop).
Whether the component renders a native `