Navigation

App-level navigation. Two variants: horizontal (top app bar, brand + items + actions, underline marks the active page) and vertical (sidebar, sectioned groups, left bar marks the active page). Items support optional leading icons and a trailing notification badge. Vertical variant has a collapsed icon-only mode for compact app shells.

a11y (built in): each variant is a real <nav aria-label> landmark, and the current page is marked twice — .lb-nav__item--active for the eye, aria-current="page" for the screen reader (the demo script moves both together). Unavailable entries render as <span aria-disabled="true"> instead of <a>, so they leave the tab order; icons and the brand mark are aria-hidden / alt=""; items take a :focus-visible outline. In --collapsed the labels are display: none, which drops them from the accessibility tree — each item then needs a title (as the demo does) to keep an accessible name.

Usage: <nav class="lb-nav lb-nav--horizontal"> or --vertical. Each item is <a class="lb-nav__item"> with optional .lb-nav__item-icon, .lb-nav__item-label, .lb-nav__item-badge; render an unavailable entry as <span class="lb-nav__item lb-nav__item--disabled" aria-disabled="true"> instead of <a>. Group items in vertical sidebars with <li class="lb-nav__group"> + .lb-nav__group-label; that label is a plain <span> heading, so nothing in the markup ties it to the items beneath it. Add --collapsed for icon-only mode. Mark active page with .lb-nav__item--active + aria-current="page".

Horizontal — top app bar

Brand on the left, navigation items in the middle, actions slot on the right (auth buttons, user menu, search). Active item gets a brand underline so the current location reads at a glance.

Vertical — sidebar with sections

Sidebar pattern for app shells. Brand at top, sectioned groups labelled below, optional actions at the bottom. Active item gets a left bar plus brand-tinted background. Items can carry trailing badges for counts.

Vertical collapsed — icon-only

Add --collapsed to render the sidebar as a compact icon rail. Labels, badges, and group headers are hidden via CSS — same markup, no JS toggling. display: none also drops the labels from the accessibility tree, so each item carries a title for its accessible name. Useful as a "compact mode" for tight viewports or as a default for power-user dense apps.

App shell — top + side combined

A common pattern for product UI: horizontal nav owns global identity + cross-app actions, vertical nav owns the contextual section navigation. Together they bracket the page content.