<NavigationMenu label="Sidebar">
  <NavigationMenu.Group allowsMultipleExpanded defaultExpandedKeys={new Set(['design'])}>
    <NavigationMenu.Section id="design" title="Design">
      <NavigationMenu.Item href="/components" active>Components</NavigationMenu.Item>
      <NavigationMenu.Item href="/tokens">Tokens</NavigationMenu.Item>
    </NavigationMenu.Section>
    <NavigationMenu.Section id="dev" title="Dev">
      <NavigationMenu.Item href="/install">Install</NavigationMenu.Item>
    </NavigationMenu.Section>
  </NavigationMenu.Group>
</NavigationMenu>

Install: @helixui/core

import { NavigationMenu } from '@helixui/core'

status: stable · since: 0.1.0

Tags: nav, collapsible, side, sections

Anatomy

▾ Section
   • Item
   • Item
▸ Section (collapsed)
▾ Section
   • Item

Layout

display — block
width — fill
height — content
intrinsicSize — vertical list with collapsible sections
stackable — true
fullBleed — false

Visual

A vertical list with sections that can collapse. Section headers show a chevron and bold label; items are pill-shaped with active state.

Props

Name	Type	Default	Description
`label`	`string`	`Main`	Accessible name on the wrapping `<nav>`.
`...rest`	`HTMLAttributes<HTMLElement>`	—	Native nav attributes.

Slots

NavigationMenu.Group — DisclosureGroup; allows multiple sections to be open at once
NavigationMenu.Section — Disclosure; pass title and children
NavigationMenu.Item — <a> with active flag → renders aria-current="page"

Tokens used

color.bg.action.neutral.default, color.bg.action.brand.subtle, color.text.primary, color.text.secondary, color.text.action.brand, color.border.focus, radius.md, space.1, space.2, space.3, font.family.sans, font.size.sm, font.weight.medium

Accessibility

Notes

Sections use react-aria’s Disclosure — keyboard, ARIA expanded/controls, focus all handled.
Mark the active link with active prop; helixui sets aria-current="page".

Composes with

Component	Relation	Note
`Sidebar`	`alternative`	Sidebar is the structured rail with header/footer; NavigationMenu is the bare collapsible list.
`Breadcrumb`	`sibling`
`Tabs`	`sibling`

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

docs side nav

“collapsible side nav with two sections”

<NavigationMenu>
  <NavigationMenu.Section title="Getting started">
    <NavigationMenu.Item href="/install">Install</NavigationMenu.Item>
  </NavigationMenu.Section>
  <NavigationMenu.Section title="Components">
    <NavigationMenu.Item href="/components/button">Button</NavigationMenu.Item>
  </NavigationMenu.Section>
</NavigationMenu>

NavigationMenu