01
Overview
Collapsible group header that organises related items within a side navigation.
Usage
SideNavigationGroup is a compose-only leaf of SideNavigation.
The idiomatic API is SideNavigation.Group, reached through the parent
namespace — see the side-navigation README for the composed
snippet. The flat @lostgradient/cinder/side-navigation-group subpath remains exported for
à-la-carte builds that import the leaf directly.
02
When to use
Use when
- Splitting a long side-navigation column into clearly named sections.
- Letting users collapse rarely used groups to reduce visual noise in the sidebar.
Avoid when
- Used outside a side-navigation ancestor — it expects that landmark for context.
- Hosting a single flat list with no grouping — place side-navigation-item entries directly.
03
Props
| Name | Type | Default | Required | Bindable | Description |
|---|---|---|---|---|---|
label | text | req | Visible section header label. | ||
id | text | Optional stable id for the root <li>. Trigger uses ${id}-trigger, panel uses ${id}-panel. If omitted, generated via useId. | |||
expanded | boolean | true | bind | Whether the group is expanded. Bindable. Default: true. | |
disabled | boolean | false | When true, the disclosure button is disabled. Default: false. | ||
icon | snippet | Optional leading icon rendered inside the header button before the label. | |||
badge | snippet | Optional trailing badge rendered inside the header button after the label, before the chevron. | |||
children | snippet | req | Must be <li>-wrapped NavigationItems (or SideNavigationItems) rendered inside the disclosed <ul>. |