NavMenu

Basic

<NavMenu>
  <NavMenu.Group label="Getting Started">
    <NavLink href="/introduction"  label="Introduction" />
    <NavLink href="/installation"  label="Installation" active />
    <NavLink href="/color-palette" label="Color Palette" />
  </NavMenu.Group>
  <NavMenu.Group label="Layout">
    <NavLink href="/app-shell" label="AppShell" />
    <NavLink href="/box"       label="Box" />
    <NavLink href="/flex"      label="Flex" />
  </NavMenu.Group>
</NavMenu>

scrollActive

When scrollActive is set, a small inline script runs on page load that finds the first [data-active] NavLink within the menu and calls scrollIntoView({ block: "nearest" }). Useful when the sidebar has enough items to overflow its container — the active page is always visible without manual scrolling.

<NavMenu scrollActive>
  <NavMenu.Group label="Getting Started">
    {items.map(item => (
      <NavLink href={item.path} label={item.label} active={pathname === item.path} />
    ))}
  </NavMenu.Group>
</NavMenu>

Collapsible groups

Add collapsible to any NavMenu.Group to turn the label into a toggle button. The chevron rotates to indicate state. Use defaultCollapsed to start a group closed.

<NavMenu>
  <NavMenu.Group label="Getting Started" collapsible>
    <NavLink href="/introduction"  label="Introduction" />
    <NavLink href="/installation"  label="Installation" active />
  </NavMenu.Group>
  <NavMenu.Group label="Layout" collapsible defaultCollapsed>
    <NavLink href="/app-shell" label="AppShell" />
    <NavLink href="/box"       label="Box" />
  </NavMenu.Group>
</NavMenu>

Custom chevron

Pass chevron to any collapsible NavMenu.Group to replace the default chevron with your own icon — a TablerIcon, raw SVG string, or any element.

<NavMenu>
  <NavMenu.Group label="Getting Started" collapsible chevron="▸">
    ...
  </NavMenu.Group>

  {/* TablerIcon also works */}
  <NavMenu.Group label="Layout" collapsible chevron={<TablerIcon name="plus" />}>
    ...
  </NavMenu.Group>
</NavMenu>

Group without label

Omit the label prop on NavMenu.Group to render a group with no heading — useful for a top-level set of links before the first labelled section.

<NavMenu>
  <NavMenu.Group>
    <NavLink href="/dashboard" label="Dashboard" active />
    <NavLink href="/profile"   label="Profile" />
  </NavMenu.Group>
  <NavMenu.Group label="Admin">
    <NavLink href="/users"    label="Users" />
    <NavLink href="/settings" label="Settings" />
  </NavMenu.Group>
</NavMenu>