HySidebarGroup

Usage examples on this page are written for Lit / plain HTML (<hy-sidebar-group>). The same component ships as HySidebarGroup in @whitespaceux/harmony-react (native React 19), with typed wrappers for Angular, Solid, Svelte, and Vue. The API reference below applies to all frameworks.

A titled section inside hy-sidebar. Gives nav items a labeled boundary (role="group" + aria-labelledby) without any visual chrome beyond a caption.

With collapsible, the caption becomes a button that toggles a local expanded/collapsed state for the group. Independent from the parent sidebar's collapsed state — when the parent is collapsed, the caption hides visually, but the accessible name remains.

Examples

Titled section inside a sidebar

<hy-sidebar-group label="Workspace">
  <hy-sidebar-item value="dashboard" href="/dashboard" active>Dashboard</hy-sidebar-item>
  <hy-sidebar-item value="projects" href="/projects">Projects</hy-sidebar-item>
</hy-sidebar-group>

Collapsible group

<hy-sidebar-group label="Advanced" collapsible>
<hy-sidebar-item value="tokens" href="/tokens">Tokens</hy-sidebar-item>
<hy-sidebar-item value="audit" href="/audit">Audit</hy-sidebar-item>
</hy-sidebar-group>
<script>
document.querySelector('hy-sidebar-group').addEventListener('toggle', (e) => {
console.log(e.detail.expanded);
});
</script>

API

Properties

Property	Attribute	Type	Default	Description
label	label	string	''	Caption text displayed above the items.
collapsible	collapsible	boolean	false	Whether the caption toggles expand/collapse for this group.
expanded	expanded	boolean	true	Expanded state. Only meaningful when collapsible.

Events

Event	Detail	Description
toggle	—	Only when collapsible. Detail: { expanded: boolean }

Slots

Slot	Description
default	Items to group.

CSS Parts

Part	Description
base	The <section> wrapper.
caption	The caption element (heading or button).
items	The items region.

CSS Custom Properties

Property	Description
--hy-sidebar-group-caption-padding-block	Caption block padding
--hy-sidebar-group-caption-padding-inline	Caption inline padding
--hy-sidebar-group-caption-color	Caption text color
--hy-sidebar-group-caption-font-family	Caption font family
--hy-sidebar-group-caption-font-size	Caption font size (default: --hy-label-sm-font-size)
--hy-sidebar-group-caption-font-weight	Caption font weight (default: --hy-label-sm-font-weight)
--hy-sidebar-group-caption-line-height	Caption line height
--hy-sidebar-group-caption-letter-spacing	Caption letter spacing
--hy-sidebar-group-caption-text-transform	Caption text-transform (default: uppercase)
--hy-sidebar-group-gap	Gap between caption and items
--hy-sidebar-group-expand-duration	Transition duration for the group expand and collapse animation
--hy-sidebar-group-expand-easing	Transition easing for the group expand and collapse animation