NavGroup

A titled set of NavItems that can collapse. Use it once the sidebar holds more than about eight links; set isCollapsible false for a plain heading.

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

tsx

import { NavGroup } from '@skribly/ui/shell'

tsx

<NavGroup label="Boards" currentLabel="contains the open page" defaultExpanded>
  <NavItem href="/boards/web">Website relaunch</NavItem>
</NavGroup>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

The heading is a button with aria-expanded, toggled by Enter or Space.
When the open page is inside, the heading takes the accent and a dot, and currentLabel is read after its name, so a collapsed group still says where you are.
It opens by itself when the open page moves into it.

This demo runs through axe in all three themes on every test run. See what the tests check.