Dropdown #

A drop-down menu is a navigation that uses selectpicker if you want to select a value.

Import #

• <Dropdown> Drop-down menu.
• <Dropdown.Item> Drop-down menu options.
• <Dropdown.Menu> A submenu is created in the Drop-down menu.
• <Dropdown.Separator> A Separator in the Drop-down menu.

Examples #

Basic #

Trigger #

Set the trigger event with the trigger attribute, support the event:

• click (default)
• hover
• contextMenu

Support multiple events: Array<click, hover, contextMenu>

Disabled #

You can disable the entire component or disable individual options by configuring the disabled property.

Size #

No caret variation #

With Shortcut #

With Icons #

Separator and Panel #

• Use <Dropdown.Separator> to set the separator.
• Use the panel prop to set a Dropdown.Item as a panel.

Placement #

Submenu #

Menu #

Custom Toggle #

Used with Popover #

Used with Buttons #

Routing #

The <Dropdown.Item> component works with frameworks and client side routers like Next.js and React Router. See the Routing Guide for setup instructions.

Props #

<Dropdown> #

<Dropdown.Item> #

Property	Type(default)	Description
active	boolean	Active the current option
as	ElementType('li')	You can use a custom element type for this component
children *	ReactNode	The content of the component
classPrefix	string ('dropdown-item')	The prefix of the component CSS class
disabled	boolean	Disable the current option
divider	boolean	Whether to display the divider
eventKey	string	The value of the current option
icon	Element<typeof Icon>	Set the icon
onSelect	(eventKey: string, event) => void	Select the callback function for the current option
panel	boolean	Displays a custom panel
shortcut	string	The dropdown item keyboard shortcut

<Dropdown.Menu> #

<Dropdown.Separator> #

ts:Placement #

type Placement =
  | 'bottomStart'
  | 'bottomEnd'
  | 'topStart'
  | 'topEnd'
  | 'leftStart'
  | 'leftEnd'
  | 'rightStart'
  | 'rightEnd';

ts:Trigger #

type Trigger = 'click' | 'hover' | 'contextMenu' | Array<'click' | 'hover' | 'contextMenu'>;