Skip to main content
Pricing

Header

Free

The top-level application header providing persistent branding and primary navigation. Contains a logo linking to the home page, a horizontal navigation bar using the <nav> landmark, and optional utility controls (search, notifications, user menu). Sticks to the top of the viewport and collapses into a hamburger menu on smaller screens.

8 variants

Lexicon
HomeProductsAboutContact
JP

Variants

VariantDescriptionWhen to use
DefaultStandard header with logo, horizontal nav links, and utility area.Use for most application and marketing pages with 3–6 top-level navigation items.
CompactReduced-height header with smaller logo and tighter spacing.Use in dense application UIs where vertical space is at a premium.
With Search

Usage Guidelines

Do

Wrap the logo in an <a> linking to the home page.

Don't

Place more than one <header> landmark at the page level.

Do

Use <nav aria-label="Main"> for the primary navigation landmark.

Don't

Use generic aria-label text like "navigation" — be specific with "Main".

Do

Keep nav items to 6 or fewer to avoid overflow on mid-size screens.

Don't

Hide the logo on mobile — it anchors brand identity.

Do

Provide a mobile hamburger menu that expands the full nav list.

Don't

Rely on hover-only mega menus without a click or keyboard alternative.

Code

HTML
<header class="lex-header" role="banner">
  <div class="lex-header__inner">
    <a href="/" class="lex-header__logo" aria-label="Home">
      <img src="/logo.svg" alt="Lexicon" height="32" />
    </a>
    <nav class="lex-header__nav" aria-label="Main navigation">
      <a href="/products" class="lex-header__link">Products</a>
      <a href="/docs" class="lex-header__link">Docs</a>
      <a href="/pricing" class="lex-header__link">Pricing</a>
      <a href="/blog" class="lex-header__link">Blog</a>
    </nav>
    <div class="lex-header__actions">
      <button class="lex-icon-button lex-icon-button--tertiary" aria-label="Search">
        <svg aria-hidden="true" width="20" height="20"><!-- search icon --></svg>
      </button>
      <button class="lex-icon-button lex-icon-button--tertiary" aria-label="Notifications">
        <svg aria-hidden="true" width="20" height="20"><!-- bell icon --></svg>
      </button>
      <button class="lex-header__avatar" aria-label="User menu" aria-haspopup="true">
        <img src="/avatar.jpg" alt="" width="32" height="32" />
      </button>
    </div>
  </div>
</header>
CSS Custom Properties
.lex-header {
  position: sticky;
  top: 0;
  z-index: var(--lex-z-header, 100);
  background: var(--lex-header-bg, var(--lex-bg-surface-default));
  border-bottom: 1px solid var(--lex-header-border, var(--lex-border-default));
  height: var(--lex-header-height, 64px);
}

.lex-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--lex-header-max-width, 1280px);
  margin: 0 auto;
  padding: 0 var(--lex-space-16);
  height: 100%;
}

.lex-header__nav {
  display: flex;
  align-items: center;
  gap: var(--lex-header-nav-gap, var(--lex-space-24));
}

.lex-header__link {
  color: var(--lex-header-link-color, var(--lex-text-muted));
  text-decoration: none;
  font-size: var(--lex-font-size-sm);
  font-weight: 500;
  transition: color 150ms ease;
}

.lex-header__link:hover {
  color: var(--lex-header-link-hover, var(--lex-text-default));
}

.lex-header__link[aria-current="page"] {
  color: var(--lex-header-link-active, var(--lex-text-default));
  font-weight: 600;
}

.lex-header__actions {
  display: flex;
  align-items: center;
  gap: var(--lex-space-8);
}

.lex-header__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: pointer;
}

.lex-header__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
React
// Using Lexicon CSS classes with React
import { Search, Bell } from 'lucide-react';

export function AppHeader() {
  return (
    <Header>
      <HeaderLogo href="/" src="/logo.svg" alt="Lexicon" />
      <HeaderNav aria-label="Main navigation">
        <HeaderLink href="/products">Products</HeaderLink>
        <HeaderLink href="/docs">Docs</HeaderLink>
        <HeaderLink href="/pricing">Pricing</HeaderLink>
        <HeaderLink href="/blog">Blog</HeaderLink>
      </HeaderNav>
      <HeaderActions>
        <IconButton icon={<Search size={20} />} aria-label="Search" variant="tertiary" />
        <IconButton icon={<Bell size={20} />} aria-label="Notifications" variant="tertiary" />
        <Avatar src="/avatar.jpg" size="sm" aria-label="User menu" />
      </HeaderActions>
    </Header>
  );
}

Design Tokens

TokenValue (dark)Value (light)CSS property
--lex-header-height——height
--lex-header-bg——bg
--lex-header-border——border
--lex-header-blur——blur
--lex-header-padding——padding

Accessibility

  • Use the <header> element with role="banner" as the page-level landmark.
  • Primary navigation must be wrapped in <nav aria-label="Main"> to distinguish it from other nav landmarks.
  • Logo link should have aria-label="Home" or equivalent descriptive text.
  • Mobile hamburger toggle needs aria-expanded and aria-controls pointing to the nav panel.
  • Skip link target should bypass the entire header (see Skip Link component).

Keyboard Interactions

TabMoves focus through logo, nav links, and utility controls in order.
EnterActivates the focused link or button.
EscapeCloses any open mega menu or mobile nav panel.