Sidebar Nav

Demo & usage

More examples

<sv-sidebar-nav [menuGroups]="groups" [activeRoute]="router.url">
  <a slot="header" href="/">Acme</a>
  <span slot="footer">v2.4</span>
</sv-sidebar-nav>

<sv-sidebar-nav [menuGroups]="groups" [collapsed]="true" [showFooter]="false" />

// One provider, once, at the app root. The component never imports the
// router itself — that is what makes it usable in a hybrid app.
provideSvLinkAdapter(() => {
  const router = inject(Router);
  return {
    kind: 'router',
    href: (t) => router.serializeUrl(router.createUrlTree([t].flat())),
    navigate: (t) => { void router.navigateByUrl(`${t}`); return true; },
  };
})

When to use

• The primary navigation of a dashboard, admin panel or internal tool.
• You want the rail and the mobile drawer without writing route-sync three times.
• Your app does not route the way Angular's router does — a hybrid shell, a micro-frontend, a widget embedded in somebody else's page.
• For a horizontal header, use Mega Menu; for in-page sections, use Anchor. This is the persistent side rail.

Async states

None — this component has nothing to load, so it has no loading, empty or error state to drive.

Outputs

Customization & theming

• Expanded, collapsed rail and mobile drawer out of one model — `N-2` Bottom Navigation and `N-3` Rail reuse the exported model and matcher rather than re-implementing route sync.
• Badges per item, with four tints; sub-navigation groups per item.
• `childKey` names the URL parameter that tracks the open sub-item, read through `SvNavLocation`; `activeChildId` pins it from host state instead.
• `showHeader` / `showFooter` remove the chrome boxes entirely for a bare rail.

Best practices

• Do: Bind `activeRoute` to your router's current URL. The component deliberately does not derive it: matching a route is the router's hardest job, and a component that guessed would be wrong differently in every app.
• Do: Project your own header and footer. The component ships no logo, no wordmark and no resource links — that welded-in chrome is exactly what made the previous `sv-sidebar` unusable outside this documentation site.
• Tip: Give the `<nav>` a distinct `ariaLabel` when a page has two of them. A primary sidebar and a secondary settings panel are two landmarks, and a screen-reader user needs them told apart.
• Don't: Don't keep sub-navigation open in the collapsed rail. There is no room for it, and a tooltip is not a sub-menu.

Accessibility

• Every destination is a real `<a href>`, so middle-click, ⌘-click and "copy link address" work — which they cannot when a router directive owns the element.
• The current item carries `aria-current="page"`, as does the open sub-item.
• The collapse control is a real `<button>` with `aria-expanded` and a label that says which way it will go.
• A modified click is never intercepted: that gesture means "open this somewhere else".
• The `<nav>` landmark takes its accessible name from `ariaLabel`.