Folders and files
| Name | Name | Last commit date | ||
|---|---|---|---|---|
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
 |  | |||
Part of the Ant Design ecosystem.
🔽 A trigger-driven dropdown component for React.
English | 简体ä¸æ–‡
- 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.
npm install @rc-component/dropdownimport 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>
);
}Run the local dumi site:
npm install
npm startThen open http://localhost:8000.
Additional props are passed to the underlying @rc-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.
npm install
npm startThe dumi site runs at http://localhost:8000 by default.
npm test
npm run tsc
npm run lint
npm run compile
npm run buildnpm run prepublishOnlyThe release flow is handled by @rc-component/np through the rc-np command after the package build.
@rc-component/dropdown is released under the MIT license.