Provides a list of various forms of navigation menus, which can be landscape and portrait layout.


import { Nav } from 'rsuite';




appearance property sets the appearance of the navigation:

  • default - default navigation.
  • tabs - Tabbed navigation.
  • subtle - Subtle navigation.



Disabled Item


Multi-level navigation

With Icon




Property Type (Default) Description
activeKey string Active key, corresponding to eventkey in <Nav.item>.
appearance 'default' | 'tabs' | 'subtle' ('default') A navigation can have different appearances
children * ChildrenArray<NavItem or Dropdown> The contents of the component.
classPrefix string ('nav') The prefix of the component CSS class
justified boolean Justified navigation
onSelect (eventKey: string, event) => void Callback function triggered after selection
pullRight boolean appears on the right.
vertical boolean Stacked navigation


Property Type (Default) Description
active boolean Activation status
as ElementType ('a') You can use a custom element type for this component.
children * ReactNode The contents of the component
disabled boolean Disabled status
eventKey string The value of the current option
href string Link
icon Element<typeof Icon> Sets the icon for the component
onSelect (eventKey: string, event) => void Select the callback function that the event triggers.


Property Type (Default) Description
icon ReactElement Icon of the item that opens the menu
noCaret boolean (false) Whether to hide the caret icon
onClose (event: SyntheticEvent) => void Callback when menu closes
onOpen (event: SyntheticEvent) => void Callback when menu opens
onToggle (open: boolean, event: SyntheticEvent) => void Callback when menu opens/closes
openDirection "start"|"end" ("end") Direction that menu opens towards (only available on submenus)
title ReactNode Content of the item that opens the menu
Vercel banner