CSS Showcase · Live Demo

Tabs — one component, five patterns.

Underline bars, segmented pills, a vertical side rail, a scroll-snapping mobile strip, and a bottom tab bar. Disabled tabs are skipped by keyboard, long labels truncate, and the tablist stays overflow-safe — pick a device, then pick a pattern for that device.

Featured demo

mobile · scroll

Overview

Snapshot of today's activity, revenue and top events.

Visits
482
Signups
137
Revenue
916
Churn
24

Try it: ← → skip disabled tabs, Home End jump to first / last enabled.

mobile design patterns

tabs-scroll.css
/* Mobile scroll-snap strip */
.tablist[data-pattern="scroll"] {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  border-bottom: 1px solid hsl(var(--border));
}
.tablist[data-pattern="scroll"] .tab {
  scroll-snap-align: start;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 9rem;
  border-bottom: 2px solid transparent;
}
.tab-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

CSS & a11y features used

  • • Container queries
  • • Overflow-x scroll + snap
  • • Roving tabindex
  • • Skips aria-disabled tabs
  • • Truncation via min-width:0
  • • aria-orientation keys