GitHub

Blocks / Site Header

Site Header beta

The bar at the top of every page: mark, navigation, and the one action that matters.

Preview

Built from: Button — include their CSS alongside this block.

<header class="k-hdr" style="max-width:680px">
  <div class="k-hdr-in">
    <a class="brand" href="#"><span class="mk"><i></i></span>Acme Studio</a>
    <nav aria-label="Primary">
      <a href="#">Product</a><a href="#">Pricing</a><a href="#">Docs</a><a href="#">Changelog</a>
    </nav>
    <div class="acts">
      <a class="btn btn-ghost btn-md" href="#">Sign in</a>
      <a class="btn btn-pri btn-md" href="#">Get started</a>
    </div>
    <button class="burger" data-hdr-btn type="button" aria-expanded="false" aria-label="Open menu"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg></button>
  </div>
  <div class="panel" data-hdr-panel>
    <a href="#">Product</a><a href="#">Pricing</a><a href="#">Docs</a><a href="#">Changelog</a><a href="#">Sign in</a>
  </div>
</header>
.k-hdr{font-family:var(--k-font);text-align:left;color:var(--k-ink);border:1px solid var(--k-line);border-radius:14px;background:var(--k-bg);overflow:hidden}
.k-hdr-in{display:flex;align-items:center;gap:26px;padding:13px 18px}
.k-hdr .brand{display:flex;align-items:center;gap:9px;font-weight:650;font-size:15px;letter-spacing:-.01em;color:var(--k-ink);text-decoration:none}
.k-hdr .brand .mk{width:22px;height:22px;border:2.5px solid var(--k-ink);border-radius:7px;display:grid;place-items:center}
.k-hdr .brand .mk i{width:7px;height:7px;border-radius:2.5px;background:var(--k-core);display:block}
.k-hdr nav{display:flex;gap:20px}
.k-hdr nav a{font-size:13.5px;color:var(--k-ink-2);text-decoration:none;font-weight:500}
.k-hdr nav a:hover{color:var(--k-ink)}
.k-hdr .acts{margin-left:auto;display:flex;gap:9px;align-items:center}
.k-hdr .burger{display:none;width:36px;height:36px;border:1px solid var(--k-line);background:var(--k-bg);border-radius:9px;color:var(--k-ink);place-items:center;cursor:pointer;margin-left:auto}
.k-hdr .panel{display:none;border-top:1px solid var(--k-line);padding:10px 18px 14px}
.k-hdr .panel a{display:block;padding:8px 0;font-size:14px;color:var(--k-ink-2);text-decoration:none;font-weight:500}
@media (max-width:640px){.k-hdr nav,.k-hdr .acts{display:none}.k-hdr .burger{display:grid}.k-hdr .panel.open{display:block}}

const hdrBtn = document.querySelector('[data-hdr-btn]');
const hdrPanel = document.querySelector('[data-hdr-panel]');
hdrBtn.addEventListener('click', () => {
  const open = hdrPanel.classList.toggle('open');
  hdrBtn.setAttribute('aria-expanded', String(open));
});

Usage

For marketing sites and app shells alike. Keep the links to five; the sixth thing you want up here is what the button is for.

Previous
Site Footer