Navbar

Primary navigation.

html

<nav class="navbar navbar--light " style="--accent:#E8A020;" aria-label="Primary">
  <span class="navbar__brand">Acme</span>
  <div class="navbar__links">
    <a class="navbar__link is-active" href="#" aria-current="page">Dashboard</a>
    <a class="navbar__link" href="#">Projects</a>
    <a class="navbar__link" href="#">Team</a>
  </div>
</nav>
<style>
.navbar { display: flex; align-items: center; gap: 32px; padding: 14px 20px; border-radius: 12px; font: 14px system-ui, sans-serif; }
.navbar--light { background: #FAF7F2; color: #241430; }
.navbar--dark { background: #241430; color: #FAF7F2; }
.navbar--elevated { box-shadow: 0 6px 20px rgba(36,20,48,.16); }
.navbar__brand { font-weight: 700; font-size: 16px; }
.navbar__links { display: flex; gap: 20px; }
.navbar__link { text-decoration: none; color: inherit; opacity: .65; padding: 4px 2px; border-bottom: 2px solid transparent; }
.navbar__link.is-active { opacity: 1; border-bottom-color: var(--accent); font-weight: 600; }
.navbar__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; opacity: 1; }
</style>

tailwind

<nav aria-label="Primary" class="navbar-tw navbar-tw--light  flex items-center gap-8 px-5 py-3.5 rounded-xl font-sans text-sm" style="--accent:#E8A020;">
  <span class="font-bold text-base">Acme</span>
  <div class="flex gap-5">
    <a class="pb-1 border-b-2 font-semibold no-underline" href="#" aria-current="page" style="border-color:#E8A020;color:inherit;">Dashboard</a>
    <a class="pb-1 border-b-2 border-transparent opacity-65 no-underline" href="#" style="color:inherit;">Projects</a>
    <a class="pb-1 border-b-2 border-transparent opacity-65 no-underline" href="#" style="color:inherit;">Team</a>
  </div>
</nav>
<style>
.navbar-tw--light { background: #FAF7F2; color: #241430; }
.navbar-tw--dark { background: #241430; color: #FAF7F2; }
.navbar-tw a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
</style>

react

export function Navbar({
  brand = "Acme",
  activeLabel = "Dashboard",
  variant = "light",
  accent = "#E8A020",
  sticky = false,
}) {
  const dark = variant === "dark";
  return (
    <nav aria-label="Primary" style={{ display: "flex", alignItems: "center", gap: 32, padding: "14px 20px", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 14, background: dark ? "#241430" : "#FAF7F2", color: dark ? "#FAF7F2" : "#241430", boxShadow: sticky ? "0 6px 20px rgba(36,20,48,.16)" : "none" }}>
      <span style={{ fontWeight: 700, fontSize: 16 }}>{brand}</span>
      <div style={{ display: "flex", gap: 20 }}>
        <a href="#" aria-current="page" style={{ textDecoration: "none", color: "inherit", opacity: 1, paddingBottom: 4, borderBottom: "2px solid " + accent, fontWeight: 600 }}>{activeLabel}</a>
        <a href="#" style={{ textDecoration: "none", color: "inherit", opacity: .65, paddingBottom: 4, borderBottom: "2px solid transparent" }}>Projects</a>
        <a href="#" style={{ textDecoration: "none", color: "inherit", opacity: .65, paddingBottom: 4, borderBottom: "2px solid transparent" }}>Team</a>
      </div>
    </nav>
  );
}