Application Header & Chrome Anatomy

Full navigation header specification showing exact placement of the Alterspective logo, Application Name, Primary Navigation, User Menu, Environment Badge, and Version Status Chip.

Complex 9 Critical Rules Demonstrated

Critical Rules Demonstrated

Header Anatomy & Zone Blueprint

Every persistent Alterspective application header is structured into four distinct zones to maintain trust, consistency, and clear separation between account actions and runtime status.

Zone 1: Brand & App

LOGO / Application Name

Zone 2: Navigation

Active Link Link 2 Link 3

Zone 3: User Menu

IJ User Name ▾

Zone 4: Status Cluster

PROD ● v1.4.2

Zone 1: Brand & App Identity

Alterspective Logo is left-aligned (LOGO-001). The Application Name sits immediately to the right, separated by a subtle forward slash (/). Never center the logo.

Zone 2: Primary Navigation

Product navigation links with clear active indicator (UX-NAV-01). Collapses into a drawer or hamburger menu on mobile screens.

Zone 3: Account & User Menu

User avatar, display name, and dropdown. Sign Out, settings, and theme toggles MUST live inside this menu (UX-SHELL-01), never floating as separate buttons.

Zone 4: Runtime Status Cluster

Environment Badge (DEV, TEST, PRE PROD, PROD per VER-UI-07) paired with the Version Status Chip (UX-SHELL-04). Kept separate from user actions per UX-SHELL-02.

Live Interactive Example - Light Background

Live Interactive Example - Dark Background (Reversed Logo)

Detailed Placement & Styling Rules

LOGO-001 (UX-BRAND-01): Logo is strictly LEFT-aligned in the header. Centering is forbidden.
APPLICATION NAME: Displayed directly adjacent to the logo with a forward slash (/) separator. Set in Montserrat Semibold (font-weight: 600, 15px), colored with --as-color-text-primary.
LOGO-003 (UX-BRAND-06): Dark headers use the reversed white logo (Alterspective_Logo_reversed_FA.png) to guarantee AA contrast against dark backgrounds.
UX-SHELL-01: Account actions (like Sign Out) MUST be located inside the user menu dropdown. Never render a loose "Log out" button in the header bar.
UX-SHELL-02 & VER-UI-06: The runtime status cluster (Environment Badge + Version Chip) forms a dedicated utility group on the far right, visually distinct from account actions.
VER-UI-07: Environment badges MUST normalize environment names to one of four canonical labels: DEV, TEST, PRE PROD, or PROD.
UX-SHELL-04: The closed version chip displays the running version (v1.4.2). Clicking it opens the status popover displaying the moment-style relative deployment timestamp (showing how long ago it was published, e.g. Published 2 hours ago) along with the localized release time sourced from /health (version.buildTime), never hardcoded.

HTML / Component Blueprint Code

<header class="app-header">
  <!-- ZONE 1: Logo + Application Name -->
  <div class="header-brand-group">
    <a href="/" class="header-logo">
      <!-- Use reversed logo on dark headers per LOGO-003 -->
      <img src="/logos/Alterspective_Logo_FA.png" alt="Alterspective" />
    </a>
    <span class="app-divider">/</span>
    <span class="app-name">Platform Hub</span>
  </div>

  <!-- ZONE 2: Primary Navigation -->
  <nav class="header-nav">
    <a href="/dashboard" class="nav-item active">Dashboard</a>
    <a href="/work-items" class="nav-item">Work Items</a>
    <a href="/analytics" class="nav-item">Analytics</a>
  </nav>

  <!-- RIGHT AREA: Account + Status Cluster -->
  <div class="header-right-utility">
    <!-- ZONE 3: User Menu (UX-SHELL-01: Sign out lives inside) -->
    <div class="user-menu">
      <button class="user-menu-btn">
        <span class="avatar">IJ</span>
        <span class="name">Igor Jericevich</span>
      </button>
    </div>

    <!-- ZONE 4: Runtime Status Cluster (VER-UI-06, UX-SHELL-02) -->
    <div class="header-status-cluster">
      <!-- Canonical Environment Badge per VER-UI-07 -->
      <span class="env-badge env-prod">PROD</span>

      <!-- Version & Status Chip per UX-SHELL-04 / VER-UI-09 -->
      <button class="version-chip" aria-label="System status & version">
        <span class="status-dot healthy"></span>
        <span class="version-text">v1.4.2</span>
      </button>

      <!-- Popover surfaces moment-style relative publication time per UX-SHELL-04 -->
      <div class="version-popover">
        <div class="popover-title">Version 1.4.2</div>
        <div class="popover-sub">
          <div class="popover-time-relative">Published <strong>2 hours ago</strong></div>
          <div class="popover-time-absolute">18 Oct 2026, 13:30 (AEDT)</div>
        </div>
        <div class="popover-sha">Commit: <code>a1b2c3d</code></div>
      </div>
    </div>
  </div>
</header>