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)hovercontextMenu
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
Dropdown with Icon
Divider and Panel
dividerSets the divider options.panelSet up a panel.
Placement
Submenu
Custom
Used with Buttons
Menu items
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 |