Components · tabs
Tabs. Five looks, one keyboard model.
ARIA role="tablist" + arrow-key navigation + panel cross-fade. Pill, underlined, enclosed, vertical, icon-only variants.
01 · base
.lsd-tabs
Click a tab or use arrow keys to navigate. JS toggles aria-selected and data-active on the matching panel.
base
Default tabs
Arrow keys cycle, Home/End jump to ends.
Overview panel — summary cards and quick stats.
Stats panel — charts.
Settings panel — config form.
role="tablist" / role="tab"
02 · variants
Five variants
.lsd-tabs--pill
Pill tabs
Rounded pill indicator on a track background.
One panel content.
Two panel content.
Three panel content.
.lsd-tabs--pill
.lsd-tabs--underlined
Underlined
Animated underline below the active tab.
Recent panel content.
Popular panel content.
Trending panel content.
.lsd-tabs--underlined
.lsd-tabs--enclosed
Enclosed
Boxed tabs with a connected panel.
Tab A panel content.
Tab B panel content.
Tab C panel content.
.lsd-tabs--enclosed
.lsd-tabs--vertical
Vertical (left rail)
Side-mounted nav for settings screens.
Profile panel content.
Account panel content.
Billing panel content.
.lsd-tabs--vertical
.lsd-tabs--icon-only
Icon-only
Square footprint — for compact toolbars.
.lsd-tabs--icon-only
03 · animations
Panel cross-fade
All variants include a default fade-up on panel change. Chain .lsd-fx--slide-left or others on the panels for richer swaps.
default fade
Built-in
Press the tabs — the panel fades + nudges up.
Fade-up panel A.
Fade-up panel B.
/* default @keyframes lsd-tab-fade */
Components · LSD primitives