SidebarNav

The list of links in a Sidebar. Give it the current route and it marks the matching link and opens the group around it.

SidebarNav

UsageLink to the section Usage

tsx

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

tsx

<SidebarNav label="Main" current={pathname}>
  <NavItem href="/" icon={<House />}>Dashboard</NavItem>
  <NavGroup label="Admin"><NavItem href="/settings">Settings</NavItem></NavGroup>
</SidebarNav>

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

AccessibilityLink to the section Accessibility

A navigation landmark holding a list, so screen readers say how many links there are.
Links are Tab stops; the current one has aria-current="page".

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