# @synerise/ds-dropdown
> Dropdown UI Component for the Synerise Design System
Latest version **2.1.3** (published 2026-09-24) · ISC license · 0 weekly downloads
## Install
```sh
npm install @synerise/ds-dropdown
pnpm add @synerise/ds-dropdown
yarn add @synerise/ds-dropdown
bun add @synerise/ds-dropdown
```
## Health
**Score 70/100 (B)** — status: active.
Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 2.1.3 |
| Published | 2026-09-24 |
| First published | 2019-09-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 13 |
| Unpacked size | 162.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | synerise |
## Links
- npm: https://www.npmjs.com/package/@synerise/ds-dropdown
- Repository: synerise/synerise-design
- npm.io page: https://npm.io/package/@synerise/ds-dropdown
## Dependencies (13)
- [classnames](https://npm.io/package/classnames.md) ^2.5.1
- [react-window](https://npm.io/package/react-window.md) ^1.8.11
- [@synerise/ds-icon](https://npm.io/package/@synerise/ds-icon.md) ^2.2.0
- [@floating-ui/react](https://npm.io/package/@floating-ui/react.md) ^0.27.16
- [@synerise/ds-utils](https://npm.io/package/@synerise/ds-utils.md) ^2.2.0
- [@synerise/ds-divider](https://npm.io/package/@synerise/ds-divider.md) ^2.0.6
- [@synerise/ds-popover](https://npm.io/package/@synerise/ds-popover.md) ^2.0.3
- [@synerise/ds-tooltip](https://npm.io/package/@synerise/ds-tooltip.md) ^2.0.6
- [@synerise/ds-list-item](https://npm.io/package/@synerise/ds-list-item.md) ^2.1.3
- [@synerise/ds-scrollbar](https://npm.io/package/@synerise/ds-scrollbar.md) ^2.0.5
- [@synerise/ds-search-bar](https://npm.io/package/@synerise/ds-search-bar.md) ^2.0.7
- [@synerise/ds-typography](https://npm.io/package/@synerise/ds-typography.md) ^2.0.6
- [@synerise/ds-empty-states](https://npm.io/package/@synerise/ds-empty-states.md) ^2.0.5
## Recent versions
- 2.1.3 (latest) — 2026-09-24
- 2.1.2 — 2026-09-22
- 2.1.1 — 2026-09-18
- 2.1.0 — 2026-09-16
- 2.0.3 — 2026-09-08
- 2.0.2 — 2026-09-07
- 2.0.1 — 2026-09-02
- 2.0.0 — 2026-08-26
- 1.4.0 — 2026-08-18
- 1.3.23 — 2026-08-14
- 1.3.22 — 2026-08-11
- 1.3.21 — 2026-07-24
- 1.3.20 — 2026-07-23
- 1.3.19 — 2026-07-16
- 1.3.18 — 2026-07-09
- … 458 more at https://npm.io/package/@synerise/ds-dropdown/versions
## README
---
id: dropdown
title: Dropdown
---
Dropdown UI Component
## Demo
## API
### Dropdown
| Property | Description | Type | Default |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | --------------------- |
| disabled | Whether the dropdown menu is disabled | boolean | - |
| getPopupContainer | Function used to set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. | Function(triggerNode) | `() => document.body` |
| overlay | Dropdown panel content | ReactNode | - |
| overlayClassName | Class name of the dropdown root element | string | - |
| overlayStyle | Style of the dropdown root element | object | - |
| placement | Placement of pop menu. | `bottomLeft` / `bottomCenter` / `bottomRight` / `topLeft` / `topCenter` / `topRight` | - |
| trigger | Trigger mode which executes the drop-down action | `'click'` / `'hover'` / `'focus'` / array of these | `'click'` |
| open | Controlled open state | boolean | - |
| onOpenChange | Callback executed on visibility changes | (isOpen: boolean) => void | - |
| onDismiss | Callback executed when closed by clicking outside | (event?: Event, reason?: OpenChangeReason) => void | - |
| size | Width of the overlay | `'small'`(216px) / `'medium'`(282px) / `'large'`(588px) / `'auto'` / `'match-trigger'` / `'min-match-trigger'` / number(px) | - |
| footer | Footer below overlay content; object `{ left?, right? }` renders split layout | ReactNode / `{ left?: ReactNode; right?: ReactNode }` | - |
| hideOnItemClick | Close on click of an item inside the dropdown. Provide a CSS selector or `true` to use `[role="menuitem"]` | boolean / string | - |
| asChild | Forward trigger props to first child element (Radix-style) | boolean | - |
| popoverProps | Pass-through props to the underlying ds-popover | Partial\ | - |
### Dropdown.SearchInput
| Property | Description | Type | Default |
| -------------- | ----------------------------------- | ----------------------- | ------- |
| onSearchChange | Action triggered after input change | (value: string) => void | - |
| placeholder | Input placeholder | string | - |
| autofocus | Autofocus input | boolean | - |
### Dropdown.BottomAction
| Property | Description | Type | Default |
| ------------- | -------------------------------------- | ------------- | ------- |
| onClickAction | Action triggered on click | () => void | - |
| icon | Icon component to show before the text | React.Element | - |
### Dropdown.BackAction
| Property | Description | Type | Default |
| ------------ | ------------------------------ | ------------------------ | ------- |
| onClick | Action triggered on click | () => void | - |
| label | Label of the button | ReactNode | - |
| tooltip | Tooltip content | ReactNode | - |
| tooltipProps | Props passed to ds-tooltip | Partial\ | - |
## Closing programmatically
`closeAllOverlays()` from `@synerise/ds-core` force-closes every open DS overlay in one call — useful when an app-level event (e.g. the active workspace changed in another tab) invalidates whatever the user is doing. This component closes through its own close path, so its handlers fire and focus is restored.
```ts
import { closeAllOverlays } from '@synerise/ds-core';
await closeAllOverlays();
await closeAllOverlays({ kinds: ['modal', 'drawer'] }); // leave tooltips alone
```
---
_Source: https://npm.io/package/@synerise/ds-dropdown · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._