# @commercetools-uikit/dropdown-menu > The Dropdown Menu component represents a component that triggers the rendering of a floating menu. Latest version **20.6.7** (published 2026-07-17) · MIT license · 0 weekly downloads ## Install ```sh npm install @commercetools-uikit/dropdown-menu pnpm add @commercetools-uikit/dropdown-menu yarn add @commercetools-uikit/dropdown-menu bun add @commercetools-uikit/dropdown-menu ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 20.6.7 | | Published | 2026-07-17 | | First published | 2024-04-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 13 | | Unpacked size | 116.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 154 | | Maintainers | emmenko, commercetools-admin, tdeekens | | Keywords | javascript, typescript, design-system, react, uikit | ## Links - npm: https://www.npmjs.com/package/@commercetools-uikit/dropdown-menu - Repository: https://github.com/commercetools/ui-kit - Homepage: https://uikit.commercetools.com - Issues: https://github.com/commercetools/ui-kit/issues - npm.io page: https://npm.io/package/@commercetools-uikit/dropdown-menu ## Dependencies (13) - [react-intl](https://npm.io/package/react-intl.md) ^7.1.4 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.20.13 - [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.10.5 - [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.10.5 - [@babel/runtime-corejs3](https://npm.io/package/@babel/runtime-corejs3.md) ^7.20.13 - [@commercetools-uikit/hooks](https://npm.io/package/@commercetools-uikit/hooks.md) ^20.6.7 - [@commercetools-uikit/utils](https://npm.io/package/@commercetools-uikit/utils.md) ^20.6.7 - [@commercetools-uikit/constraints](https://npm.io/package/@commercetools-uikit/constraints.md) ^20.6.7 - [@commercetools-uikit/design-system](https://npm.io/package/@commercetools-uikit/design-system.md) ^20.6.7 - [@commercetools-uikit/spacings-stack](https://npm.io/package/@commercetools-uikit/spacings-stack.md) ^20.6.7 - [@commercetools-uikit/spacings-inline](https://npm.io/package/@commercetools-uikit/spacings-inline.md) ^20.6.7 - [@commercetools-uikit/secondary-button](https://npm.io/package/@commercetools-uikit/secondary-button.md) ^20.6.7 - [@commercetools-uikit/accessible-button](https://npm.io/package/@commercetools-uikit/accessible-button.md) ^20.6.7 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 20.6.7 (latest) — 2026-07-17 - 0.0.0-canary-20260831181816 (canary) — 2026-08-31 - 0.0.0-FEC-938-ui-kit-post-pnpm-tooling-polish-catalogs-bundlewatch-bundlesize-20260518121756 (FEC-938-ui-kit-post-pnpm-tooling-polish-catalogs-bundlewatch-bundlesize) — 2026-05-18 - 0.0.0-migration-pnpm-20260513114959 (migration-pnpm) — 2026-05-13 - 0.0.0-CRAFT-2040-rich-text-input-destroys-hyperlink-tag-20260219190637 (CRAFT-2040-rich-text-input-destroys-hyperlink-tag) — 2026-02-19 - 0.0.0-fec-155-react-19-20250528075244 (fec-155-react-19) — 2025-05-28 - 0.0.0-FCT-1500-adjust-legacy-css-reset-20250527090339 (FCT-1500-adjust-legacy-css-reset) — 2025-05-27 - 0.0.0-SUPPORT-32352-de-ch-money-input-20250509174254 (SUPPORT-32352-de-ch-money-input) — 2025-05-09 - 0.0.0-main-20250115172531 (main) — 2025-01-15 - 0.0.0-preview-fec-155-react-19-20250113184401 (preview-fec-155-react-19) — 2025-01-13 - 0.0.0-preview-test-icon-entrypoints-20241212201418 (preview-test-icon-entrypoints) — 2024-12-12 - 0.0.0-preview-test-icon-pure-annotations-20241211181046 (preview-test-icon-pure-annotations) — 2024-12-11 - 0.0.0-preview-test-icon-bundle-20241210182318 (preview-test-icon-bundle) — 2024-12-10 - 0.0.0-preview-test-canary-preview-20241204111237 (preview-test-canary-preview) — 2024-12-04 - 0.0.0-preview-FCT-1187-20241024123200 (preview) — 2024-10-24 - … 309 more at https://npm.io/package/@commercetools-uikit/dropdown-menu/versions ## README # DropdownMenu ## Description This component should be used whenever you need to display a floating panel after clicking on an element. It allows to use any component as the element used to trigger the floating panel. The panel can be customized to render whatever is needed. However, as a common use case would be to render a list of elements and select one of them, this component provides some helpers to easily implement such use case. Something to bear in mind is that, when the panel is open, the document scroll is blocked. ## Installation ``` pnpm add @commercetools-uikit/dropdown-menu ``` ``` npm --save install @commercetools-uikit/dropdown-menu ``` Additionally install the peer dependencies (if not present) ``` pnpm add react ``` ``` npm --save install react ``` ## Usage ```jsx import CheckboxInput from '@commercetools-uikit/checkbox-input'; import DropdownMenu from '@commercetools-uikit/dropdown-menu'; import IconButton from '@commercetools-uikit/icon-button'; import SecondaryButton from '@commercetools-uikit/secondary-button'; import SpacingsStack from '@commercetools-uikit/spacings-stack'; import Text from '@commercetools-uikit/text'; import { ColumnsIcon, FilterIcon } from '@commercetools-uikit/icons'; export const ListDropdownExample = () => { return ( } label="list" />} menuHorizontalConstraint={6} menuPosition="left" menuType="list" > {}}> Option 1 {}} isDisabled> Option 2 {}}> Option 3 ); }; export const CustomDropdownExample = () => { return ( } /> } menuHorizontalConstraint={6} menuPosition="right" > Store {}}> Canada (FR) ); }; ``` ## Properties | Props | Type | Required | Default | Description | | -------------------------- | ----------------------------------------------------- | :------: | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `menuPosition` | `union`
Possible values:
`'left' , 'right'` | | `'left'` | The position of the menu relative to the trigger element. | | `menuMaxHeight` | `number` | | | The maximum height for the menu in pixels. By default, the max height will be the available space between the trigger element and the bottom of the viewport. | | `triggerElement` | `ReactElement` | ✅ | | The element that triggers the dropdown. | | `menuType` | `union`
Possible values:
`'default' , 'list'` | | `'default'` | The type of the menu. The 'default' type just renders a dropdown container but the 'list' type is intended to be used with the DropdownMenu.ListMenuItem component. | | `menuHorizontalConstraint` | `TMaxProp` | | `'auto'` | The horizontal constraint of the menu. | | `children` | `ReactNode` | ✅ | | The content of the dropdown. | # Additional info ## ListMenuItem When using the list floating panel, the `DropdownMenu` component exposes an inner sub-component called `DropdownMenu.ListMenuItem` that should be used to render each item in the list. Clicking on an item will close the panel and call the `onClick` callback with the item's value. ### Properties | Props | Type | Required | Default | Description | | ------------ | ------------ | :------: | ------- | ------------------------------------------------- | | `isDisabled` | `boolean` | | `false` | Whether the item should be disabled. | | `onClick` | `() => void` | | | A callback to be called when the item is clicked. | | `children` | `string` | ✅ | | The label for the item. | --- _Source: https://npm.io/package/@commercetools-uikit/dropdown-menu · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._