Code Front (s)

41 CSS Tabs

Collection of free 41 CSS Tabs. You can find Animation, vertical, and responsive tabs with Live demos on each CSS tabs and more details.

Table of Contents

Related posts

Horizontal Tabs

↓

Author

  • Rafaela Lucas

Made with

  • HTML / SCSS / JS

Created on

  • January 25,2019

Updated on

  • November 08,2019

About the Code

Tabs – CSS + JS

Useful Links:Live Demo | Download
Dependency:–
Responsive:yes
Animation:yes
↑ ↓

Author

  • Biliana

Made with

  • HTML / SCSS / JS

Created on

  • February 05,2017

Updated on

  • December 22,2017

About the Code

Flying cards tabs

Cards fly away randomly.

Useful Links:Live Demo | Download
Dependency:jquery.js
Responsive:no
Animation:yes
↑ ↓

Author

  • Jeremy Hawes

Made with

  • Pug / SCSS

Created on

  • October 14,2014

Updated on

  • October 14,2014

About the Code

Tabbed navigation with radio buttons

Useful Links:Live Demo | Download
Dependency:–
Responsive:no
Animation:yes
↑ ↓

Author

  • Joseph Fusco

Made with

  • HTML / SCSS

Created on

  • July 06,2015

Updated on

  • January 27,2017

About the Code

Transitioning Between Variable Heights with CSS Tabs

Useful Links:Live Demo | Download
Dependency:–
Responsive:yes
Animation:yes
↑ ↓
Demo image:https://codefronts.com/wp-content/uploads/2023/05/tabs.png

Author

  • Nikita Jadhao

Made with

  • HTML / Less / JS

Created on

  • June 10,2016

Updated on

  • June 10,2016

About the Code

Tabs

Useful Links:Live Demo | Download
Dependency:jquery.js
Responsive:no
Animation:no
↑ ↓
Demo image:https://codefronts.com/wp-content/uploads/2023/05/tabs-widget-nojs.png

Author

  • Dmitry Sharabin

Made with

  • HTML / SCSS

Created on

  • October 16,2019

Updated on

  • April 01,2022

About the Code

Tabs Widget. No JS!

Useful Links:Live Demo | Download
Dependency:–
Responsive:no
Animation:no
↑ ↓
Demo image:https://codefronts.com/wp-content/uploads/2023/05/folder-tabs.png

Author

  • Olivia Ng

Made with

  • HTML / SCSS / JS

Created on

  • August 19,2021

Updated on

  • August 23,2021

About the Code

Folder Tabs

Useful Links:Live Demo | Download
Dependency:–
Responsive:yes
Animation:no
↑ ↓

Author

  • Flávio Amaral

Made with

  • HTML / CSS / JS

Created on

  • April 11,2021

Updated on

  • May 12,2021

About the Code

Jello Tab Bar (Animated)

Animated Mobile Tab Bar.

Useful Links:Live Demo | Download
Dependency:–
Responsive:no
Animation:yes
↑ ↓

Author

  • Håvard Brynjulfsen

Made with

  • HTML / SCSS

Created on

  • April 11,2020

Updated on

  • April 13,2020

About the Code

Sliding tabs | CSS transitions only

Useful Links:Live Demo | Download
Dependency:–
Responsive:yes
Animation:yes
↑ ↓

Author

  • Milan Raring

Made with

  • HTML / SCSS

Created on

  • January 02,2020

Updated on

  • January 23,2020

About the Code

Tabbar animation – Only CSS

Awesome tab bar animation

Useful Links:Live Demo | Download
Dependency:–
Responsive:no
Animation:yes
↑ ↓

Author

  • Florin Pop

Made with

  • HTML / CSS / JS

Created on

  • April 15,2019

Updated on

  • April 15,2019

About the Code

Weekly Coding Challenge #3 – Tab Bar Navigation

Useful Links:Live Demo | Download
Dependency:Font Awesome
Responsive:no
Animation:yes
↑ ↓

Author

  • Irem Lopsum

Made with

  • HTML / SCSS / Babel

Created on

  • February 01,2018

Updated on

  • February 06,2018

About the Code

Tabs with elastic border

Useful Links:Live Demo | Download
Dependency:react.js react-dom.js
Responsive:no
Animation:yes
↑ ↓

Author

  • Andy Tran

Made with

  • Pug / SCSS / JS

Created on

  • November 09,2015

Updated on

  • November 09,2015

About the Code

Tabs Modal

This is a material-inspired tab modal that gives the user a smooth transition between each panel. The navigation features the iconic Material Design Ripple effect, along with a border that slides around to give the user a hint of which tab is active.

