Site Nav

Logo slot, links, a secondary and a primary action. The skip link is the first thing Tab reaches — press Tab from the top of this frame and it appears over the bar. Nothing here is hover-only: every panel trigger is a real button.

Rendered open so the anatomy is visible without hovering: three columns of real links, one line of description each, and the section's own page on a rule at the foot. Inside it, Tab follows DOM order, Arrow keys move by column and across columns, Home and End jump to the ends. Escape closes it and puts focus back on the trigger.

currentPath is /product/automations. The exact match inside the panel carries aria-current="page" with a fill and a heavier label; the trigger above it takes a dotted underline, because it holds the page rather than being it. Two different marks, neither of them colour alone.

One row, three states. The badge sits on the row's centre line rather than pushing it taller. The external link carries the icon, rel="noreferrer noopener" and an "opens in a new tab" hint. The unavailable link is a focusable span, not a dead anchor: it keeps its place, says why in a tooltip a keyboard also reaches, and navigates nowhere.

One registered custom property, one scroll timeline: the bar rests roomy at the top of the document and tightens over the first 100px. The compact state is the base state, so a browser without scroll-driven animation — or a reader who asked for less motion — gets a tight bar rather than one that covers the page. Scroll this page to watch it.

The breakpoint is measured against the header, not the viewport, so a bar in a narrow column folds too. Press Menu: panel links become native disclosures, the group holding the current route starts open, the reason on an unavailable link becomes visible text because a touch screen cannot hover, and both actions sit at the foot. Focus returns to the trigger on close.

The empty case: no links, so no drawer trigger and no panel machinery, and the single action stays in the bar at every width instead of hiding behind a menu that would hold nothing.