Header
<al-header>betaSouthleft's primary navigation bar — sticky, translucent, blurred, with pill nav items, circular icon actions and a numbered mobile panel.
CODE — HTML
Guidance
Southleft's primary navigation bar, and the brand implementation of al-header: sticky, translucent and blurred, with pill nav items, circular icon actions and a numbered mobile panel it opens itself. Altitude's al-header is a bare landmark; this is the whole bar.
WHEN TO USE
- You are building a page on the Southleft design system and it needs the site's navigation chrome.
- You want the mobile panel behaviour without writing it. The component owns
menu-open, renders the toggle and the panel, and dispatches on change.
WHEN NOT TO USE
- You need a neutral landmark to compose your own bar inside. That is Altitude's header, and this design system deliberately replaces it, so arranging your own chrome means composing the layout primitive instead.USE LAYOUT →
- The band you want is a page-level heading rather than site navigation.USE PAGE-HERO →
DO
- Put the wordmark in
brand, links innav, the right-hand cluster inactions, and a copy of the links inmobile. The panel does not mirror the nav slot for you. - Mark the current page with
aria-currenton the matching nav link; the component styles that state but cannot know the route.
DON’T
- Do not wrap the slotted logo in your own anchor.
al-logorenders its own, and the nesting is an axenested-interactivefailure. - Do not build a second menu toggle in the page. The component owns
menu-open, and two things toggling one menu is how a menu ends up half-open.
ACCESSIBILITY IN PRACTICE
- The nav landmark and its label live inside the component, so slot plain anchors rather than another
navelement. A nested navigation landmark makes the bar announce twice.
CONTENT GUIDELINES
- Nav labels are one or two words. The mobile panel numbers them, so a label that wraps to two lines breaks the alignment of its ordinal.
WHERE THIS CAME FROM
libs/sl-web-components/components/header/header.tsThe brand implementation that registers under the base library tag — the override this guidance opens by describing.libs/sl-web-components/components/header/header.tsThe component owns the open state and announces it, which is why a page must not add a second toggle..altitude/ds-projects.jsonThe registry declares this as a deliberate same-tag override rather than a collision.
Each line above names a file and a literal string that must still appear in it.pnpm gate:guidance re-reads them from this built page, so guidance that has stopped being true fails a check rather than misleading you.
FIGMA PARITY
Code and Figma each changed since the last confirmed sync. Neither side should be overwritten blindly.
- DECIDED BY
- CONTRACT DIFF
- FIGMA SIDE
- OBSERVED
- LAST CONFIRMED SYNC
- 2026-08-28
- PUBLIC SURFACE
- 3 ATTR · 5 SLOT · 1 EVENT · 5 PART
The component’s public surface — attributes and their value sets, slots, events, CSS parts and custom properties, from the manifest — compared against the Figma set’s property definitions.
ACCESSIBILITY
Measured by axe on this documentation site’s own preview of the default story — @southleft/sl-web-components has no Storybook in the measured set.
The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.
INSTALL
import '@southleft/sl-web-components/components/header';
API — 3 PROPS
SLOTS
EVENTS
CSS PARTS
CSS CUSTOM PROPERTIES
SOURCE — components/header/header.ts · Organisms/Header