Sidebar

Organize brand entry, grouped navigation, and footer actions with collapse and independent scrolling.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Sidebar for grouped navigation on the left side of an application, composed from SidebarSection and SidebarItem. The page owns routing and content. Public logo and footer roles can replace built-in content. Do not use Sidebar for an ordinary right-side information column.

sections supplies navigation data. children renders alongside sections rather than replacing it.
A direct child with as="logo" replaces the logo; as="footer" goes to the fixed bottom area. Width and collapse state can be bound, and persistence is enabled by default.
Default navigation and scroll-region names and built-in collapse controls, including the floating expand button in text mode, follow LocaleProvider. An explicit ariaLabel takes priority over Provider messages.

Import

import { Sidebar } from '@snowui-design-system/components';

Usage

Without icons

Collapsed

Resizable

Continuous hover

API Reference

Property	Type	Default	Example	Description
`sections`	`SidebarSectionData[]`	`[]`	`sections={sections}`	Array of navigation groups. Each needs a unique id and may set title, collapsible, defaultCollapsed, actions, items, and content. content takes precedence over items. Items use SidebarItemData fields such as id, label, icon, and href.
`navigationVariant`	`"icon" \| "text"`	`"icon"`	`navigationVariant="icon"`	Navigation structure variant. text has no icons; when collapsed, the root width and padding become zero, leaving only an expand button at the upper left of the visible page. It does not infer icons by scanning content.
`collapsed`	`boolean`	`—`	`collapsed`	Controlled collapsed state; supports bind:collapsed. When omitted, internal state starts from defaultCollapsed.
`defaultCollapsed`	`boolean`	`false`	`defaultCollapsed`	Initial collapsed state when uncontrolled.
`width`	`number`	`220`	`width={42}`	Expanded width; supports bind:width and updates live while the right edge is dragged.
`minWidth`	`number`	`160`	`minWidth={42}`	Lower bound for the draggable expanded width.
`maxWidth`	`number`	`480`	`maxWidth={42}`	Upper bound for the draggable expanded width.
`resizable`	`boolean`	`true`	`resizable`	Enable the hit area on the right edge for resizing.
`activeItemId`	`string`	`—`	`activeItemId="Example"`	Externally controlled selected item id. When omitted, uses internal selection or a restored persistent value. Controls selection only; the host owns routing.
`persistence`	`boolean`	`true`	`persistence`	Remember the active item and each Section’s collapsed state.
`persistenceKey`	`string`	`"default"`	`persistenceKey="Example"`	Namespace for this instance in localStorage. Set distinct values when a page contains multiple Sidebars.
`ariaLabel`	`string`	`—`	`ariaLabel="Example"`	Accessible name for navigation and its scroll region. When omitted, follows LocaleProvider; an explicit value takes priority. Distinguish multiple instances with different names.
`continuousHover`	`boolean`	`true`	`continuousHover`	Move a shared hover background between available navigation items. When disabled, each item handles its own hover; selection is unaffected.
`onCollapsedChange`	`(collapsed: boolean) => void`	`—`	`onCollapsedChange={(value) => { /* handle value */ }}`	Called after the user toggles collapse with the built-in button. Receives the new state and cannot cancel the toggle.
`onWidthChange`	`(width: number) => void`	`—`	`onWidthChange={(value) => { /* handle value */ }}`	Called during user resizing. Receives an integer pixel width clamped to minWidth and maxWidth.
`onActiveItemChange`	`(itemId: string) => void`	`—`	`onActiveItemChange={(value) => { /* handle value */ }}`	Called when navigation selects an item or restores a valid persisted selection. Receives the selected id; the host handles content and routing.
`children`	`Snippet`	`—`	`<Sidebar>Content</Sidebar>`	Explicit content without parameters, rendered alongside sections. A direct as="logo" child replaces the Header Logo, as="footer" enters the fixed Footer, and other content enters navigation.
`parts`	`ComponentPartsOf<{ Indicator: typeof Indicator; SnowUILogo: typeof SnowUILogo; SidebarSection: typeof SidebarSection; SidebarItem: typeof SidebarItem; }>`	`—`	`parts={partsOptions}`	Configure the resizing Indicator and generated SnowUILogo, SidebarSection, and SidebarItem. Indicator retains its default state visuals.