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
Used with Link in next/link
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. |