Sidenav
An encapsulation of the Nav for the sidebar of the page.
<Sidenav>Side navigation component.<Sidenav.Header>Navigates the header content.<Sidenav.Body>Navigation body content.
Import
import { Sidenav, Nav, Dropdown } from 'rsuite';
// or
import Sidenav from 'rsuite/Sidenav';
import Nav from 'rsuite/Nav';
import Dropdown from 'rsuite/Dropdown';Examples
Default
Appearance
appearance value include:default,inverse,subtle
In high-contrast theme, all appearances looks the same as
default.
Collapsed Menu
Custom Side Navigation
- Set the
panelproperty to customize a panel area. - Set the
dividerproperty and set a split line.
Props
<Sidenav>
| Property | Type (Default) |
Description |
|---|---|---|
| appearance | enum: 'default', 'inverse', 'subtle' ('default') |
Menu style |
| as | ElementType ('div') |
You can use a custom element type for this component |
| classPrefix | string ('sidenav') |
The prefix of the component CSS class |
| defaultOpenKeys | string[] | Open menu, corresponding to Dropdown eventkey |
| expanded | boolean (true) |
Whether to expand the Sidenav |
| onOpenChange | (openKeys: string[], event) => void | Menu opening callback function that changed |
| openKeys | string[] | Open menu, corresponding to Dropdown eventkey (controlled) |