Useful Links:Live Demo | Download | Tutorial
Dependency:jquery.js
Responsive:no
Animation:yes
↑ ↓
Demo image:https://codefronts.com/wp-content/uploads/2023/05/accessible-and-responsive-tabs-no-js.png

Author

  • Poppe1219 – Frontend and Backend Developer

Made with

  • HTML / CSS

Created on

  • July 22,2014

Updated on

  • September 12,2016

About the Code

responsive tabs, no JS

Html and Css only (No JS).

Features:

  • No JavaScript is required.
  • Flexible. Stretches with the surrounding space and the tab content.
  • Can handle multiple tab groups and nested tab groups.
  • Retains correct tab order, between tabs and content, as well as the surrounding.
  • Tabs can be navigated by using the arrow keys:
    • left / up – moves left / up.
    • right / down – moves right / down.
  • Responsive. Switches between standard/left tabs and the stacked full-width tabs, at a specified viewport width.
  • If there are many tabs or very long tab captions, in large screen mode the standard tabs break off in multiple rows if there is not enough space.

To do:

  • Verify accessibility. Problems/solutions?
  • Verify browser compatibility. Currently tested on:
    • Chrome 34 (Linux), Chrome 36 (Android/Windows).
    • Firefox 27, 29, 31 (Windows / Linux).
    • Internet Explorer 11.
    • Opera 12 (Windows).
Useful Links:Live Demo | Download
Dependency:Font Awesome
Responsive:yes
Animation:yes
↑ ↓

Author

  • Wendy

Made with

  • HTML / CSS

Created on

  • November 11,2019

Updated on

  • June 09,2020

About the Code

CSS Tab

Using radio buttons to make tab navigation in only CSS.

Useful Links:Live Demo | Download
Dependency:–
Responsive:no
Animation:yes
↑ ↓

Author

  • dhs

Made with

  • HTML / CSS

Created on

  • June 29,2014

Updated on

  • June 30,2014

About the Code

Pure CSS tabs without Javascript

CSS tabs. Without Javascript.

Useful Links:Live Demo | Download
Dependency:–
Responsive:no
Animation:yes
↑ ↓

Author

  • Izzy Skye

Made with

  • HTML / CSS

Created on

  • October 06,2014

Updated on

  • October 10,2014

About the Code

Pure CSS Tab Navigation

Using radio buttons to make tab navigation in only CSS.

Useful Links:Live Demo | Download
Dependency:–
Responsive:no
Animation:yes
↑ ↓
Demo image:https://codefronts.com/wp-content/uploads/2023/05/simple-tabs-widget.png

Author

  • Kevin Lesht

Made with

  • Haml / SCSS / JS

Created on

  • November 13,2014

Updated on

  • January 01,2016

About the Code

Simple Tabs Widget

A simple implementation of jQuery UI tabs. Content is structured, and styled, to serve as a pattern for article excerpts.

Useful Links:Live Demo | Download
Dependency:Font Awesome jquery.js jquery-ui.js
Responsive:no
Animation:no
↑ ↓

Author

  • Lewi Hussey

Made with

  • HTML / SCSS / JS

Created on

  • June 28,2015

Updated on

  • June 28,2015

About the Code

Adaptive tabs

Tabs that animate to the height of their content when switched.
// With bonus color switcher

Useful Links:Live Demo | Download
Dependency:jquery.js
Responsive:no
Animation:yes
↑ ↓

Author

  • Srdjan Pajdic

Made with

  • HTML / SCSS / JS

Created on

  • February 09,2014

Updated on

  • August 29,2017

About the Code

Awesome Tabs

Useful Links:Live Demo | Download
Dependency:jquery.js
Animation:yes
↑ ↓
Demo image:https://codefronts.com/wp-content/uploads/2023/05/pure-css-tabs.png

Author

  • Wallace Erick

Made with

  • HTML / SCSS

Created on

  • October 05,2013

Updated on

  • November 26,2016

About the Code

Pure CSS Tabs

Just CSS, no JS!

Useful Links:Live Demo | Download
Dependency:–
Responsive:no
Animation:no
↑ ↓
Demo image:https://codefronts.com/wp-content/uploads/2023/05/purecss-tabs.png

Author

  • Renato Ribeiro

Made with

  • HTML / SCSS

Created on

  • October 27,2014

Updated on

  • March 28,2015

About the Code

PureCSS Tabs

Useful Links:Live Demo | Download
Dependency:–
Animation:no
↑ ↓
Demo image:https://codefronts.com/wp-content/uploads/2023/05/svg-tabs.png

Author

  • Chris Coyier

Made with

  • HTML / SCSS / JS

Created on

  • November 27,2013

Updated on

  • December 04,2013

About the Code

SVG Tabs

Useful Links:Live Demo | Download
Dependency:jquery.js
↑ ↓

Author

  • Hemn Chawroka

