All docs

Header

Site header container. Same as [Container](container.md) but with type: "header" (renders <header).

Site header container. Same as Container but with type: "header" (renders <header>).

Key files

Props

Same as Container.

Gotchas

  • Fixed/sticky headers MUST use z-[1100], not z-50. Leaflet (Map) ships internal panes up to z-index 1000 — on z-50 map controls paint over the header. Modals and mobile drawers should be z-[1200].
  • px-container-x lives on the SECTION ROOT (header), never on a max-w-page inner. Doubling up insets content ~32px past every other section.
  • Mobile nav drawer is REQUIRED for any header with >2-3 links. Desktop nav hidden lg:flex MUST be paired with a lg:hidden hamburger toggle + slide-in overlay (overlay must be a child of ROOT, not the header — backdrop-blur/transform/filter on a sticky header creates a containing-block trap).
  • Header AND footer always reserve a logo slot — even when no logo is supplied, build the slot (icon mark Container + text-column wordmark Container).
  • For "transparent over hero, glass when scrolled" patterns, see .claude/known-issues/transparent-fixed-nav-pattern.md.

Related