Sidebar
App navigation in six modes: docked, offcanvas, icon rail, rail with flyouts, double sidebar and overlay drawer.
Six modes
One sidebar, six ways to show it. Pick the mode by how much room the page needs and how deep the navigation goes. Every example below is live: it remembers its state, toggles with ⌘B / Ctrl+B while you are inside it, and keeps links named for screen readers even as icons.
| Mode | Purpose | Benefit | Best for |
|---|---|---|---|
| Docked | Navigation that is always there, next to the page. | Everything one click away; the width is yours to drag and is remembered. | Admin tools and dashboards used all day |
| Offcanvas | The sidebar folds away completely, the page takes the room. | Full width for tables, editors and boards — ⌘B brings it back. | Focus work on wide content |
| Icon rail | Folds to a 48 px strip of icons instead of disappearing. | Every area stays one click away while the page gets most of the space. | Apps with a handful of main areas |
| Rail with flyouts | An icon rail whose areas show their pages in a flyout. | Deep navigation without giving up the page width. | Many pages under few areas |
| Double sidebar | A rail for the areas beside a panel for the pages inside one. | Two levels at a glance; the panel closes, the rail stays. | Large products with distinct sections |
| Overlay drawer | On a phone the navigation slides over the page as a dialog. | No sideways scrolling at 320 px (WCAG 1.4.10) — any mode becomes this on small screens. | Every app below the tablet breakpoint |
Usage
Installation
npm install @wunderui/reactThen import what you need:
import {
Sidebar,
SidebarCta,
SidebarGroup,
SidebarHeading,
SidebarItem,
SidebarItemProps,
SidebarNotification,
SidebarSearch,
SidebarSection,
SidebarSwitchItem,
SidebarUser,
SidebarWorkspace,
} from "@wunderui/react"Examples
Docked
Always visible in the flow of the page. Drag the edge (or focus it and use the arrow keys) to set the width between 208 and 360 px — no transition while dragging, the width is remembered. Areas with pages open as disclosures.
Dashboard
Your workspace at a glance.
Offcanvas
Closes to nothing and gives the page the full width. The toggle sits outside the panel and names what it does; ⌘B / Ctrl+B does the same. The closed sidebar is inert, so Tab never walks through links you cannot see.
Inbox
4 unread messages from your team.
Icon rail
Collapses to a 48 px rail instead of disappearing. The labels fade out before the width changes and come back after it, so nothing is ever squeezed. As icons the links keep their names as visually hidden text; the tooltip only repeats them.
Revenue
Revenue grew 12% against last month.
Rail with flyouts
A permanent rail; areas with pages open a flyout on hover (after 120 ms) or on click. The flyout is a disclosure, not a menu — the pointer can move into it, Escape closes it, and hovering never changes the selection.
Sprints
Sprint 14 runs until Friday.
Double sidebar
The rail picks the area, the panel lists its pages. A rail entry selects and opens in one click; clicking the active entry closes the panel. ⌘B closes and reopens the panel without losing the selection, and the links under the figures open the panel and set the area together.
Traffic
38,200 visits this week.
Overlay drawer
On a phone the sidebar opens over the page as a modal dialog with a scrim: focus moves in and stays until you close it (×, Escape or the scrim) and then returns to the menu button. Opens in duration-deliberate with ease-entrance, closes one step faster.
Dashboard
Your workspace at a glance.
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Sidebar dropdown (compact)
A workspace switcher at the top of a sidebar.
Sidebar dropdown (extended)
A workspace switcher with the plan badge and grouped sections.