@rc-component/dropdown

_{Part of the Ant Design ecosystem.}

🔽 A trigger-driven dropdown component for React.

English | 简体中文

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

npm install @rc-component/dropdown

Usage

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:

npm install
npm start

Then open http://localhost:8000.

API

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']
visible	Controlled visible state	boolean	-
onOverlayClick	Callback when overlay is clicked	(event: Event) => void	-
onVisibleChange	Callback when visibility changes	(visible: boolean) => void	-

Development

npm install
npm start

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

npm test
npm run tsc
npm run lint
npm run compile
npm run build

Release

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.