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 | Description |
|---|---|---|---|
label required | text | 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 bindable | boolean | true | 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 required | snippet | Must be <li>-wrapped NavigationItems (or SideNavigationItems) rendered inside the disclosed <ul>. |