# @rc-component/dropdown

> dropdown ui component for react

Latest version **2.0.1** (published 2026-09-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rc-component/dropdown
pnpm add @rc-component/dropdown
yarn add @rc-component/dropdown
bun add @rc-component/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.0.1 |
| Published | 2026-09-17 |
| First published | 2025-02-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 43 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 181 |
| Maintainers | zombiej, afc163, madccc, peachscript, chenshuai2144 |
| Keywords | react, react-dropdown |

## Links

- npm: https://www.npmjs.com/package/@rc-component/dropdown
- Repository: https://github.com/react-component/dropdown
- Homepage: https://react-component.github.io/dropdown
- Issues: https://github.com/react-component/dropdown/issues
- npm.io page: https://npm.io/package/@rc-component/dropdown

## Dependencies (3)

- [clsx](https://npm.io/package/clsx.md) ^2.1.1
- [@rc-component/util](https://npm.io/package/@rc-component/util.md) ^1.11.1
- [@rc-component/trigger](https://npm.io/package/@rc-component/trigger.md) ^3.0.0

## 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

- 2.0.1 (latest) — 2026-09-17
- 2.0.0 — 2026-09-08
- 1.0.3 — 2026-07-10
- 1.0.2 — 2025-11-28
- 1.0.0 — 2025-02-25

## README

<div align="center">
  <h1>@rc-component/dropdown</h1>
  <p><sub><a href="https://ant.design"><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /></a> Part of the Ant Design ecosystem.</sub></p>
  <p>🔽 A trigger-driven dropdown component for React.</p>

  <p>
    <a href="https://npmjs.org/package/@rc-component/dropdown"><img alt="NPM version" src="https://img.shields.io/npm/v/@rc-component/dropdown.svg?style=flat-square"></a>
    <a href="https://npmjs.org/package/@rc-component/dropdown"><img alt="npm downloads" src="https://img.shields.io/npm/dm/@rc-component/dropdown.svg?style=flat-square"></a>
    <a href="https://github.com/react-component/dropdown/actions/workflows/ci.yml"><img alt="build status" src="https://github.com/react-component/dropdown/actions/workflows/ci.yml/badge.svg"></a>
    <a href="https://app.codecov.io/gh/react-component/dropdown"><img alt="Codecov" src="https://img.shields.io/codecov/c/github/react-component/dropdown/master.svg?style=flat-square"></a>
    <a href="https://bundlephobia.com/package/@rc-component/dropdown"><img alt="bundle size" src="https://img.shields.io/bundlephobia/minzip/@rc-component/dropdown?style=flat-square"></a>
    <a href="https://github.com/umijs/dumi"><img alt="dumi" src="https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square"></a>
  </p>
</div>

<p align="center">English | <a href="./README.zh-CN.md">简体中文</a></p>

## Highlights

- Built on `@rc-component/trigger`.
- Supports hover, click, context menu, and custom trigger actions.
- Accepts a React element or render function as dropdown overlay.
- Supports align point behavior and trigger-width matching.

## Install

```bash
npm install @rc-component/dropdown
```

## Usage

```tsx | pure
import Dropdown from '@rc-component/dropdown';
import '@rc-component/dropdown/assets/index.css';

export default function App() {
  return (
    <Dropdown overlay={<div>Dropdown content</div>} trigger={['click']}>
      <button type="button">Open</button>
    </Dropdown>
  );
}
```

## Examples

Run the local dumi site:

```bash
npm install
npm start
```

Then open `http://localhost:8000`.

## API

Additional props are passed to the underlying [`@rc-component/trigger`](https://github.com/react-component/trigger) component.

| Property | Description | Type | Default |
| --- | --- | --- | --- |
| alignPoint | Align popup to the click point | boolean | false |
| animation | Popup animation name | string | - |
| arrow | Whether to show dropdown arrow | boolean | false |
| getPopupContainer | Container where dropdown is rendered | `(node: HTMLElement) => HTMLElement` | `() => document.body` |
| minOverlayWidthMatchTrigger | Whether overlay width should be at least trigger width | boolean | `true` unless `alignPoint` is set |
| openClassName | Class name added to trigger when dropdown is open | string | `${prefixCls}-open` |
| overlay | Dropdown overlay | `React.ReactElement \| (() => React.ReactElement)` | - |
| overlayClassName | Additional overlay class name | string | - |
| overlayStyle | Overlay style | `React.CSSProperties` | - |
| placement | Dropdown placement | string | `bottomLeft` |
| prefixCls | Component class name prefix | string | `rc-dropdown` |
| transitionName | Popup transition class name | string | - |
| trigger | Trigger action | `ActionType \| ActionType[]` | `['hover']` |
| open | Controlled open state | boolean | - |
| onOverlayClick | Callback when overlay is clicked | `(event: Event) => void` | - |
| onOpenChange | Callback when the open state changes | `(open: boolean) => void` | - |

`visible` and `onVisibleChange` have been removed. Use `open` and `onOpenChange` instead. This is a breaking API change; callers must migrate when upgrading.

Clicking the overlay closes an uncontrolled dropdown and calls `onOverlayClick`, without calling `onOpenChange`.

## Development

```bash
npm install
npm start
```

The dumi site runs at `http://localhost:8000` by default.

```bash
npm test
npm run tsc
npm run lint
npm run compile
npm run build
```

## Release

```bash
npm run prepublishOnly
```

The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.

## License

@rc-component/dropdown is released under the [MIT](./LICENSE) license.

---
_Source: https://npm.io/package/@rc-component/dropdown · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._