AppSidebarNav
Sidebar navigation for AppShell: a pinned brand, a scrollable list of grouped links with active states and aria-current, and a pinned footer (account / sign-out). Presentational and theme-driven.
Acme
Ada LovelaceSign out
Installation
pnpm
pnpm dlx @hex-core/cli add app-sidebar-navAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
groupsrequired | object | — | ReadonlyArray<{ title?: ReactNode; items: { label; href; icon?; active? }[] }>. Navigation groups rendered top to bottom. Set active on the current page's item. |
brand | ReactNode | — | Brand block (logo + product name) pinned to the top. |
footer | ReactNode | — | Footer block pinned to the bottom (account menu / sign-out). |
className | string | — | Additional classes applied to the root <div>. |
AI Guidance
When to use
Use inside the AppShell sidebar slot as the primary app navigation. Group links by area; mark exactly one item active per page.
When not to use
Don't use as marketing site nav (use marketing-header). Don't nest sub-menus deeply — keep two levels (group + item) max.
Common mistakes
- Marking multiple items active — only the current page should have active=true (it sets aria-current='page').
- Passing an <img> as an item icon — the icon slot is sized for a glyph (size-4); use an SVG.
- Putting more than ~3 groups with long lists without scannable titles — title each group.
Accessibility
Links are real anchors; the active link carries aria-current='page'. Icons are aria-hidden since the adjacent label conveys meaning. The nav region scrolls independently so the brand and footer stay visible.
Related components
Token budget: 600
Verified against @hex-core/components@1.12.0