v1.0.0

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>

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"