Navigation Bar — Cider UI

Selectors

.navbar: Top navigation bar container. Uses CSS Grid (1fr auto 1fr) for perfect title centering. Children: 1st = left slot, 2nd = title, 3rd = right slot — no extra classes needed. Either slot can hold buttons, links, or be empty.

Default

HTML

<nav class="navbar" aria-label="Navigation">
  <a href="#">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>
    Back
  </a>
  <span>Inbox</span>
  <span>
    <button type="button" aria-label="Compose">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
    </button>
  </span>
</nav>

With Multiple Actions

HTML

<nav class="navbar" aria-label="Navigation">
  <a href="#">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>
    Back
  </a>
  <span>Settings</span>
  <span>
    <button type="button" aria-label="Search">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
    </button>
    <button type="button" aria-label="More options">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
    </button>
  </span>
</nav>

Title Only

HTML

<nav class="navbar" aria-label="Navigation">
  <span></span>
  <span>Welcome</span>
  <span></span>
</nav>