GitHub

Components / Layout & Navigation / Tabs

Tabs stable

The white thumb slides between tabs, and the panel switches with it.

Preview
Overview panel — the essentials of the project live here.
<span class="tabs" data-tabs><span class="thumb"></span>
  <button class="on">Overview</button><button>Details</button><button>History</button>
</span>
<div class="tabpane" data-tabpane>Overview panel — the essentials of the project live here.</div>
.tabs{display:inline-flex;background:var(--k-seg);border-radius:10px;padding:3px;gap:2px;position:relative;font-family:var(--k-font)}
.tabs button{position:relative;z-index:1;border:0;background:transparent;font-family:var(--k-font);font-size:13px;font-weight:500;color:var(--k-ink-2);padding:7px 15px;border-radius:8px;cursor:pointer}
.tabs button.on{color:var(--k-ink)}
.tabs .thumb{position:absolute;top:3px;bottom:3px;background:var(--k-bg);border-radius:8px;box-shadow:0 1px 3px rgba(16,24,40,.14);transition:left .22s cubic-bezier(.3,.7,.3,1),width .22s cubic-bezier(.3,.7,.3,1)}
.tabpane{margin-top:14px;font-size:13.5px;color:var(--k-ink-2);line-height:1.8;background:var(--k-bg);border:1px solid var(--k-line);border-radius:10px;padding:16px 18px;width:100%;font-family:var(--k-font)}

document.querySelectorAll('[data-tabs]').forEach(tabs => {
  const thumb = tabs.querySelector('.thumb');
  const pane = tabs.parentElement.querySelector('[data-tabpane]');
  const btns = [...tabs.querySelectorAll('button')];
  const PANES = ['Overview panel — the essentials of the project live here.','Details panel — labor, day rates and travel, itemized.','History panel — created, edited and sent.'];
  function setTab(i){
    btns.forEach((b, j) => b.classList.toggle('on', j === i));
    thumb.style.left = btns[i].offsetLeft + 'px';
    thumb.style.width = btns[i].offsetWidth + 'px';
    if (pane) pane.textContent = PANES[i];
  }
  btns.forEach((b, i) => b.addEventListener('click', () => setTab(i)));
  setTab(0);
});

Usage

For peer sections of one object. Keep to 2–5 tabs with short labels.

Accessibility

Buttons in a row; the active tab is marked with a class and aria-selected in the full version.

Previous
Steps