Tab Bar — Free HTML CSS JS Tabbed Interface Snippet

A tab bar is one of the most common UI patterns on the web. Product pages use it to switch between Overview, Details, and Reviews. Dashboards use it to toggle between Analytics, Settings, and Reports. Web apps use it to organise content without navigating to a new page. Every time you need to show multiple panels of content in the same space, a tab bar is the right pattern — see also the sliding-indicator animated tabs and the vertical tabs variant.

This snippet gives you a complete, production-ready tab bar in plain HTML, CSS, and vanilla JavaScript. Three tab buttons switch three content panels. The active tab shows a coloured bottom border indicator. Clicking any tab instantly hides the previous panel and shows the new one. No libraries, no npm, no build step.

How the active underline indicator works

The underline technique used here is a classic CSS trick. The .tabs container has border-bottom: 2px solid #e2e8f0 — a light grey line across the full width. Each .tab button sits on top of that line with margin-bottom: -2px, which means the button overlaps the container border by exactly 2px. The active tab has border-bottom: 2px solid #6366f1 — a coloured border the same thickness as the container line. This coloured border sits exactly on top of the grey container line, visually replacing it for the active tab. The inactive tabs have border-bottom: 2px solid transparent, so they sit over the grey line without covering it.

How the panel switching works

The JavaScript uses a single switchTab(btn, panelId) function. When a tab is clicked, querySelectorAll('.tab').forEach(t => t.classList.remove('active')) removes the active class from all tabs, and querySelectorAll('.panel').forEach(p => p.classList.remove('active')) hides all panels. Then btn.classList.add('active') and document.getElementById(panelId).classList.add('active') highlight the clicked tab and show the matching panel. The panels use display: none and display: block — simple and reliable.

Adding more tabs

To add a fourth tab, add a new <button class="tab" onclick="switchTab(this,'p4')"> in the HTML and a matching <div class="panel" id="p4"> in the panels section. The CSS handles any number of tabs automatically — no changes needed.

Customising the active colour

The active indicator colour is #6366f1 (indigo). To change it, find .tab.active in the CSS panel and update both color and border-bottom-color to your brand colour. Change .tabs { border-bottom-color } if you want to update the inactive line colour too.

Accessibility improvements

For a production site, add role="tablist" to the .tabs container and role="tab" to each button. Add aria-selected="true" to the active tab and aria-selected="false" to the others — update these in the switchTab function alongside the classList changes. Add role="tabpanel" to each panel div. These additions make the tab bar fully usable with keyboard navigation and screen readers.

Saving your customised version

After editing the snippet to match your project, click "Save as" in the editor header, type a name, and press Enter. The version saves to your browser's IndexedDB and appears in the Saved tab in the sidebar. Connect GitHub Gist via the GitHub button to back it up and restore it on any device.