Skip to content

component :: Header

The .header component is the site-wide top bar: logo, primary navigation, optional actions, and a built-in mobile menu behind a hamburger button.

Sign up
File Description Source
component.header.css All header styles Github
Header.astro The Astro component Github
icons/menu.svg, icons/x.svg Mobile menu open/close icons Github
--header-* block in settings.ui.css Interface tokens (see table below) Github
scripts/utilities.js (throttle) Used by the sticky-shadow script Github

HTML

The header is a flex row: logo first, desktop nav pushed to the right, actions last. Below the --md breakpoint the desktop nav and actions hide and the hamburger appears.

<header class="header is-top header-sticky">
  <a class="header_logo" href="/">✻ Acme</a>
  <nav class="header_nav" aria-label="Main">
    <ul>
      <li><a href="/" aria-current="page">Home</a></li>
      <li><a href="/pricing">Pricing</a></li>
    </ul>
  </nav>
  <nav class="header_navMobile" aria-label="Main menu">
    <button aria-expanded="false" aria-label="Open menu"><svg>[…]</svg></button>
    <div>
      <button aria-label="Close menu"><svg>[…]</svg></button>
      <ul>
        <li><a href="/" aria-current="page">Home</a></li>
        <li><a href="/pricing">Pricing</a></li>
      </ul>
    </div>
  </nav>
  <div class="header_actions"><!-- theme toggle, CTA… --></div>
</header>

When using plain HTML you also need the small script that wires the hamburger; copy it from the bottom of Header.astro. It keeps the menu keyboard operable: aria-expanded reflects the state, focus moves into the menu on open and back to the trigger on close, and Escape closes it.

Available modifiers

Class / state Description
.header Base block. Flex row, --header-height tall.
.header + .header-sticky Sticks to the top of the viewport with a shadow once the page is scrolled.
.is-top State set by the script while the page is scrolled to the very top (hides the sticky shadow).
a[aria-current] Current page (page) or section (true) links are highlighted.

Custom properties

The following custom properties are available in settings.ui.css:

Property Description
--header-height Header height (grows at the --md breakpoint).
--header-padding Horizontal padding.
--header-background-color Background color.
--header-menu-background-color Mobile menu background (always dark by design).
--header-menu-color Mobile menu link color.
--header-menu-color-current Mobile menu current-page link color.
--header-menu-secondary-color Mobile menu sub-item link color.
--header-menu-border-color Mobile menu sub-list border.

The mobile menu deliberately keeps the same dark surface in both themes; retheme it through the --header-menu-* tokens rather than a light-dark() override.

Astro component

Prop Type Default Description
navItems NavItem[] [] { label, href, children?, mobileOnly? }. children renders as a sub-list in the mobile menu only; mobileOnly items are skipped in the desktop nav.
sticky boolean false Sticky positioning + scroll shadow.
currentPath string Astro.url.pathname Used to set aria-current: exact match gets page; the item whose children contain the page gets true (falling back to first-path-segment matching when none does).
navLabel string "Main" aria-label for the desktop nav.
menuLabel string "Main menu" aria-label for the mobile nav.
class string undefined Additional CSS classes, useful for helper classes.

Any other attribute is passed through to the root <header> element.

Slot Description
logo Brand link. Use class="header_logo" on it to pick up the styles.
actions Right-hand side extras (theme toggle, CTA). Desktop only.
menu Extra content at the top of the mobile menu (e.g. a theme toggle).

Examples