Navbar

Header navigation patterns with dropdowns, search, and mobile responsive menus.

Overview

Navigation bars are the primary way users navigate your site. These patterns use header.site for the base layout (flex, padding, border) and nav.horizontal with <ul>/<li> for horizontal link spacing with list semantics. VB's header.site nav automatically provides muted, compact link styling — no custom CSS needed for most navbars.

Key features:

Semantic HTML with proper ARIA attributes
Active page indication via aria-current="page"
Dropdown menus using drop-down component
Mobile-responsive with hamburger menu (details/summary)
Sticky header variant with data-sticky attribute

Simple Horizontal Nav

A basic navigation bar with horizontal links. Uses header.site for layout and aria-current="page" to indicate the active page. Zero custom CSS required — all styling comes from VB's header.site and nav styles.

With Dropdown Menus

Navigation with dropdown submenus using the drop-down component. Dropdowns are keyboard accessible and close on outside click or Escape. The no-flip attribute prevents menus from flipping upward in constrained viewports.

With Search

Navigation bar with an integrated search field. The <search> element uses the .with-icon class for positioned <icon-wc> icons.

Search Input Override

One small override to constrain the search input width in nav context:

Mobile Responsive

A responsive navbar that collapses to a hamburger menu on smaller screens. Uses the native <details>/<summary> pattern for the toggle — no JavaScript required. The CSS overrides VB's default details/summary styles (border, chevron, padding) to work as a clean mobile menu trigger.

Mobile Menu CSS

The mobile menu requires CSS for VB details/summary overrides, the hamburger icon animation, and responsive behavior:

/* Override VB details/summary styles for mobile menu */
.mobile-menu {
  border: none;
  border-radius: 0;
}

.mobile-menu summary {
  padding: var(--size-xs);
  min-block-size: auto;
  border: none;
}

.mobile-menu summary::after {
  content: none;  /* Suppress VB chevron — hamburger replaces it */
}

.mobile-menu > .mobile-nav {
  padding-inline: 0;
  padding-block-end: 0;
}

/* Mobile menu toggle */
.mobile-menu {
  display: none;
}

@media (max-width: 768px) {
  .desktop-nav {
    display: none;
  }

.mobile-menu {
    display: block;
    position: relative;
  }

/* Hamburger icon */
  .hamburger {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text);
    position: relative;
  }

.hamburger::before,
  .hamburger::after {
    content: "";
    position: absolute;
    width: 24px;
    height: 2px;
    background: var(--color-text);
    left: 0;
  }

.hamburger::before {
    top: -7px;
  }

.hamburger::after {
    top: 7px;
  }

/* Open state — X icon */
  .mobile-menu[open] .hamburger {
    background: transparent;
  }

.mobile-menu[open] .hamburger::before {
    top: 0;
    transform: rotate(45deg);
  }

.mobile-menu[open] .hamburger::after {
    top: 0;
    transform: rotate(-45deg);
  }

/* Mobile nav panel */
  .mobile-nav {
    position: absolute;
    top: calc(100% + var(--size-s));
    right: 0;
    background: var(--color-surface);
    border: var(--border-width-thin) solid var(--color-border);
    border-radius: var(--radius-m);
    padding: var(--size-s);
    min-width: 200px;
    box-shadow: var(--shadow-m);
  }

.mobile-nav a {
    display: block;
    padding: var(--size-s) var(--size-m);
    border-radius: var(--radius-s);
  }

.mobile-nav a:hover {
    background: var(--color-surface-raised);
  }
}

Sticky Header

A navigation bar that stays fixed at the top of the viewport as the user scrolls. Add data-sticky to the header for position, z-index, and background, then enhance with a backdrop blur.

Backdrop Blur Enhancement

Built-in Styles

VB handles all base navbar styling automatically — no custom CSS needed for the simple, dropdown, or sticky variants:

Usage Notes

Layout: header.site provides flex layout with justify-content: space-between — brand-mark left, nav right, automatically
Nav styling: header.site nav sets muted link color, compact padding, and hover transitions via CSS custom properties
List semantics: Always use <ul>/<li> inside <nav> — screen readers announce "navigation, list, 4 items" which helps users understand the scope
Accessibility: Always use aria-label on <nav> to identify its purpose (e.g., "Main navigation")
Active state: Use aria-current="page" on the link representing the current page
Dropdowns: The drop-down component handles keyboard navigation and ARIA automatically. Use no-flip in constrained viewports
Mobile menu: Wrap mobile links in a <nav> with <ul>/<li> for a proper navigation landmark. Override VB's details/summary styles (border, summary::after chevron, padding) when using details as a mobile menu trigger
Sticky: Add data-sticky to header.site for position/z-index/background, then add backdrop-filter for a polished effect
Skip links: Add a skip-to-content link before the nav for keyboard users

Welcome to Vanilla Breeze