Collection of free vanilla JavaScript tab code examples.

Related Articles

  1. CSS Tabs
  2. Bootstrap Tabs
  3. jQuery Tabs
  4. React Tabs
  5. Vue Tabs

Author

  • Natalia Davydova

Made with

  • HTML (Pug) / CSS (SCSS) / JS (Babel)

About a code

Tabs Navigation UI

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Chyno Deluxe

Made with

  • HTML / CSS (SCSS) / JS

About a code

Mobile First Accordion To Tabs

This simple, mobile first, accordion to tabs example.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Joz

Made with

  • HTML / CSS (SCSS) / JS

About a code

Tabbed Content With CSS Grid

This pen aims to create a sustainable CSS Grid based content tabs component. Being a CSS Grid fan I naturally want the world to be governed by its awesomeness.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Ramnek Singh

Made with

  • HTML / CSS / JS

About a code

JavaScript Tabs

Tabs made with smooth scroll property. No animations or transition are used for tabs swithching. Tabs transition is done with the help of scroll-behaviour property and HTML id's.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Nicholas Fazzolari

Made with

  • HTML / CSS / JS

About a code

Navigation With Tabs

Three links that open tabs with content below the top horizontal navigation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: bootstrap.css

Author

  • Rafaela Lucas

Made with

  • HTML / CSS (SCSS) / JS

About a code

Tabs - CSS + JS

Animated tabs with hover effect in JavaScript.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mikael Ainalem

Made with

  • HTML / CSS / JS

About a code

Breadcrumbs & Tabs

A fusion between breadcrumbs & tabs creates a new kind of Rolodex-like navigation. Built with clip-path to cut out tabs and inset box-shadow to create depth.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Angel Davcev

Made with

  • HTML (Pug) / CSS (Sass) / JS (Babel)

About a code

Tab Switch Animation

UI/UX example: tab switch animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -