header-hero
image
Header Block

Site navigation and brand identity.

The site header fragment with logo, navigation menu, search, pre-header bar, and sticky/transparent styling options.
inline-text-overlay
16.0
10.0
9.0
16.0
style
u-sp-none, u-section-gap-none, rhea-section-container
header-usage

When to use

  • Every page — the header is a shared fragment referenced by all site pages via the page template.
  • Transparent variant — on landing pages where the header should overlay the hero image with no visible background.
  • Pre-header — when utility links (login, language, alerts) need to appear above the main navigation.
  • Search — enable when the site has enough content to warrant search functionality.

Key decisions

  • Style: header-style-default for content pages, header-style-transparent for landing/hero pages.
  • Sticky: Almost always true for easy navigation access on long pages.
  • Nav depth: Usually 2-3 levels deep. Avoid more than 3 for usability.
  • Fragment: Header is authored once and referenced. Changes propagate to all pages.
style
u-sp-default, rhea-section-container
header-options

All authoring options

Brand

headerLogo: DAM reference
headerLogoAlt: alt text
headerLogoLink: homepage URL

headerNavRoot: root page for nav tree
headerNavDepth: depth of nav levels

Pre-header

classes_headerPreheader: boolean (show pre-header bar)
preheaderContent: richtext utility content

Appearance

classes_headerStyle: header-style-default | header-style-transparent | header-style-dark
classes_headerSticky: boolean (stick on scroll)
classes_headerSearch: boolean (show search)

Analytics

trackClick: boolean
trackClick_meta: text

style
u-sp-default, rhea-section-container