10 Best Tabs Components In JavaScript & CSS (2020 Update)

Here is a constantly updated list of the 10 best JavaScript and CSS based tabs components (tabbed interfaces) we published on CSSScript.com.

I hope you like it and don’t forget to spread the world.

Originally Published Nov 13 2017, updated Feb 20 2020

1. chrome-tabs

chrome-tabs

Demo Download

Chrome-style draggable tabs in HTML/CSS.


2. Tabby.js

Simple & Mobile-first Toggle Tabs – Tabby.js

Demo Download

Tabby.js is a simple, lightweight JavaScript library for creating mobile-first toggle tabs with minimal effort.


3. Responsive Full Width Tabs

Responsive Full Width Tabs

Demo Download

100% width tabbed content with some example media queries for smaller screens.


4. Tiny Nested Tabs With Vanilla JavaScript – Tabbis.js

tabbis.js

Demo Download

Tabbis.js is a lightweight, pure JavaScript library for generating nice, clean, nested tabs from plain HTML structure.


5. Responsive Tabbed Content With JavaScript And CSS3 – responsive-tabs

Responsive Tabbed Content With JavaScript And CSS3 - responsive-tabs

Demo Download

A responsive, minimal, clean tabs component that falls back to a linear content display when JavaScript is disabled.


6. Responsive CSS Only Accordion & Tabs Component

responsive-css-only-accordion-tabs-component

Demo Download

Yet another pure CSS tabs that will be automatically converted into a vertical accordion interface on mobile devices. Based on CSS flexbox and radio/label hacks.


7. Creating A Stylish Tabs Control Using Pure CSS / CSS3

Creating A Stylish Tabs Control Using Pure CSS / CSS3

Demo Download

A pretty cool, animated tabs component / widget / control with subtle fade transition effects. Made using CSS and CSS3 transitions.


8. Mobile Tab Navigation UI In JavaScript And CSS

Mobile Tab Navigation UI In JavaScript And CSS

Demo Download

A mobile-inspired tab navigation UI that allows the visitor to switch between screens by clicking/tapping the tabs.


9. Modern Tabbing System In Vanilla JavaScript – Tabby

Modern Tabbing System In Vanilla JavaScript – Tabby

Demo Download

Tabby is an ultra-light, pretty simple tabbing system written in pure vanilla JavaScript (ES6).


10. Accessible Tabs Component – tab-container

Accessible Tabs Component – tab-container

Demo Download

tab-container is an easy, accessible tabs compont written in Vanilla JavaScript.


More Resources:

To find more JavaScript and/or CSS libraries to showcase your in a toggleable container, don’t forget to check out our other awesome resources.

You Might Be Interested In: