Dropdown

Used to create an easily accessible dropdown menu, providing multiple options for users to choose from

Import

MainIndividual
import { Dropdown } from 'rsuite';
  • 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

Disabled

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

Size

No caret variation

With Shortcut

With Icons

With Description

Separator and Panel

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

Placement

Submenu

Custom Toggle

Used with Buttons

Routing Library

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

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.
noCaret boolean Do not display the arrow icon
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, event?: React.SyntheticEvent) => void Callback function for menu state switching
open boolean Controlled open state
placement Placement The placement of Menu
renderMenuButton (props: ButtonProps, ref: Ref) => ReactElement Custom render menu button
renderMenuPopup (props: MenuProps, ref: Ref) => ReactElement Custom render menu popup
title ReactNode Menu title
trigger Trigger ('click') Triggering events

<Dropdown.Item>

Property Type(default) Description Version
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 Version 5.58.0 or above

<Dropdown.Menu>

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

<Dropdown.Separator>

Property Type(default) Description
as ElementType ('li') You can use a custom element type for this component

Placement 

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

Trigger 

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