Navbar
A full-bleed toolbar: material with one hairline below. Can shrink as the page scrolls.
Examples
Anatomy
header.navbar | Sticky to the top, frosted, full bleed. Its content lines up with the page container. |
> strong, > nav | Brand and link groups in one row. Every <a> inside is a quiet, small link. |
> .end | Optional. The .end utility pushes trailing actions to the far side. |
API
| Attribute | Values | Description |
|---|---|---|
data-shrink | boolean | Tightens the padding and adds a shadow over the first ~11rem of page scroll. Scroll-driven, no JS; ignored where animation-timeline is unsupported. |
aria-current | page | On a link: full text colour and an accent underline. |
Accessibility
- Wrap the links in a
<nav>with anaria-labelwhen the page has more than one navigation landmark. - Mark the current link with
aria-current="page"; the underline alone is not announced.