Nav

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

Import

import { Nav } from 'rsuite';

Examples

Basic

Appearance

appearance property sets the appearance of the navigation.

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

Reversed

Vertical

Disabled Item

Justified

Multi-level navigation

With Icon

Used with Link in React Router

Props

<Nav>

Property Type (Default) Description
activeKey string Active key, corresponding to eventkey in <Nav.item>.
appearance 'default' | 'tabs' | 'subtle' | 'pills' ('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

<Nav.Item>

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.

<Nav.Menu>

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