Nav

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

Contains the following components:

  • <Nav>
  • <Nav.Item>

Usage

import { Nav, Dropdown } from 'rsuite';

Examples

Default

Appearance

appearance values include:

  • 'default'
  • 'tabs'
  • 'subtle'

For subtle and tabs navigation, you can set a reversed property to reverse direction and fit all directions.

Vertical

Option Status

  • active
  • disabled

Justified

Multi-level navigation

Use the <Dropdown> component directly when using multi-level navigation.

With Icon

Used with Link in react-router

Extensions: Responsive

Extensions: Removable

Props

<Nav>

Property Type (Default) Description
activeKey any Active key, corresponding to eventkey in <Nav.item>.
appearance enum: 'default', 'tabs', 'subtle' ('default') A navigation can have different appearances
children * React.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: any, event: SyntheticEvent<any>) => void, Callback function triggered after selection
pills boolean Pills navigation
pullRight boolean appears on the right.
stacked boolean Stacked navigation

<Nav.Item>

Property Type (Default) Description
active boolean Activation status
children * React.Node The contents of the component
componentClass React.ElementType ('a') You can use a custom element type for this component
disabled boolean Disabled status
href string Link
icon React.Element<typeof Icon> Sets the icon for the component
onSelect (eventKey: any, event: SyntheticEvent<any>) => void, Select the callback function that the event triggers.
renderItem (item:React.Node) => React.Node Custom rendering item