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 · scrollOverview
Snapshot of today's activity, revenue and top events.
Visits
482
Signups
137
Revenue
916
Churn
24
Analytics & Realtime Metrics
Audience Segments
A
AriaB
BenC
CassD
DevBilling & Invoicing History
Upgrade to Pro to access billing
Settings
Admin Console — Restricted
Requires admin role
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 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-disabledtabs - • Truncation via
min-width:0 - •
aria-orientationkeys