Navigation Bar

The center column stays optically centered regardless of how much content sits on either side.

The bar is sticky by default and uses --v-space-pageoffset for inline padding, keeping content aligned with the page layout.

Use a nav element with an aria-label as the root.

Autosmmdlgxl

volvocars.com

Show codeHide code

import { IconButton, Wordmark } from '@volvo-cars/react-icons';

export function NavigationBar() {
  return (
    <nav className="navigation-bar" aria-label="Main navigation">
      <div slot="start">
        <button type="button" className="tap-area p-8 -ml-8 lg:hidden">
          Menu
        </button>
        <a href="#top" className="tap-area p-8 -ml-8 hidden lg:block">
          Our Cars
        </a>
        <a href="#top" className="tap-area p-8 hidden lg:block">
          Shop
        </a>
      </div>
      <a slot="center" href="#top" className="py-16 px-8">
        <Wordmark />
      </a>
      <div slot="end" className="gap-24">
        <IconButton
          icon="profile"
          variant="clear"
          size="large"
          bleed
          aria-label="Account"
          className="hidden md:block"
        />
        <IconButton
          icon="search"
          variant="clear"
          size="large"
          bleed
          aria-label="Search"
        />
      </div>
    </nav>
  );
}

Slots

This component uses slots to give content built-in styling.

• slot="start" – Left-aligned items (links, menu button)
• slot="center" – Centered item (typically the logo)
• slot="end" – Right-aligned items (sign-in, search)

Autosmmdlgxl

volvocars.com

Show codeHide code

<nav
  class="navigation-bar"
  aria-label="Main navigation"
  style="border: 1px solid grey"
>
  <div slot="start" class="bg-feedback-gray" style="border: 1px solid grey">
    <code>start</code>
  </div>
  <div slot="center" class="bg-feedback-gray" style="border: 1px solid grey">
    <code>center</code>
  </div>
  <div slot="end" class="bg-feedback-gray" style="border: 1px solid grey">
    <code>end</code>
  </div>
</nav>

Height

The bar height is 48px on small screens and 64px from the md breakpoint. This value is exposed as the --v-size-navigation-bar-height custom property so sub-navigations and content can position themselves relative to it, e.g. scroll-margin-top: var(--v-size-navigation-bar-height).

Positioning

The navigation bar is position: sticky by default. Override it with the --navigation-bar-position custom property. Set it directly on the element as an inline style, or on :root for remote control from another component.

Sub-navigation

When two navigation bars are present, set --navigation-bar-position: static on the main bar so it scrolls away while the sub-bar stays sticky.

Accessibility

• Use a nav element as the root with a descriptive aria-label (e.g. “Main navigation”, “Our Cars”)
• When multiple nav elements are present, each must have a unique aria-label
• Use aria-expanded on buttons that toggle sub-navigations

CSS reference

Class	Description
navigation-bar	Sticky 3-column navigation grid. 48px height on mobile, 64px from md breakpoint.

Custom property	Description	Default
--navigation-bar-position	Controls position. Set to static to unstick.	sticky
--v-size-navigation-bar-height	The bar’s height. 48px on mobile, 64px from md.	.