Navbar

Navbars anchor wayfinding: they surface brand identity, primary links, search, and account actions in a single, predictable row. A well-structured bar keeps page chrome minimal while giving readers a reliable place to start and to recover if they get lost.

Use the navbar whenever a view needs global navigation or key contextual actions. Combine brand marks, knobs, search, and utilities in a consistent order, and rely on toggles to adapt layouts for smaller screens without sacrificing clarity or accessibility.

Core layout flows from left to right: start with the brand, follow with primary navigation, then utility areas like search suggestions and auth links. On small screens a menu button shows and hides the rest: a <details class="navbar-toggle"> with the icons in its <summary>. Give the summary an aria-label, because it only shows an icon; screen readers announce it as a button that is expanded or collapsed.

Accessibility: give the menu button a name with aria-label, keep focus outlines on links and controls, and ensure suggestion panels are navigable with a keyboard and dismissible when focus moves away.

<header class="navbar">
  <a href="..." id="brand">...</a>

  <details class="navbar-toggle">
    <summary aria-label="Menu">
      <svg class="icon menu" aria-hidden="true">...</svg>
      <svg class="icon close" aria-hidden="true">...</svg>
    </summary>
  </details>

  <nav>
    <ul class="knobs">
      <li class="active"><a href="">...</a></li>
      <li><a href="">...</a></li>
      <li><a href="">...</a></li>
    </ul>
  </nav>

  <div class="spacer"></div>

  <div class="suggestions">
    <form class="group">
      <svg class="icon"></svg>
      <input type="search" class="prepend-icon" placeholder="Search...">
    </form>
    <div class="panel">...</div>
  </div>

  <nav>
    <ul>
      <li><a href="...">...</a></li>
    </ul>
  </nav>
</header>

Brand treatments can be text-only, icon-only, or a combination—choose the variant that reads clearly at navbar height. Keep spacing consistent so the brand doesn’t wobble between pages, and make sure the brand always links back to the home or top-level destination.

Keep it identifiable: supply an aria-label when the brand is icon-only, and avoid repeating the id="brand" on multiple elements in a single navbar to keep markup valid.

<header class="navbar">
  <a href="..." id="brand">...</a>

  <a href="..." id="brand">
    <svg></svg>
  </a>

  <a href="..." id="brand" class="ball">...</a>

  <a href="..." id="brand" class="ball">
    <svg></svg>
  </a>
</header>

Menu links organize primary actions into a horizontal list of knobs. Icons help differentiate similar items at a glance, while the dropdown handles overflow options without crowding the bar. On smaller screens, the toggle collapses the list—keep the label readable so people know it controls the menu.

Discoverability: preserve focus rings on every knob, write a menu that opens as a <details class="dropdown"> inside the list item, with the knob as its <summary>, and reference the Knobs guidance for styling and sizing.

<header class="navbar">
  <nav>
    <ul class="knobs">
      <li class="active">
        <a href="">
          <svg class="icon"></svg>
          ...
        </a>
      </li>
      <li>
        <a href="">
          <svg class="icon"></svg>
          ...
        </a>
      </li>
      <li>
        <details class="dropdown">
          <summary>
            ...
            <svg class="icon"></svg>
          </summary>
          <nav class="panel arrow"></nav>
        </details>
      </li>
    </ul>
  </nav>
</header>

Search bars inside the navbar let readers jump straight to what they need. Pair the field with a search icon, keep the placeholder concise, and add an optional suggestions panel for frequent queries. Keep the form inline on wide screens and allow it to stack when space tightens.

Input hygiene: label every search field (via visible text or aria-label), ensure the toggle that reveals suggestions is keyboard reachable, and see the Input fields guidance for input groups and states.

<header class="navbar">
  <form class="group">
    <svg class="icon"></svg>
    <input type="search" class="prepend-icon" placeholder="Search...">
  </form>

  <div class="suggestions">
    <form class="group">
      <input type="search" placeholder="Search with suggestions">
      <button class="primary">
        <svg class="icon"></svg>
      </button>
    </form>
    <div class="panel">...</div>
  </div>
</header>

Expanding search

A search field takes a lot of room in a navbar. Add the class search to the suggestions and the field folds up into a knob with a search icon. It widens into a field as soon as it gets the focus, and stays wide while there is text in it. This needs no JavaScript: the knob is the search field, only narrower. The search at the top of this page works this way; click it, or press /.

The panel with suggestions shows only while the wrapper has the class open. Your script adds that class when it has suggestions to show, and removes it when the field is emptied.

<header class="navbar">
  ...
  <div class="spacer"></div>

  <search class="suggestions search">
    <form action="/search" class="group">
      <svg class="icon"><use xlink:href="/images/icons.svg#search"></use></svg>
      <input type="search" name="q" class="prepend-icon" placeholder="Search the catalogue"
             aria-label="Search the catalogue" autocomplete="off">
    </form>
    <nav class="panel" aria-label="Suggestions">...</nav>
  </search>
</header>

Keep the placeholder: the field decides whether it is in use by looking at its placeholder, so it needs one. Give it an aria-label as well; while the field is folded up the placeholder can't be seen. Let the form lead to a page with all results, so the search also works for visitors without JavaScript.

Simple link lists fit utility navigation—help, account, legal—without the padding and framing of knobs. Keep labels short, avoid nesting multiple levels, and let the navbar toggle handle overflow on compact layouts.

Consistency: maintain focus styles, use semantic lists for the link groups, and revisit the Links guidance for sizing and state treatments so navbar links align with the broader system.

<header class="navbar">
  <nav>
  <ul>
    <li><a href="...">...</a></li>
  </ul>
</nav>
</header>

Spacers are flexible separators that push groups to opposite ends of the bar—ideal for centering navigation while keeping brand and account actions aligned. Use them sparingly to avoid uneven gaps and to maintain predictable scan patterns across pages.

<header class="navbar">
  <div class="spacer"></div>
</header>