Made with

  • Haml / CSS / JS

Created on

  • January 09,2015

Updated on

  • February 03,2016

About the Code

Modern Tabs Design with pure CSS

Useful Links:Live Demo | Download
Dependency:–
Responsive:no
↑ ↓

Author

  • Flkt Crnpio

Made with

  • HTML / CSS

Created on

  • June 24,2016

Updated on

  • April 16,2022

About the Code

Animated transition tabs with checkboxes

Make tabs without javascript.

Useful Links:Live Demo | Download | Tutorial
Dependency:–
Responsive:yes
Animation:yes
↑ ↓

Author

  • John D. Jameson

Made with

  • HTML / Sass / JS

Created on

  • April 26,2014

Updated on

  • April 28,2014

About the Code

Simple Tabs

Nothing too fancy going on here. Just working on some clean-looking tabs for my blog.

Useful Links:Live Demo | Download
Dependency:jquery.js
Responsive:yes
Animation:yes
↑ ↓

Author

  • Ben Mildren

Made with

  • HTML / SCSS

Created on

  • April 21,2015

Updated on

  • April 23,2015

About the Code

Material Design CSS Only Tabs

Useful Links:Live Demo | Download
Dependency:–
Responsive:no
Animation:no
↑ ↓

Author

  • woranov

Made with

  • HTML / SCSS

Created on

  • September 08,2016

Updated on

  • September 09,2016

About the Code

Pure CSS Tabs With Indicator

Useful Links:Live Demo | Download
Dependency:–
Responsive:yes
Animation:yes
↑ ↓

Author

  • Alex Lime

Made with

  • HTML / CSS / jQuery

Created on

  • August 27,2013

Updated on

  • February 01,2017

About the Code

Light Tabs

Useful Links:Live Demo | Download
Dependency:jquery
Responsive:no
Animation:yes
↑ ↓

Author

  • Kyle Edwards

Made with

  • HTML / CSS

Created on

  • April 29,2014

Updated on

  • October 02,2014

About the Code

CSS Tabs

Uses CSS transitions instead of jQuery

Useful Links:Live Demo | Download
Dependency:–
Responsive:no
Animation:yes
↑ ↓

Author

  • jake

Made with

  • HTML / SCSS

Created on

  • June 25,2014

Updated on

  • April 08,2016

About the Code

No JS: Tabs that scale down to menu

A tab-to-menu layout that doesn’t use javascript. Modern browser compatible.

Useful Links:Live Demo | Download
Dependency:–
Responsive:yes
↑ ↓

Author

  • JamieYang

Made with

  • Pug / SCSS / Babel

Created on

  • April 02,2017

Updated on

  • April 13,2017

About the Code

Tab with Magnetic Active Bar

Base on Swiper.js

Useful Links:Live Demo | Download
Dependency:–
Responsive:no

Vertical tabs

↑ ↓

Author

  • Kseso

Made with

  • HTML / CSS

Created on

  • December 04,2013

Updated on

  • January 20,2018

About the Code

just another Css tabs (:checked)

Useful Links:Live Demo | Download
Dependency:Font Awesome
Responsive:no
Animation:yes
↑ ↓

Author

  • ari

Made with

  • Pug / SCSS

Created on

  • December 05,2015

Updated on

  • July 18,2021

About the Code

Pure CSS Color Tabs (no label)

Useful Links:Live Demo | Download
Dependency:Color Resource
Responsive:yes
Animation:yes
↑ ↓

Author

  • Darshan Rajadhyaksha

Made with

  • HTML / CSS / JS

Created on

  • July 05,2020

Updated on

  • November 10,2022

About the Code

Vertical Tabs

Useful Links:Live Demo | Download
Dependency:Font Awesome
Responsive:no
Animation:yes
↑ ↓

Author

  • Josh Adamous

Made with

  • HTML / SCSS / JS

Created on

  • October 07,2014

Updated on

  • June 18,2018

About the Code

Bootstrap Vertical Tabs

Useful Links:Live Demo | Download
Dependency:jquery.js bootstrap.js
Responsive:yes
Animation:no
↑ ↓

Author

  • Benjamin Koehler

Made with

  • HTML / SCSS / JS

Created on

  • May 22,2017

Updated on

  • June 25,2020

About the Code

Vertical tabs with smooth animation

A simple tabs/accordions solution with jQuery, HTML, and CSS.

Useful Links:Live Demo | Download
Dependency:jquery.js
Responsive:no
Animation:yes
↑ ↓

Author

  • NaveenBhaskar

Made with

  • HTML / SCSS / JS

Created on

  • November 22,2013

Updated on

  • April 06,2014

About the Code

Vertical tab

Useful Links:Live Demo | Download
Dependency:jquery.js
Responsive:no