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 next/link #

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