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
FileDescriptionSource
component.header.cssAll header stylesGithub
Header.astroThe Astro componentGithub
icons/menu.svg, icons/x.svgMobile menu open/close iconsGithub
--header-* block in default themeTheme tokens (see table below)Github
scripts/utilities.js (throttle)Used by the sticky-shadow scriptGithub

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 / stateDescription
.headerBase block. Flex row, --header-height tall.
.header + .header-stickySticks to the top of the viewport with a shadow once the page is scrolled.
.is-topState 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 the default theme:

PropertyDescription
--header-heightHeader height (grows at the --md breakpoint).
--header-paddingHorizontal padding.
--header-background-colorBackground color.
--header-menu-background-colorMobile menu background (always dark by design).
--header-menu-colorMobile menu link color.
--header-menu-color-currentMobile menu current-page link color.
--header-menu-secondary-colorMobile menu sub-item link color.
--header-menu-border-colorMobile 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

PropTypeDefaultDescription
navItemsNavItem[][]{ label, href, children?, mobileOnly? }. children renders as a sub-list in the mobile menu only; mobileOnly items are skipped in the desktop nav.
stickybooleanfalseSticky positioning + scroll shadow.
currentPathstringAstro.url.pathnameUsed 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).
navLabelstring"Main"aria-label for the desktop nav.
menuLabelstring"Main menu"aria-label for the mobile nav.
classstringundefinedAdditional CSS classes, useful for helper classes.

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

SlotDescription
logoBrand link. Use class="header_logo" on it to pick up the styles.
actionsRight-hand side extras (theme toggle, CTA). Desktop only.
menuExtra content at the top of the mobile menu (e.g. a theme toggle).

Examples