Top bar · kit

Example

Show the markup

<div class="demo-frame demo-fill">
  <header class="kit-topbar">
    <a class="kit-topbar-brand" href="#top-bar"><span class="kit-avatar" data-size="sm" data-tone="1" aria-hidden="true">AB</span>Product</a>
    <nav class="kit-topbar-nav" aria-label="Example main">
      <a href="#top-bar" aria-current="page">Dashboard</a><a href="#top-bar">Projects</a><a href="#top-bar">Reports</a><a href="#top-bar">Settings</a>
    </nav>
    <div class="kit-topbar-actions"><button class="kit-button" data-variant="ghost" data-icon data-size="sm" type="button" aria-label="Search" data-tooltip="Search" data-tooltip-placement="bottom"><svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" aria-hidden="true"><circle cx="9" cy="9" r="5.5"/><path d="m13.2 13.2 3.3 3.3"/></svg></button><button class="kit-button" data-variant="primary" data-size="sm" type="button">Action</button></div>
  </header>
</div>

Usage

<header class="kit-topbar">
  <a class="kit-topbar-brand" href="/">Name</a>
  <nav class="kit-topbar-nav" aria-label="Main">
    <a href="/" aria-current="page">Dashboard</a>
    <a href="/projects">Projects</a>
  </nav>
  <div class="kit-topbar-actions">…buttons…</div>
</header>

data-sticky keeps it at the top as the page scrolls, with a frosted background. On narrow screens the links scroll sideways in their own strip under the name; for many links, put them in a drawer behind a menu button instead.

Accessibility

As the page's <header>, it's the banner landmark; the links are a nav named "Main". Put a "Skip to content" link first.
The current page's link has aria-current="page", shown with an underline as well as colour.