Appbar

The top application bar using a semantic <header> and <nav> with @utility appbar-* classes.

My App
Page Content Area...

Usage

appbar.html
<header class="appbar">
  <div class="flex items-center gap-4">
    <button class="btn btn-ghost btn-icon color-group-neutral" aria-label="Open Menu">
      <Menu size={20} />
    </button>
    <div class="appbar-title">
      <Hexagon size={24} class="text-primary-9" />
      My App
    </div>
  </div>

  <nav aria-label="Main Navigation">
    <ul class="appbar-nav">
      <li><a href="#" class="appbar-link">Home</a></li>
      <li><a href="#" class="appbar-link">Dashboard</a></li>
    </ul>
  </nav>

  <div>
    <button class="btn btn-ghost btn-icon rounded-full color-group-neutral" aria-label="User Profile">
      <User size={20} />
    </button>
  </div>
</header>