Header

Top-level site navigation with logo, links, and action buttons.

Default

Standard header with logo, navigation links, and a CTA button.

html
Logo 
<header class="uc-border-b uc-bg-neutrals-surface">
  <div class="uc-max-w-6xl uc-mx-auto uc-flex uc-items-center uc-justify-between uc-h-16 uc-px-6">
    <a class="uc-text-lg uc-font-bold">Logo</a>
    <nav class="uc-flex uc-items-center uc-gap-6">
      <a class="uc-text-sm uc-font-medium">Home</a>
      <a class="uc-text-sm">About</a>
      <a class="uc-text-sm">Contact</a>
    </nav>
    <button class="uc-btn uc-btn-primary uc-btn-sm">Sign In</button>
  </div>
</header>

Centered Navigation

Logo on the left, navigation centered, actions on the right.

html
Brand 
<header class="uc-border-b uc-bg-neutrals-surface">
  <div class="uc-flex uc-items-center uc-justify-between uc-h-16 uc-px-6">
    <a class="uc-text-lg uc-font-bold">Logo</a>
    <nav class="uc-flex uc-gap-6">
      <a class="uc-text-sm uc-font-medium">Products</a>
      <a class="uc-text-sm">Pricing</a>
      <a class="uc-text-sm">Docs</a>
    </nav>
    <div class="uc-flex uc-items-center uc-gap-2">
      <button>Sign In</button>
    </div>
  </div>
</header>

With Actions

Header with icon buttons and user avatar for app-style layouts.

html
App 
<header class="uc-border-b uc-bg-neutrals-surface">
  <div class="uc-flex uc-items-center uc-justify-between uc-h-16 uc-px-6">
    <a class="uc-text-lg uc-font-bold">Logo</a>
    <div class="uc-flex uc-items-center uc-gap-3">
      <button><!-- Search --></button>
      <button><!-- Bell --></button>
      <div><!-- Avatar --></div>
    </div>
  </div>
</header>

Transparent

Overlay header for hero sections with gradient background.

html
Logo

Build faster

Beautiful components for your next project

<header class="uc-absolute uc-top-0 uc-left-0 uc-right-0 uc-z-50">
  <div class="uc-flex uc-items-center uc-justify-between uc-h-16 uc-px-6">
    <a class="uc-text-lg uc-font-bold uc-text-constant-white">Logo</a>
    <nav class="uc-flex uc-gap-6 uc-text-constant-white/80">
      <a class="uc-text-sm">Features</a>
      <a class="uc-text-sm">Pricing</a>
    </nav>
    <button class="uc-btn uc-btn-sm">Get Started</button>
  </div>
</header>

With Mega Menu

Header with dropdown navigation for complex site structures.

html
Store 
<header class="uc-border-b uc-bg-neutrals-surface">
  <div class="uc-max-w-6xl uc-mx-auto uc-flex uc-items-center uc-justify-between uc-h-16 uc-px-6">
    <a class="uc-text-lg uc-font-bold">Logo</a>
    <nav class="uc-flex uc-items-center uc-gap-6">
      <a class="uc-text-sm uc-font-medium">Home</a>
      <a class="uc-text-sm">About</a>
      <a class="uc-text-sm">Contact</a>
    </nav>
    <button class="uc-btn uc-btn-primary uc-btn-sm">Sign In</button>
  </div>
</header>

API Reference

All CSS classes available for the Header component.

Class Type Description
uc-border-b Border Bottom border to separate header from content
uc-border-border-default Border Default border color
uc-bg-neutrals-surface Color Surface background for the header
uc-h-16 Size Standard header height (4rem)
uc-h-14 Size Compact header height (3.5rem)
uc-text-fg-primary Color Primary text for logo and active nav items
uc-text-fg-secondary Color Secondary text for inactive nav links
uc-hover:text-fg-primary Interactive Primary text on hover for nav links
uc-hover:bg-neutrals-subtle Interactive Subtle background on hover for icon buttons
uc-bg-accents-blue Color Blue background for avatar initials
uc-bg-accents-red Color Red dot for notification indicator
uc-text-constant-white Color White text for transparent header variant
uc-bg-constant-white Color White button for transparent header CTA
uc-btn uc-btn-primary Component Primary CTA button in header
uc-rounded-lg Shape Rounded corners for nav items and buttons
uc-bg-neutrals-subtle Color Subtle background for active nav pill
uc-transition-colors Animation Smooth color transition on hover

Accessibility

Keyboard and screen reader support.

Feature Details
Landmark Use header element — creates banner landmark for screen readers
Navigation Main nav should use nav element with aria-label="Main navigation"
Skip link Include a skip-to-content link as the first focusable element
Mobile menu Hamburger button needs aria-expanded and aria-label="Toggle menu"