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.

Import 

import { Dropdown } from 'rsuite';

// or
import Dropdown from 'rsuite/Dropdown';

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>

Option Active State

Disabled State

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

Extends button props

The default value of the toggleAs 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

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

Placement

Submenu

Menu items

Custom Toggle

Used with Popover

Used with Buttons

Used with next/link

Used with Link in React Router

Props

<Dropdown>

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

<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

<Dropdown.Menu>

Property Type(default) Description
icon Element<typeof Icon> Set the icon
title string Define the title as a submenu

ts:Placement 

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

ts:Trigger 

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