SidebarNav

Sectioned native navigation with nested disclosure groups and app-supplied active pathname.@gemologic/sheen-patterns · application

Playground

This example has no scalar controls. Its validated source remains interactive below.

<SidebarNav pathname="/orders" sections={[{ id: "workspace", label: "Workspace", items: [{ kind: "link", id: "orders", label: "Orders", href: "/orders", match: "prefix" }] }]} />

Variant matrix

Workspace routes

Anatomy

Package

@gemologic/sheen-patterns

Source

packages/patterns/src/SidebarNav.tsx

Tokens

--sheen-space-block-sm
--sheen-space-inline-sm

Accessibility

Role: navigation, heading, link, buttonKeyboard: Tab, Shift+Tab, Enter, Space

Do

Pass the accepted router location rather than a pending destination.
Use native links for destinations, disclosure groups for nesting, and named sibling menus for row actions.

Do not

Do not use menu roles for application navigation.
Do not place interactive controls inside icon or badge slots.

Generated props

Name	Type	Default	Description
`sections` *	`readonly SidebarNavSection[]`	—	Named sections containing link/group entries with globally unique nonempty IDs. Links may supply a named action menu rendered beside the destination. Same-ID, same-kind entries retain mounted state across object replacement/reordering within their parent; moving between parents or changing kind creates a new owner.
`pathname` *	`string`	—	Accepted router pathname. Exact matching is default; prefix matching respects path segments. Longest matching destination wins; ties use declaration order. External destinations are never automatically current.
`headingLevel`	`2 \| 3 \| 4 \| 5 \| 6`	—	Section heading level, default 3, independent of compact visual size.
`collapsed`	`boolean`	—	App-controlled icon rail. All nested destinations remain reachable; disclosure state returns when expanded. Labels remain accessible with tooltips. Supply icons; missing icons use the first label code point. Requires ThemeProvider in both modes.
`header`	`JSX.Element`	—	Semantic sidebar-header chrome, resolved once and retained across desktop and phone presentations.
`footer`	`JSX.Element`	—	Semantic sidebar-footer chrome, resolved once and retained across desktop and phone presentations.

Native Solid/HTML attributes remain available and are omitted from this authored-prop view.