A menu component that provides a list of options with support for icons, descriptions and keyboard shortcuts.
Import
# import { Menu } from 'rsuite' ;
Menu The container component that manages menu state.Menu.Item Menu option component supporting icons and descriptions.Menu.Separator A divider line to group menu items.
Examples
#
Basic
#
Routing Library
# The Menu.Item component can be used with other routing libraries (such as Next.js, React Router) through the as prop. See the Composition Guide for details.
Props
#
Property
Type(default)
Description
activeKey
string | number
Set the active key for the menu
as
ElementType ('ul')
You can use a custom element type for this component
classPrefix
string('menu')
The prefix of the component CSS class
onSelect
(eventKey: string | number | undefined, event) => void
Callback function triggered when an item is selected
Property
Type(default)
Description
active
boolean
Active the current option
as
ElementType ('li')
You can use a custom element type for this component
classPrefix
string ('menu-item')
The prefix of the component CSS class
description
ReactNode
The description of the current option
disabled
boolean
Disable the current option
eventKey
string | number
The value of the current option
icon
ReactElement
Set the icon
onSelect
(eventKey: string | number, event) => void
Select the callback function for the current option
shortcut
string
The menu item keyboard shortcut
Property
Type(default)
Description
as
ElementType ('li')
You can use a custom element type for this component
classPrefix
string('menu-item-divider')
The prefix of the component CSS class