Vertical Tabs — Side Tab Navigation Snippet

<div class="vtabs">
  <div class="vtab-list" role="tablist" aria-orientation="vertical">
    <button class="vtab active" role="tab" aria-selected="true"  aria-controls="p1" id="t1">
      <svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
      Overview
    </button>
    <button class="vtab" role="tab" aria-selected="false" aria-controls="p2" id="t2">
      <svg viewBox="0 0 24 24"><path d="M12 20V10M18 20V4M6 20v-4"/></svg>
      Analytics
    </button>
    <button class="vtab" role="tab" aria-selected="false" aria-controls="p3" id="t3">
      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-2.9 1.2V22a2 2 0 0 1-4 0v-.1A1.7 1.7 0 0 0 6 20.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0-1.2-2.9H2a2 2 0 0 1 0-4h.1A1.7 1.7 0 0 0 3.7 6l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3H8.5A1.7 1.7 0 0 0 9.6 2.1V2a2 2 0 0 1 4 0v.1a1.7 1.7 0 0 0 2.9 1.2l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9v.1a1.7 1.7 0 0 0 1.6 1H22a2 2 0 0 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg>
      Settings
    </button>
  </div>

  <div class="vtab-panels">
    <div class="vtab-panel active" role="tabpanel" id="p1" aria-labelledby="t1">
      <h3 class="vtab-title">Overview</h3>
      <p>A snapshot of your workspace — recent activity, quick stats, and shortcuts to everything you use most.</p>
    </div>
    <div class="vtab-panel" role="tabpanel" id="p2" aria-labelledby="t2" hidden>
      <h3 class="vtab-title">Analytics</h3>
      <p>Track growth over time with charts for traffic, conversions, and engagement, broken down by source.</p>
    </div>
    <div class="vtab-panel" role="tabpanel" id="p3" aria-labelledby="t3" hidden>
      <h3 class="vtab-title">Settings</h3>
      <p>Manage your profile, team members, billing, and notification preferences all in one place.</p>
    </div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: system-ui, sans-serif;
  background: #f1f5f9;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}

.vtabs {
  display: flex;
  width: 100%; max-width: 560px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15,23,42,0.06);
}

.vtab-list {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px;
  border-right: 1px solid #e2e8f0;
  background: #f8fafc;
}

.vtab {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px 11px 14px;
  border: none; background: none;
  border-radius: 10px;
  font-size: 14px; font-weight: 600; color: #64748b; font-family: inherit;
  cursor: pointer; text-align: left; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.vtab svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.vtab:hover { background: #eef2ff; color: #475569; }
.vtab.active { background: #6366f1; color: #fff; }

.vtab-panels { flex: 1; padding: 28px; min-width: 0; }

.vtab-panel { animation: fade 0.25s ease; }
.vtab-title { font-size: 18px; font-weight: 800; color: #1e293b; margin-bottom: 10px; }
.vtab-panel p { font-size: 14px; color: #475569; line-height: 1.7; }

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

@media (max-width: 480px) {
  .vtabs { flex-direction: column; }
  .vtab-list { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid #e2e8f0; }
}

function initVerticalTabs() {
  const tabs = Array.from(document.querySelectorAll('.vtab'));
  if (!tabs.length) return;                // not mounted yet
  const panels = Array.from(document.querySelectorAll('.vtab-panel'));

  function select(i) {
    tabs.forEach((t, j) => {
      const on = i === j;
      t.classList.toggle('active', on);
      t.setAttribute('aria-selected', String(on));
      t.tabIndex = on ? 0 : -1;
    });
    panels.forEach((p, j) => {
      p.classList.toggle('active', i === j);
      p.hidden = i !== j;
    });
  }

  tabs.forEach((tab, i) => {
    tab.addEventListener('click', () => select(i));
    // Arrow-key navigation between tabs (WAI-ARIA tabs pattern)
    tab.addEventListener('keydown', (e) => {
      if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;
      e.preventDefault();
      const next = e.key === 'ArrowDown' ? (i + 1) % tabs.length : (i - 1 + tabs.length) % tabs.length;
      select(next);
      tabs[next].focus();
    });
  });
}

// Run after the DOM mounts (framework exports run snippet JS before render)
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initVerticalTabs);
else requestAnimationFrame(initVerticalTabs);