v1.0.8

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

Centered Navigation

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

html
Brand 
<header class="vt-border-b vt-bg-surfaces-surface">
  <div class="vt-flex vt-items-center vt-justify-between vt-h-16 vt-px-6">
    <a class="vt-text-lg vt-font-bold">Logo</a>
    <nav class="vt-flex vt-gap-6">
      <a class="vt-text-sm vt-font-medium">Products</a>
      <a class="vt-text-sm">Pricing</a>
      <a class="vt-text-sm">Docs</a>
    </nav>
    <div class="vt-flex vt-items-center vt-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="vt-border-b vt-bg-surfaces-surface">
  <div class="vt-flex vt-items-center vt-justify-between vt-h-16 vt-px-6">
    <a class="vt-text-lg vt-font-bold">Logo</a>
    <div class="vt-flex vt-items-center vt-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="vt-absolute vt-top-0 vt-left-0 vt-right-0 vt-z-50">
  <div class="vt-flex vt-items-center vt-justify-between vt-h-16 vt-px-6">
    <a class="vt-text-lg vt-font-bold vt-text-generic-white">Logo</a>
    <nav class="vt-flex vt-gap-6 vt-text-generic-white/80">
      <a class="vt-text-sm">Features</a>
      <a class="vt-text-sm">Pricing</a>
    </nav>
    <button class="vt-btn vt-btn-sm">Get Started</button>
  </div>
</header>

With Mega Menu

Header with dropdown navigation for complex site structures.

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

Guidelines

Anchor the top of the page with a logo, a few primary nav links, and one key action.

Logo
Do
Keep a logo, a handful of links, and a single clear action.
Logo
Don't
Don't overload the bar with too many top-level links.
Logo
Do
Mark the current page in the navigation.
Logo
Don't
Don't put two competing primary buttons in the bar.

API Reference

All CSS classes available for the Header component.

Class Type Description
vt-border-b Border Bottom border to separate header from content
vt-border-border-default Border Default border color
vt-bg-surfaces-surface Color Surface background for the header
vt-h-16 Size Standard header height (4rem)
vt-h-14 Size Compact header height (3.5rem)
vt-text-mains-primary Color Primary text for logo and active nav items
vt-text-mains-secondary Color Secondary text for inactive nav links
vt-hover:text-mains-primary Interactive Primary text on hover for nav links
vt-hover:bg-surfaces-subtle Interactive Subtle background on hover for icon buttons
vt-bg-info-primary Color Blue background for avatar initials
vt-bg-error-primary Color Red dot for notification indicator
vt-text-generic-white Color White text for transparent header variant
vt-bg-generic-white Color White button for transparent header CTA
vt-btn vt-btn-primary Component Primary CTA button in header
vt-rounded-lg Shape Rounded corners for nav items and buttons
vt-bg-surfaces-subtle Color Subtle background for active nav pill
vt-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"