20+ JavaScript Tabs - Free Code + Demos
Collection of 20+ JavaScript Tabs. All items are 100% free and open-source.
1. Tabs Navigation UI
Author: Natalia Davydova (nat-davydova)
Links: Source Code / Demo
Created on: August 3, 2019
Made with: Pug, SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
2. Mobile First Accordion To Tabs
This simple, mobile first, accordion to tabs pen is something I created for another project and stripped and optimized for anyone else to use. Enjoy!
Author: Chyno Deluxe (ChynoDeluxe)
Links: Source Code / Demo
Created on: July 31, 2019
Made with: HTML, SCSS, JS
Tags: accordion, tabs, mobile-first, responsive, drop-down
3. 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. I've built a few features into this component to make it a little more complete and user (dev) friendly. Hopefully little code w...Read More
Author: Joz (sunrisejoz)
Links: Source Code / Demo
Made with: HTML, SCSS, JS
4. CSS TABS
CSS 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......
Author: Ramnek Singh (Ramnk7)
Links: Source Code / Demo
Created on: May 4, 2019
Made with: HTML, CSS, JS
Tags: codepenchallenge, tabs, animations, css, scrolling
5. Navigation With Tabs
Three links that open tabs with content below the top horizontal navigation.
Author: Nicholas Fazzolari (NickersF)
Links: Source Code / Demo
Created on: March 31, 2019
Made with: HTML, CSS, JS
Tags: ui, css, layout, javascript
6. Tabs - CSS + JS
Author: Rafaela Lucas (rafaelavlucas)
Links: Source Code / Demo
Created on: January 25, 2019
Made with: HTML, SCSS, JS
Tags: tabs, css-animations, animated tabs, hover-effect, css-hover
7. 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
Author: Mikael Ainalem (ainalem)
Links: Source Code / Demo
Created on: May 14, 2018
Made with: HTML, CSS, JS
Tags: breadcrumbs, tabs, cut out index, rolodex, signup
8. UI/UX Example: Tab Switch Animation
Low fidelity mobile phone mockup done with css and a nice tab switch animation.
Author: Angel Davcev (Gelsot)
Links: Source Code / Demo
Created on: March 7, 2018
Made with: Pug, Sass, Babel
CSS Pre-processor: Sass
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: ui, ux, mobile, phone, tabs
9. Javascript/CSS Tabs
I wanted a tab system I could use to show/hide DIV's (like standard tabs). The script is designed to hide in the background. Only HTML and CSS is needed to invoke the tabs.
Author: Douglass Branton (douglassbranton)
Links: Source Code / Demo
Created on: August 27, 2015
Made with: HTML, CSS, JS
10. Tabs - CSS + JS
Author: sonia (swillcox)
Links: Source Code / Demo
Created on: September 2, 2020
Made with: HTML, SCSS, JS
Tags: tabs, css-animations, animated-tabs, hover-effect, css-hover
11. Javascript Tabs With Css Grid
Responsive tabs with vanilla javascript. TODO: scale active tab size w/o scaling the text
Author: Jason Duquain (JasonDuquain)
Links: Source Code / Demo
Created on: February 9, 2018
Made with: HTML, SCSS, JS
12. Foundation - Vertical Tabs (CSS/flex Example)
Author: Harry Manchanda (IamManchanda)
Links: Source Code / Demo
Created on: May 15, 2017
Made with: HTML, CSS, JS
13. Expanding Color Tabs
These tabs are colored rectangles whose background expands on click to fill the entire page.
Author: Remiscan (remiscan)
Links: Source Code / Demo
Created on: June 3, 2020
Made with: HTML, CSS, JS
Tags: tabs, animation
14. Javascript Tabs With Css Grid
Responsive tabs with vanilla javascript. TODO: scale active tab size w/o scaling the text
Author: Jason Duquain (JasonDuquain)
Links: Source Code / Demo
Created on: February 9, 2018
Made with: HTML, SCSS, JS
15. Responsive Tabs
using aria attributes instead of classes for functionality - idea from and hat tip to Wes Bos
Author: Levente Molnar (leventemo)
Links: Source Code / Demo
Created on: May 16, 2020
Made with: HTML, SCSS, JS
Tags: tabs, responsive, accessible
16. Card With Animated Tabs
Simple animated tabs component, that is fully responsive and pleasant looking :)
Author: Vorbert (Vorbert)
Links: Source Code / Demo
Created on: August 2, 2020
Made with: HTML, SCSS, JS
Tags: tabs, animation, responsive, ideas, card
17. Fantabulous Tabs Simple Javascript Animated Tabs
A very small javascript, html5, and css animated tabs.
Author: Stephen Nelson (nelsonswork)
Links: Source Code / Demo
Created on: June 9, 2015
Made with: HTML, CSS, JS
Tags: tabs, javascript, css3, html5, simple
18. Tabs 🗂
Author: Gemma Stiles (GemmaStiles)
Links: Source Code / Demo
Created on: June 8, 2020
Made with: HTML, SCSS, JS
Tags: tabs, js tabs
More Awesome Lists:
Share: