Nav

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

Import

MainIndividual
import { Nav } from 'rsuite';

Examples

Basic

Appearance

appearance property sets the appearance of the navigation.

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

Reversed

Vertical

Disabled Item

Justified

Multi-level navigation

With Icon

Routing Library

The Nav.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

<Nav>

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
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) => void Callback when menu closes
onOpen (event) => void Callback when menu opens
onToggle (open: boolean, event) => 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

<Nav.MegaMenu>

Version 6.0.0 or above

Property Type (Default) Description
title ReactNode Title or content of the mega menu trigger
children ReactNode | ((props: { onClose: () => void }) => ReactNode) Content of the mega menu, can be a React node or a function that returns a node with onClose
placement Placement ('autoVertical') Placement of the mega menu
... NavItemProps Extends all props from <Nav.Item> component

Placement 

type Placement =
  | 'top'
  | 'bottom'
  | 'right'
  | 'left'
  | 'bottomStart'
  | 'bottomEnd'
  | 'topStart'
  | 'topEnd'
  | 'leftStart'
  | 'leftEnd'
  | 'rightStart'
  | 'rightEnd'
  | 'auto'
  | 'autoVerticalStart'
  | 'autoVerticalEnd'
  | 'autoHorizontalStart'
  | 'autoHorizontalEnd';