Tab Bar

Navigation between related views.

html

<nav class="tabbar tabbar--underline" style="--accent:#BFD9F2;--thickness:3px;" aria-label="Section">
  <a class="tabbar__tab is-active" href="#" aria-current="page">
    Overview
    <span class="tabbar__badge"></span>
  </a>
  <a class="tabbar__tab" href="#">Activity</a>
  <a class="tabbar__tab" href="#">Settings</a>
</nav>
<style>
.tabbar { display: flex; gap: 4px; font: 500 14px system-ui, sans-serif; background: #FAF7F2; padding: 6px; border-radius: 10px; width: fit-content; }
.tabbar__tab { position: relative; padding: 8px 16px; border-radius: 8px; color: #241430; text-decoration: none; opacity: .6; }
.tabbar__tab.is-active { opacity: 1; }
.tabbar__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tabbar--underline .tabbar__tab.is-active { box-shadow: inset 0 calc(var(--thickness) * -1) 0 var(--accent); }
.tabbar--pill .tabbar__tab.is-active { background: var(--accent); }
.tabbar--boxed .tabbar__tab.is-active { box-shadow: inset 0 0 0 var(--thickness) var(--accent); }
.tabbar__badge { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 6px; vertical-align: middle; }
</style>

tailwind

<nav aria-label="Section" class="tab-tw tab-tw--underline flex gap-1 bg-[#FAF7F2] p-1.5 rounded-xl font-medium text-sm w-fit" style="--accent:#BFD9F2;--thickness:3px;">
  <a href="#" aria-current="page" class="tab-tw__tab tab-tw__tab--active relative px-4 py-2 rounded-lg text-[#241430]">
    Overview
    <span class="inline-block w-1.5 h-1.5 rounded-full ml-1.5 align-middle" style="background:#BFD9F2"></span>
  </a>
  <a href="#" class="px-4 py-2 rounded-lg text-[#241430]/60">Activity</a>
  <a href="#" class="px-4 py-2 rounded-lg text-[#241430]/60">Settings</a>
</nav>
<style>
.tab-tw--underline .tab-tw__tab--active { box-shadow: inset 0 calc(var(--thickness) * -1) 0 var(--accent); }
.tab-tw--pill .tab-tw__tab--active { background: var(--accent); }
.tab-tw--boxed .tab-tw__tab--active { box-shadow: inset 0 0 0 var(--thickness) var(--accent); }
</style>

react

export function TabBar({
  label = "Overview",
  variant = "underline",
  accent = "#BFD9F2",
  thickness = 3,
  badge = true,
}) {
  const activeStyle = {
    underline: { boxShadow: `inset 0 ${-thickness}px 0 ${accent}` },
    pill: { background: accent },
    boxed: { boxShadow: `inset 0 0 0 ${thickness}px ${accent}` },
  }[variant] ?? {};
  return (
    <nav aria-label="Section" style={{ display: "flex", gap: 4, background: "#FAF7F2", padding: 6, borderRadius: 10, width: "fit-content",
      fontFamily: "system-ui, sans-serif", fontSize: 14, fontWeight: 500 }}>
      <a href="#" aria-current="page" style={{ position: "relative", padding: "8px 16px", borderRadius: 8, color: "#241430", textDecoration: "none", ...activeStyle }}>
        {label}
        {badge && <span style={{ display: "inline-block", width: 6, height: 6, borderRadius: "50%", background: accent, marginLeft: 6 }} />}
      </a>
      <a href="#" style={{ padding: "8px 16px", borderRadius: 8, color: "#241430", opacity: .6, textDecoration: "none" }}>Activity</a>
      <a href="#" style={{ padding: "8px 16px", borderRadius: 8, color: "#241430", opacity: .6, textDecoration: "none" }}>Settings</a>
    </nav>
  );
}