Header

Description

.bp-header is a position: sticky header with glassmorphism via @supports (backdrop-filter). The .is-scrolled class is toggled by an IntersectionObserver sentinel. Uses view-transition-name: bp-header for smooth cross-document transitions.

Usage

Header with logo, nav placeholder, and theme toggle

Be Partner DS

<style>
.demo-header { position: relative; }
.demo-header__nav { flex: 1; }
</style>
<header class="bp-header demo-header">
<div class="bp-header__inner">
  <a href="/" class="bp-header__logo">Be Partner DS</a>
  <nav class="demo-header__nav" aria-label="Main">
    <!-- .bp-nav goes here -->
  </nav>
  <div class="bp-header__actions">
    <button class="bp-btn bp-btn--secondary bp-btn--sm" type="button">Sign in</button>
    <button class="bp-btn bp-btn--sm" type="button">Get started</button>
  </div>
</div>
</header>

is-scrolled state (shadow active)

Be Partner DS

<style>
.demo-header { position: relative; }
</style>
<header class="bp-header is-scrolled demo-header">
<div class="bp-header__inner">
  <a href="/" class="bp-header__logo">Be Partner DS</a>
  <div class="bp-header__actions">
    <button class="bp-btn bp-btn--sm" type="button">Get started</button>
  </div>
</div>
</header>

Scroll behavior (JS)

<!-- Place immediately after the opening <body> tag -->
<div id="header-sentinel" aria-hidden="true" style="height:1px"></div>

<script type="module">
  const sentinel = document.getElementById('header-sentinel')
  const header = document.getElementById('site-header')
  new IntersectionObserver(([entry]) => {
    header.classList.toggle('is-scrolled', !entry.isIntersecting)
  }).observe(sentinel)
</script>

Public API

Variable	Default	Description
`--header-bg`	`var(--bp-color-bg-elevated)`	Background / glassmorphism base
`--header-height`	`4rem`	Header height
`--header-z`	`100`	z-index

Accessibility

<header> has an implicit banner landmark role.
The logo link should be the first focusable element.
Add a skip-to-content link before the header in DOM order.

Browser APIs

API	Availability	Used for	Without it	Polyfill
`backdrop-filter`	Widely available Baseline 2022	Glassmorphism blur behind the header	Solid opaque background, fully functional	None needed; `@supports` guard in CSS
`IntersectionObserver`	Widely available Baseline 2020	Toggle `.is-scrolled` shadow on scroll	No scroll-state shadow; use a `scroll` event listener	polyfill
View Transitions API	Newly available Baseline 2024	Smooth cross-document header animation	Instant page transitions, header snaps	None needed
`color-mix()`	Widely available Baseline 2023	Glassmorphism background tint	Solid token color used instead	None needed; `@supports` guard in CSS
Container Queries	Widely available Baseline 2023	Actions area stacks at small header width	Static horizontal layout	None needed

Internals

--_bg, --_height, --_z — component-private, do not set directly.