Animated Tab Bar

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #0f172a;
  color: #f1f5f9;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.tabs-wrapper {
  width: min(640px, 100%);
}

/* ── Tab bar ── */
.tabs {
  position: relative;
  display: flex;
  border-bottom: 2px solid rgba(255, 255, 255, 0.08);
  gap: 0;
}

.tab {
  position: relative;
  z-index: 1;
  padding: 0.75rem 1.25rem;
  background: transparent;
  border: none;
  font-size: 0.9rem;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.tab:hover {
  color: #94a3b8;
}

.tab.active {
  color: #f1f5f9;
}

/* ── Sliding indicator ── */
.tab-indicator {
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 2px;
  background: #38bdf8;
  border-radius: 2px;
  transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* ── Panels ── */
.panels {
  padding: 2rem 0;
}

.panel {
  animation: panel-in 0.2s ease forwards;
}

.panel[hidden] {
  display: none;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #f1f5f9;
}

.panel p {
  font-size: 0.925rem;
  color: #64748b;
  line-height: 1.65;
}

(function () {
  "use strict";

  const tabBar = document.getElementById("tabs");
  const tabs = tabBar.querySelectorAll(".tab");
  const indicator = tabBar.querySelector(".tab-indicator");

  function moveIndicator(tab) {
    indicator.style.left = tab.offsetLeft + "px";
    indicator.style.width = tab.offsetWidth + "px";
  }

  function activate(tab) {
    // Update tab states
    tabs.forEach((t) => {
      const isActive = t === tab;
      t.classList.toggle("active", isActive);
      t.setAttribute("aria-selected", isActive);
    });

    // Show / hide panels
    tabs.forEach((t) => {
      const panel = document.getElementById(t.getAttribute("aria-controls"));
      if (panel) panel.hidden = t !== tab;
    });

    moveIndicator(tab);
  }

  // Click handler
  tabs.forEach((tab) => {
    tab.addEventListener("click", () => activate(tab));
  });

  // Keyboard: arrow keys for tab navigation
  tabBar.addEventListener("keydown", (e) => {
    const list = Array.from(tabs);
    const idx = list.indexOf(document.activeElement);
    if (idx === -1) return;

    if (e.key === "ArrowRight") {
      e.preventDefault();
      const next = list[(idx + 1) % list.length];
      next.focus();
      activate(next);
    } else if (e.key === "ArrowLeft") {
      e.preventDefault();
      const prev = list[(idx - 1 + list.length) % list.length];
      prev.focus();
      activate(prev);
    }
  });

  // Set indicator on load (no transition on first paint)
  const activeTab = tabBar.querySelector(".tab.active") || tabs[0];
  indicator.style.transition = "none";
  moveIndicator(activeTab);
  // Re-enable transition after first frame
  requestAnimationFrame(() => {
    indicator.style.transition = "";
  });
})();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Animated Tab Bar</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="tabs-wrapper">
    <div class="tabs" role="tablist" id="tabs">
      <button class="tab active" role="tab" aria-selected="true"  aria-controls="panel-overview"  id="tab-overview">Overview</button>
      <button class="tab"        role="tab" aria-selected="false" aria-controls="panel-analytics" id="tab-analytics">Analytics</button>
      <button class="tab"        role="tab" aria-selected="false" aria-controls="panel-settings"  id="tab-settings">Settings</button>
      <button class="tab"        role="tab" aria-selected="false" aria-controls="panel-billing"   id="tab-billing">Billing</button>
      <!-- Sliding indicator -->
      <span class="tab-indicator" aria-hidden="true"></span>
    </div>

    <div class="panels">
      <div class="panel active" id="panel-overview"  role="tabpanel" aria-labelledby="tab-overview">
        <h3>Overview</h3>
        <p>Your project at a glance — traffic, conversions, and key metrics all in one place.</p>
      </div>
      <div class="panel" id="panel-analytics"  role="tabpanel" aria-labelledby="tab-analytics" hidden>
        <h3>Analytics</h3>
        <p>Deep-dive into page views, sessions, bounce rates, and funnel performance.</p>
      </div>
      <div class="panel" id="panel-settings"   role="tabpanel" aria-labelledby="tab-settings"  hidden>
        <h3>Settings</h3>
        <p>Configure your workspace, integrations, and notification preferences.</p>
      </div>
      <div class="panel" id="panel-billing"    role="tabpanel" aria-labelledby="tab-billing"   hidden>
        <h3>Billing</h3>
        <p>Manage your subscription plan, invoices, and payment methods.</p>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

A tab navigation component with a sliding active indicator that smoothly follows the selected tab. The indicator position and width are driven by real DOM measurements, so it works with any tab label length.

How it works

On click, JS reads the active tab’s offsetLeft and offsetWidth
CSS custom properties --indicator-left and --indicator-width are updated on the tab bar element
The indicator <span> transitions to the new position via transition: left 0.3s ease, width 0.3s ease
Tab panels fade in with a short opacity transition

Variants

Swap border-bottom indicator for a filled background pill by changing the indicator CSS
Add overflow-x: auto to the tab list for scrollable tabs on mobile

When to use it

Settings pages
Dashboard sections
Content category filters