Sidebar
Overview
When to use
- Provide navigation options within an application layout.
- Group related functionalities or user actions in a vertical list.
- Offer quick access to different sections or features, often used alongside a main content area.
When to consider an alternative
t.b.d.
Component
Default
Displays a vertical sidebar with optional navigation items.
Use the Sidebar.Item component to define individual items within the sidebar.
The Sidebar has two navigation sections: product-navigation and user-navigation. The product-navigation section is used for the main navigation items, while the user-navigation section is used for user-related navigation items. Pass the usernav prop to the Sidebar.Item component to place it in the user-navigation section.
Menu in Sidebar.Item
Properties
Default
| Property | Type | Required | Default |
|---|---|---|---|
| utilClassNames | String | false | - |
| children | Node | false | - |
| sidebarRef | Shape {
"current": "Any"
} | false | - |
| open | Bool | false | true |
| setOpen | Func | false | - |
Sidebar.Item
| Property | Type | Required | Default |
|---|---|---|---|
| sidebarItemRef | Shape {
"current": "Any"
} | false | - |
| icon | Node | false | - |
| label | String | false | - |
| onClick | Func | false | - |
| open | Bool | false | - |
| usernav | Bool | false | - |