v1.1.1

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-border-border-default vt-bg-surface-card">
  <div class="vt-max-w-6xl vt-mx-auto vt-flex vt-items-center vt-justify-between vt-h-16 vt-px-6">
    <a href="#" class="vt-text-lg vt-font-bold vt-text-foreground-primary">Logo</a>
    <nav class="vt-hidden vt-sm:flex vt-items-center vt-gap-6">
      <a href="#" class="vt-text-sm vt-font-medium vt-text-foreground-primary">Home</a>
      <a href="#" class="vt-text-sm vt-text-foreground-secondary vt-hover:text-foreground-primary vt-transition-colors">About</a>
      <a href="#" class="vt-text-sm vt-text-foreground-secondary vt-hover:text-foreground-primary vt-transition-colors">Features</a>
      <a href="#" class="vt-text-sm vt-text-foreground-secondary vt-hover:text-foreground-primary vt-transition-colors">Contact</a>
    </nav>
    <div class="vt-flex vt-items-center vt-gap-3">
      <button class="vt-btn vt-btn-primary vt-h-10 vt-px-4 vt-text-sm">Sign In</button>
    </div>
  </div>
</header>

Centered Navigation

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

html
Brand 
<header class="vt-border-b vt-border-border-default vt-bg-surface-card">
  <div class="vt-flex vt-items-center vt-justify-between vt-h-16 vt-px-6">
    <a href="#" class="vt-text-lg vt-font-bold vt-text-foreground-primary vt-min-w-[100px]">Brand</a>
    <nav class="vt-hidden vt-sm:flex vt-items-center vt-gap-1">
      <a href="#" class="vt-nav-item-sub vt-active-neutral">Products</a>
      <a href="#" class="vt-nav-item-sub">Pricing</a>
      <a href="#" class="vt-nav-item-sub">Docs</a>
      <a href="#" class="vt-nav-item-sub">Blog</a>
    </nav>
    <div class="vt-flex vt-items-center vt-gap-2 vt-min-w-[100px] vt-justify-end">
      <button class="vt-text-sm vt-text-foreground-secondary vt-hover:text-foreground-primary vt-transition-colors">Log in</button>
      <button class="vt-btn vt-btn-primary vt-h-10 vt-px-4 vt-text-sm">Sign up</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-border-border-default vt-bg-surface-card">
  <div class="vt-flex vt-items-center vt-justify-between vt-h-14 vt-px-6">
    <div class="vt-flex vt-items-center vt-gap-3">
      <a href="#" class="vt-text-lg vt-font-bold vt-text-foreground-primary">App</a>
      <nav class="vt-hidden vt-sm:flex vt-items-center vt-gap-1 vt-ml-4">
        <a href="#" class="vt-px-3 vt-py-1.5 vt-rounded-lg vt-text-sm vt-font-medium vt-text-foreground-primary">Dashboard</a>
        <a href="#" class="vt-px-3 vt-py-1.5 vt-rounded-lg vt-text-sm vt-text-foreground-secondary vt-hover:text-foreground-primary vt-transition-colors">Projects</a>
        <a href="#" class="vt-px-3 vt-py-1.5 vt-rounded-lg vt-text-sm vt-text-foreground-secondary vt-hover:text-foreground-primary vt-transition-colors">Team</a>
      </nav>
    </div>
    <div class="vt-flex vt-items-center vt-gap-1">
      <button class="vt-btn vt-btn-ghost vt-btn-icon vt-btn-sm" title="Search">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-search vt-w-4 vt-h-4 vt-text-foreground-secondary">
          <path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle>
        </svg>
      </button>
      <button class="vt-btn vt-btn-ghost vt-btn-icon vt-btn-sm vt-relative" title="Notifications">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-bell vt-w-4 vt-h-4 vt-text-foreground-secondary">
          <path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path>
        </svg>
        <span class="vt-absolute vt-top-2 vt-right-2 vt-w-2 vt-h-2 vt-rounded-full vt-bg-error-fill vt-ring-2 vt-ring-surface-card"></span>
      </button>
      <div class="vt-w-px vt-h-6 vt-bg-border-default vt-mx-1"></div>
      <button class="vt-btn vt-btn-ghost vt-gap-2 vt-pl-1 vt-pr-2 vt-py-1">
        <div class="vt-w-7 vt-h-7 vt-rounded-full vt-bg-info-fill/15 vt-flex vt-items-center vt-justify-center">
          <span class="vt-text-xs vt-font-semibold vt-text-info-fill">JD</span>
        </div>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-down vt-w-3.5 vt-h-3.5 vt-text-foreground-muted">
          <path d="m6 9 6 6 6-6"></path>
        </svg>
      </button>
    </div>
  </div>
