Dropdown

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

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

Usage

import { Dropdown } from 'rsuite';

Examples

Default

Trigger

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

  • click (default)
  • hover
  • contextMenu

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

Option Active State

Disabled State

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

With Button

The default value of the toggleComponentClass property ofDropdown is Button. You can set the button-related props (eg. size, appearance) and display it in the style of a button.

No caret variation

Divider and Panel

  • divider Sets the divider options.
  • panel Set up a panel.

Placement

Custom

Used with Buttons

Used with Popover

Used with next/link

Props

<Dropdown>

Property Type(default) Description
activeKey any The option to activate the state, corresponding to the eventkey in the Dropdown.item.
classPrefix string ('dropdown') The prefix of the component CSS class
disabled boolean Whether or not component is disabled
icon React.Element<typeof Icon> Set the icon
menuStyle React.CSSProperties The style of the menu.
onClose () => void The callback function that the menu closes
onOpen () => void Menu Pop-up callback function
onSelect (eventKey: any, event: SyntheticEvent<any>) => void Selected callback function
onToggle (open?: boolean) => void Callback function for menu state switching.
open boolean Controlled open state
placement enum: Placement8 ('bottomStart') The placement of Menu
renderTitle (children?: React.Node) => React.Node Custom title
title React.Node Menu defaults to display content.
toggleClassName string A css class to apply to the Toggle DOM node
toggleComponentClass React.ElementType (Button) You can use a custom element for this component
trigger union: Trigger ('click') Triggering events

<Dropdown.Item>

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

<Dropdown.Menu>

Property Type(default) Description
icon React.Element<typeof Icon> Set the icon
pullLeft boolean The submenu expands from the left and defaults to the right
title string Define the title as a submenu