SidebarSection

Group Sidebar items under a heading with expand, collapse, and optional actions.

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 SidebarSection for a titled navigation group inside Sidebar. Do not add a second Separator when the group already provides one. Use SidebarItem for its entries.

id identifies the group, title names it, and children contains navigation items.
collapsible and collapsed control closing the group, while defaultCollapsed is its initial state. actions supplies group-level operations.
Built-in expand/collapse accessible names follow LocaleProvider. The caller owns title and action.label; the component preserves their text.

Import

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

Usage

Controlled

Default collapsed

Always expanded

Actions

API Reference

Property	Type	Default	Example	Description
`id`	`string`	`required`	`id="example"`	Stable section identity.
`title`	`string`	`—`	`title="Example"`	Generated section heading; no heading row is rendered when omitted.
`collapsible`	`boolean`	`—`	`collapsible`	Whether to provide a built-in expand/collapse Button. Defaults to true when a title exists.
`collapsed`	`boolean`	`—`	`collapsed`	Control the section’s collapsed state when a boolean is supplied. When omitted, internal section state and persisted Sidebar state manage it.
`defaultCollapsed`	`boolean`	`false`	`defaultCollapsed`	Initial uncontrolled collapsed state.
`onCollapsedChange`	`(collapsed: boolean) => void`	`—`	`onCollapsedChange={(value) => { /* handle value */ }}`	Callback when section collapse state changes.
`actions`	`SidebarActionData[] \| Snippet`	`[]`	`actions={actionsContent}`	Zero or more heading actions. An array generates bare Buttons.
`children`	`Snippet`	`—`	`<SidebarSection>Content</SidebarSection>`	Section content.
`parts`	`ComponentPartsOf<{ Button: typeof Button; Separator: typeof Separator; }>`	`—`	`parts={partsOptions}`	Configure data-generated Buttons and the built-in Separator.