Scrollable Tabs for Mobile
Bootstrap 5 tabs that scroll horizontally on small screens, with fade edges, arrow buttons, scroll snapping and the active tab centered automatically.
Tabs
Switch between related views without leaving the page.
5 component(s)
Tabs with Photo Preview Panels
Tailwind CSS feature tabs that swap a large photo preview with a caption for each selected tab, with full keyboard support.
Animated Pill Tabs
Segmented pill tabs with a sliding, springy background, ARIA tabs keyboard support and fading panels, shown on an analytics card. Pure CSS and vanilla JS.
Vertical Tabs
Bootstrap 5 vertical nav-pills tabs styled as a settings panel with a dark sidebar, icons, fading content panes and a scrollable mobile tab strip.
Underline Tabs
Accessible Tailwind CSS tabs with a sliding underline indicator, arrow-key and Home/End navigation, count badge and scrollable tab bar on mobile.
What are tabs?
Tabs let users switch between related views within the same page without navigating away. A row of tab buttons sits above a set of panels, and only the panel for the selected tab is visible. Tabs are used for product details (description, specs, reviews), settings pages, pricing plans, code examples and dashboard views.
When to use tabs
Use tabs when content falls into a few parallel groups and users only need one at a time. Do not use them for sequential steps (use a stepper), for content users must compare side by side, or when there are so many tabs that they wrap onto several rows. If each view deserves its own URL, consider navigation links styled as tabs instead.
Accessible tabs best practices
- Follow the ARIA tabs pattern: a container with
role="tablist", buttons withrole="tab"and panels withrole="tabpanel". - Connect them with
aria-controlson each tab andaria-labelledbyon each panel, and setaria-selectedon the active tab. - Support keyboard navigation: arrow keys move between tabs, Home and End jump to the first and last, and only the active tab is in the Tab order.
- Make the active tab obvious with an underline, background or border, not colour alone.
- On small screens, let the tab list scroll horizontally or switch to an accordion layout.
- Avoid loading heavy content in hidden panels until they are first opened.
Bootstrap tabs, Tailwind and pure CSS
Tab snippets come in Bootstrap 6, Bootstrap 5, Tailwind CSS and pure CSS versions. Bootstrap 5 tabs use the nav-tabs and nav-pills classes with the tab plugin; the Bootstrap 6 alpha versions use ES module JavaScript and theme-* colour roles for the active state. Tailwind and pure CSS examples include underline, pill, segmented and vertical tabs with a small script for keyboard support. Filter by framework, try the keyboard behaviour in the live preview, then copy the HTML, CSS and JS or download the snippet.