Tabs
Switch between related content panels without navigating away — keeps context while organizing dense information.
Also called: tabbed navigation, segmented content, tab bar
Overview
A clean tab interface groups related content. Only one panel is visible at a time, reducing visual clutter.
Features
Keyboard accessible, animated transitions, and an active indicator underline. Works with any number of tabs.
Pricing
Swap tab panels by toggling an .active class on both the button and corresponding content div.
How it works
Tab buttons carry a data-tab attribute matching a panel ID. Clicking updates aria-selected and toggles visibility.