What Is Tabs (Tabbed Content)
Tabs (tabbed content) is a UI component which organizes and displays multiple content sections in a single container with a tab navigation.
Your users are allowed to switch between these content sections by clicking o the tabs.
The Best Tabs Components
Originally Published Nov 13 2017, updated Jan 03 2023
Table of contents:
jQuery Tabs Plugins:
A simple jQuery plugin for quickly creating content Tabs which allow you organize larger groups of content into a tab interface. It will automatically turn the content Tabs into a content accordion for mobile devices. You can change the media query break point through CSS to set the accordion, when screen resolution changed.
A tiny jQuery plugin for creating responsive grid or tab layouts which allow the user to expand / hide web content by clicking on their corresponding grid/tab items.
A lightweight (~2kb minified) jQuery plugin that allows you to create tabbed content with support for animation effect, tabs rotation and trigger events.
A simple and clean jQuery plugin that enables you to organize DIV contents into an animated tab interface with awesome CSS3 animations.
A lightweight jQuery tabs plugin to create flat style tabbed content panels with some cool transition effects powered by CSS3 animations.
Vanilla JS Tabs Libraries:
Pure CSS Tabs Components:
A pretty cool, animated tabs component / widget / control with subtle fade transition effects. Made using CSS and CSS3 transitions.
A pure CSS responsive tab view that will be automatically converted into a vertical accordion when the screen size is smaller than a breakpoint specified in the CSS3 media queries. Heavily based on CSS3 flex box model.
A pure CSS implementation of a cool tabs component with a fancy 3D cube flip animation based on CSS3 3D transforms.