Hexpunk
InstallConceptsElementsProsehp-cellhp-codehp-copyhp-hexhp-latexhp-visually-hiddenhp-buttonhp-checkboxhp-formhp-labelhp-radiohp-selecthp-sliderhp-togglehp-toggle-grouphp-badgehp-taghp-progresshp-spinnerhp-backgroundhp-clusterhp-collapsiblehp-demohp-gridhp-scroll-areahp-separatorhp-sidebarhp-toolbarhp-avatarhp-iconhp-pixelhp-linkhp-menubarhp-navigation-menuhp-tabshp-alert-dialoghp-context-menuhp-dialoghp-dropdown-menuhp-hover-cardhp-popoverhp-tooltiphp-bannerhp-toasthp-tetherhp-module-handlehp-unfold-listhp-unfold-overlayhp-unfold-pagehp-bondhp-link-nodePaletteAnimationsReleases

hp-sidebar

Navigation sidebar chrome. Compose with <hp-sidebar-item> leaves and <hp-sidebar-group> collapsible sections. Each child element owns its own visual identity inside its shadow root — the sidebar itself only provides the sticky padding, border, scroll, and inherited typography.

Examples API Intent Changelog Home Install Concepts hp-cluster hp-grid hp-dialog hp-tooltip <body> <hp-sidebar aria-label="Site map"> <hp-sidebar-item href="/">Home</hp-sidebar-item> <hp-sidebar-group label="Getting Started" open> <hp-sidebar-item href="/install" active>Install</hp-sidebar-item> <hp-sidebar-item href="/concepts">Concepts</hp-sidebar-item> </hp-sidebar-group> <hp-sidebar-group label="Components"> <hp-sidebar-group label="Layout"> <hp-sidebar-item href="/components/hp-cluster">hp-cluster</hp-sidebar-item> <hp-sidebar-item href="/components/hp-grid">hp-grid</hp-sidebar-item> </hp-sidebar-group> </hp-sidebar-group> </hp-sidebar> </body>

Install

bun add @hexpunk/core lit
import "@hexpunk/core";

Properties

Property Attribute Type Default Description
variant variant HpSidebarVariant "primary" Visual variant. - `"primary"` (default): full chrome with a right border. Intended as the page's main nav rail on the left. - `"secondary"`: lighter chrome, no right border. Intended for a right-rail table-of-contents or similar companion list.

Slots

Slot Description
(default) Nav tree (hp-sidebar-item + hp-sidebar-group children)

When to use

Use as the root sidebar for any doc-style layout: navigation tree on the left, content on the right. Compose the tree with <hp-sidebar-item> and <hp-sidebar-group> children — no ad-hoc <ul> / <details> markup needed. Mark the current page by setting active on the matching hp-sidebar-item, and pre-open the ancestor groups by setting open on each so the active item is visible without a click. Stack multiple hp-sidebar instances side by side. The component carries its own border + padding — adjacent instances read as duplicated chrome.

Nesting and visual hierarchy

Groups directly inside hp-sidebar render with the body-sm summary style (e.g. "Getting Started", "Components"). Groups nested inside another group switch to an uppercase label-sm summary so a long nav tree doesn't read as a wall of equally-weighted branches. The switch is automatic via :host-context() — no variant attribute to set.

Accessibility

hp-sidebar auto-stamps role="navigation" on its host. Set aria-label on the host for a labelled landmark; screen readers announce the sidebar by that label. hp-sidebar-group uses native <details> / <summary> internally, so disclosure semantics + keyboard handling come from the platform.

No per-component entries in CHANGELOG.md yet.

esc
↑ ↓ navigate ↵ open esc close