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. The checkbox toggle powers responsive menus—pair it with visible icons and labels so touch and keyboard users can open and close the menu confidently.

Accessibility: give the toggle label readable text, 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>

  <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, add aria-expanded/aria-controls to the toggle if you manage state with JS, 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 class="dropdown">
        <a tabindex="">
          ...
          <svg class="icon"></svg>
        </a>
        <nav class="panel arrow"></nav>
      </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>

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>