Nav

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

Usage

import { Nav } from 'rsuite';

// or
import Nav from 'rsuite/Nav';

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

Responsive

Removable

Props

<Nav>

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

<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
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.Dropdown>