Organisms - Circuit design system

in development

Header

Description

The Header is the consistent, recognizable entry point across all DEHN web experiences, products, and portals. It combines brand presence (logo), portal-specific primary navigation, and a standardized utility area (icon menu). The concept is designed to be modularly customizable per portal while keeping navigation patterns and always-present elements consistent.

In its passive (collapsed) state, the Header consists of three core elements: Header — passive state

Sticky & scroll state

The header is always sticky — it remains visible at the top of the viewport at all breakpoints and in all portal contexts. Two visual states apply:

StateTriggerVisual treatment
Initialscroll = 0No shadow, no blur — the header reads as an integral part of the page
Scrolledscroll > 0Subtle drop shadow + minimal transparency and backdrop blur signal elevation
--dehn-white-transparent: rgba(255, 255, 255, .95);
background-color: var(--dehn-white-transparent);
backdrop-filter: blur(8px);

The transition is deliberately subtle — the header bar height and content remain unchanged in both states.

Open state

The header enters an open state whenever a panel or the main menu is active:

--dehn-eerie-transparent: rgba(31, 31, 30, .95);
background-color: var(--dehn-eerie-transparent);
backdrop-filter: blur(8px);

Responsive behavior

The header adapts fluidly across screen sizes with two possible breakpoints:

  1. First breakpoint: The main navigation shifts into a second row below the logo and icon bar.
    Header — medium
  2. Second breakpoint: The navigation collapses entirely. Only the logo, the search icon, and a burger menu icon remain visible. Opening the navigation reveals all main menu items as a vertical list. The remaining utility icons appear at the bottom of the open navigation panel.

Header — small Header — small expanded

Usage

Rules & Guidelines

Logo: Always use as the primary brand anchor and Home link. Usage follows the logo guidelines.

Main menu: Prefer 3–5 top-level items. Supports direct links (flat structures) and expandable navigation (flyout) for more complex structures. Further details: Header Menu.

Icon order: Search → User → International → Shopping . This fixed sequence applies in the header bar and wherever the icons are presented together. Consistency of order takes precedence over any portal-specific prioritization.

Icons are entry points, not direct actions: An icon button must not immediately navigate, submit, or trigger an irreversible action. It always opens the header panel first and provides explicit, labeled controls inside.

Only one panel at a time: Opening a new panel automatically closes the currently open one.

Panel-specific documentation:

HTML Structure

<header>
  <a href="#main-content" class="skip-link" hidden>Skip to main content</a>
  <div class="header-content">
    <a href="/" aria-label="Home">
      <!-- Logo component -->
    </a>

    <nav aria-label="Primary">
      <!-- Main menu as a list; expandable items are buttons controlling panels -->
      <ul>
        <li><a href="/section-1">Direct link</a></li>
        <li>
          <button aria-expanded="false" aria-controls="panel-section-2">
            Flyout trigger
          </button>
        </li>
      </ul>
    </nav>

    <nav aria-label="Utilities">
      <button aria-expanded="false" aria-controls="panel-search" aria-label="Search">
        <!-- Search icon -->
      </button>
      <button aria-expanded="false" aria-controls="panel-user" aria-label="User account">
        <!-- User icon -->
      </button>
      <button aria-expanded="false" aria-controls="panel-international" aria-label="Country and language selection">
        <!-- Globe icon -->
      </button>
      <button aria-expanded="false" aria-controls="panel-shopping" aria-label="Shopping cart">
        <!-- Cart icon -->
      </button>
    </nav>

  </div>
  <div id="panel-container" class="flyout-container" hidden>
  <!-- Utility panels (hidden/collapsible regions) -->
    <div id="panel-section-2" hidden><!-- Section 2 menu --></div>
    <div id="panel-search" hidden><!-- Search panel --></div>
    <div id="panel-user" hidden><!-- User panel --></div>
    <div id="panel-international" hidden><!-- International panel --></div>
    <div id="panel-shopping" hidden><!-- Shopping panel --></div>
  </div>
</header>

Accessibility

Resources

Content