Sidebar
App navigation sidebar with grouped sections, mobile drawer, and collapse.
The app navigation sidebar: a logo, grouped nav sections with active-state matching, a mobile drawer, desktop collapse, and a bottom footer slot. Routing flows through the injected Link adapter, or you can own navigation with onNavigate. Each nav item is plain data (label + href); an optional icon component can be added per item in app code.
The sidebar uses position: fixed, so previews place it inside a framed stage with a transform (which makes fixed descendants resolve against the frame instead of the viewport).
Import
1import { Sidebar } from "@yuhuanowo/yunui/patterns";Basic
Sidebar
Collapsible
Pass collapsed plus onToggleCollapse to render the desktop collapse button and slide the sidebar off-canvas. Because that needs React state and a function prop, this example renders from a client wrapper.
Collapse
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| appName* | string | — | Brand name shown next to the logo. |
| ariaLabel | string | Main navigation | Accessible name for the Sidebar landmark. |
| children | ReactNode | — | Replaces generated sections with custom dynamic Sidebar content. |
| className | string | — | Additional shell classes. |
| closeLabel | string | Close | Accessible label for the close/collapse buttons. |
| collapsed | boolean | false | Desktop collapse state (hides the sidebar off-canvas). |
| currentPath | string | — | Used to compute the active item. |
| footer | ReactNode | — | Bottom-pinned slot (balance card, user card, etc.). |
| header | ReactNode | — | Replaces the built-in logo row while retaining the Sidebar shell. |
| homeHref | string | / | Where the logo links to. |
| isOpen | boolean | false | Mobile drawer open state. |
| layout | "fixed" | "inline" | fixed | Fixed application rail or an in-flow shell owned by the host layout. |
| loading | boolean | false | While true, the nav (and footer slot) render shimmer skeletons. |
| logoSrc | string | /favicon.ico | Logo image src. |
| onClose | (() => void) | — | Called to close the mobile drawer. |
| onNavigate | ((href: string) => void) | — | Called when a nav item is clicked. When provided, default link navigation is prevented and the host owns routing (useful in SPAs / demos). When omitted, items navigate via the injected Link adapter. |
| onToggleCollapse | (() => void) | — | Called to toggle the desktop collapse state (also renders the collapse button when set). |
| role | "navigation" | "complementary" | navigation | Landmark role for custom application layouts. |
| scrollStorageKey | string | yunui-sidebar-scroll | sessionStorage key for persisting nav scroll position across navigations. |
| sections* | SidebarSection[] | — | Grouped navigation sections. |