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 header.sticky
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.
Navigation with dropdown submenus using the drop-down component. Dropdowns are keyboard accessible and close on outside click or Escape. The data-no-flip attribute prevents menus from flipping upward in constrained viewports.
One small override to constrain the search input width in nav context:
/* Search input width override for nav context */
header.site search input {
min-inline-size: 180px;
inline-size: auto;
}
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.
A navigation bar that stays fixed at the top of the viewport as the user scrolls. Uses VB's header.sticky (position, z-index, background) with a backdrop blur enhancement.
/* Backdrop blur enhancement for sticky header */
header.site.sticky {
backdrop-filter: blur(8px);
background: oklch(from var(--color-surface) l c h / 0.9);
}
Built-in Styles
VB handles all base navbar styling automatically — no custom CSS needed for the simple, dropdown, or sticky variants:
/* No custom header/nav CSS needed!
* header.site provides: flex layout, padding, border
* header.site nav overrides: muted link color, compact padding
* nav a handles: text-decoration, transitions, hover/active states
* aria-current="page" gets: interactive color + medium weight */
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 data-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: Combine header.site + header.sticky 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