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 |