</header>

Transparent

Overlay header for hero sections with gradient background.

html
Logo

Build faster

Beautiful components for your next project

<div class="vt-relative vt-bg-gradient-to-br vt-from-info-fill vt-to-info-fill/70 vt-min-h-[200px]">
  <header class="vt-relative vt-z-10">
    <div class="vt-flex vt-items-center vt-justify-between vt-h-16 vt-px-6">
      <a href="#" class="vt-text-lg vt-font-bold vt-text-generic-white">Logo</a>
      <nav class="vt-hidden vt-sm:flex vt-items-center vt-gap-6">
        <a href="#" class="vt-text-sm vt-text-generic-white/80 vt-hover:text-generic-white vt-transition-colors">Features</a>
        <a href="#" class="vt-text-sm vt-text-generic-white/80 vt-hover:text-generic-white vt-transition-colors">Pricing</a>
        <a href="#" class="vt-text-sm vt-text-generic-white/80 vt-hover:text-generic-white vt-transition-colors">About</a>
      </nav>
      <button class="vt-btn vt-btn-sm vt-bg-generic-white vt-text-info-fill vt-hover:bg-generic-white/90">Get Started</button>
    </div>
  </header>
  <div class="vt-flex vt-items-center vt-justify-center vt-pt-8 vt-pb-12">
    <div class="vt-text-center">
      <h1 class="vt-text-2xl vt-font-bold vt-text-generic-white vt-mb-2">Build faster</h1>
      <p class="vt-text-sm vt-text-generic-white/70">Beautiful components for your next project</p>
    </div>
  </div>
</div>

With Mega Menu

Header with dropdown navigation for complex site structures.

html
Store 
<header class="vt-border-b vt-border-border-default vt-bg-surface-card">
  <div class="vt-flex vt-items-center vt-justify-between vt-h-16 vt-px-6">
    <a href="#" class="vt-text-lg vt-font-bold vt-text-foreground-primary">Store</a>
    <nav class="vt-hidden vt-sm:flex vt-items-center vt-gap-1">
      <button class="vt-nav-item-sub vt-inline-flex vt-items-center vt-gap-1">
        Products <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-down vt-w-3.5 vt-h-3.5">
          <path d="m6 9 6 6 6-6"></path>
        </svg>
      </button>
      <a href="#" class="vt-nav-item-sub">Solutions</a>
      <a href="#" class="vt-nav-item-sub">Pricing</a>
      <button class="vt-nav-item-sub vt-inline-flex vt-items-center vt-gap-1">
        Resources <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-down vt-w-3.5 vt-h-3.5">
          <path d="m6 9 6 6 6-6"></path>
        </svg>
      </button>
    </nav>
    <div class="vt-flex vt-items-center vt-gap-3">
      <button class="vt-btn vt-btn-ghost vt-btn-icon vt-btn-sm vt-relative" title="Cart">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-shopping-cart vt-w-4 vt-h-4 vt-text-foreground-secondary">
          <circle cx="8" cy="21" r="1"></circle><circle cx="19" cy="21" r="1"></circle><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"></path>
        </svg>
        <span class="vt-absolute vt--top-0.5 vt--right-0.5 vt-w-4 vt-h-4 vt-rounded-full vt-bg-error-fill vt-text-generic-white vt-text-[9px] vt-font-bold vt-flex vt-items-center vt-justify-center">2</span>
      </button>
      <button class="vt-btn vt-btn-primary vt-h-10 vt-px-4 vt-text-sm">Sign In</button>
    </div>
  </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-surface-card 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-foreground-primary Color Primary text for logo and active nav items
vt-text-foreground-secondary Color Secondary text for inactive nav links
vt-hover:text-foreground-primary Interactive Primary text on hover for nav links
vt-hover:bg-surface-subtle Interactive Subtle background on hover for icon buttons
vt-bg-info-fill Color Blue background for avatar initials
vt-bg-error-fill 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-surface-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"