30+ JavaScript Tab Bars - Free Code + Demos

Collection of 30+ JavaScript Tab Bars. All items are 100% free and open-source.

1. Material 2.0 Bottom Toolbar Motion Design & Interaction

JavaScript Tab Bars - Material 2.0 Bottom Toolbar Motion Design & Interaction
Motion Design Interaction for a bottom toolbar using the cutout that came in Material Design 2.0 for the call to action buttons (or FAB). This is mixture of both the bottom toolbar and the bottom tab bar.
Author: Vlad Racoare (vladracoare)
Created on: November 6, 2019
Made with: HTML, CSS, JS
Tags: material design, bottom bar, cutout, motion, interaction

2. Tab Bar Navigation

JavaScript Tab Bars - Tab bar navigation
A simple interaction for your mobile app tab bar . I hope love it :)
Author: Hamid Ziadzadeh (HamidZiadzadeh)
Created on: October 29, 2019
Made with: HTML, SCSS, Babel
Tags: navigation, menu, tab, mobile, tabbar

3. Nav Tab

JavaScript Tab Bars - Nav Tab
Author: alphardex (alphardex)
Created on: October 24, 2019
Made with: HTML, SCSS, TypeScript
Tags: nav, tabs

4. Tab Bar Animation

JavaScript Tab Bars - Tab Bar Animation
Author: Ricardo Oliva Alonso (ricardoolivaalonso)
Created on: October 18, 2019
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug

5. Tab Bar Animation

JavaScript Tab Bars - Tab Bar Animation
Author: Ricardo Oliva Alonso (ricardoolivaalonso)
Created on: September 19, 2019
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: tab, bar, menu, mobile, animation

6. Tab Bar Navigation 2

JavaScript Tab Bars - Tab Bar Navigation 2
Author: Elodie | DIY Web Developer (liloo2040)
Created on: September 16, 2019
Made with: HTML, CSS, JS
Tags: weeklycodingchallenge frontend tabbarnavigation

7. TAB Gooey Icon Navigation Menu Concept

JavaScript Tab Bars - TAB Gooey Icon Navigation Menu Concept
Author: Nicolas Pavlotsky (nicopavlotsky)
Created on: September 4, 2019
Made with: HTML, CSS, JS

8. Tab Bar Animation

JavaScript Tab Bars - Tab Bar Animation
Simple Tab Bar Animated Navigation Menu
Author: Flávio Amaral (flavio_amaral)
Created on: August 10, 2019
Made with: HTML, SCSS
Tags: css, navigation, animated, tab, bar

9. Nav Menu Animation

JavaScript Tab Bars - Nav Menu Animation
Author: Kasper De Bruyne (kdbkapsere)
Created on: July 30, 2019
Made with: HTML, CSS, Babel
Tags: navigation, menu, animation, nav

10. Tab Bar Navigation

JavaScript Tab Bars - Tab Bar Navigation
Author: Montique Stevens (mkstevens)
Created on: May 26, 2019
Made with: HTML, CSS, JS

11. Tab Bar Expand Button

JavaScript Tab Bars - Tab Bar Expand Button
A tab bar with an expanding middle button!
Author: Chantal (chantallexandra)
Created on: April 26, 2019
Made with: HTML, SCSS, JS

12. Navigation Tabs With Background Animation

JavaScript Tab Bars - Navigation tabs with background animation
An experiment of animation with css and javascript which puts in scene a navigation tab whose buttons control a transition of background of the whole page.
Author: VERDIEU Steeve (flatpixels)
Created on: April 21, 2019
Made with: HTML, CSS, JS
Tags: background transition, css-animation, javascript-animation, keyframes

13. Tab Bar Navigation

JavaScript Tab Bars - Tab Bar Navigation
Replicate this particular design for a mobile, or close to mobile, navigation bar. Third project for the #weeklycodingchallenge. Credit Aurélien Salomon's design
Author: Gabriele Corti (borntofrappe)
Created on: April 8, 2019
Made with: HTML, CSS, JS
Tags: navigation, mobile, weeklycodingchallenge, svg

14. Modern Tabs

JavaScript Tab Bars - Modern tabs
Modern tabs with JavaScript
Author: alexkorzin (alexkorzin)
Created on: February 18, 2019
Made with: HTML, Less, JS
Tags: tabs, js

15. Material UI Stretch Button

JavaScript Tab Bars - Material UI stretch button
Delightful Material UI stretch button built by clipping paths. Original can be found here: https://material.io/design/motion/customization.html#movement
Author: Mikael Ainalem (ainalem)
Created on: January 31, 2019
Made with: HTML, CSS, JS
Tags: material, stretch, select, options, stretch button

17. Google Material Design Tab Bar

JavaScript Tab Bars - Google Material Design Tab Bar
Author: Kapilraj Parameswararajah (Kapilnemo)
Created on: June 18, 2016
Made with: HTML, CSS, JS

18. Tab Bar [React.js]

JavaScript Tab Bars - Tab Bar [React.js]
Author: Nick Shillingford (nshillingford)
Created on: December 5, 2018
Made with: HTML, CSS, Babel

19. Animated Tabbar

JavaScript Tab Bars - Animated Tabbar
Author: bilalbera (BeraMeric)
Created on: February 28, 2020
Made with: HTML, CSS, JS
Tags: tabbar, animated tabbar, css, js

20. Tab Bar Navigation

JavaScript Tab Bars - Tab bar navigation
Tab bar navigation is made in the frame of the week of coding from @FlorinPop17
Author: Nikios05 (nikios05)
Created on: June 17, 2019
Made with: HTML, CSS, JS
Tags: tab, tabbar, bar, navigation weeklycodingchallenge

21. Great Tab Bar Animation

JavaScript Tab Bars - Great Tab Bar Animation
Author: Lucas Marandat (lucasmrdt)
Made with: HTML, CSS, JS

22. TabBar With Grid Layout For Android

JavaScript Tab Bars - TabBar with Grid Layout For Android
Sketch
Author: tatushka50 (tatushka50)
Created on: July 30, 2017
Made with: HTML, CSS, JS
Tags: grid, tabbar, android

23. Tab Bar Animation

JavaScript Tab Bars - tab bar animation
Author: Animation Bro (animationbro)
Created on: April 18, 2020
Made with: HTML, CSS, JS
Tags: tab bar animation, animation, tab-bar

24. Smooth Tab Bar Interaction

JavaScript Tab Bars - Smooth Tab Bar Interaction
Tab Bar Interaction ...inspiration from: - Taras Migulko's dribbble shot: https://dribbble.com/shots/6798414 - Aaron Iker's codepen pen: https://codepen.io/aaroniker/pen/bGbBQaR
Author: Abubaker Saeed (AbubakerSaeed)
Created on: August 19, 2020
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, javascript, tab-bar, svg, animation

25. Tab Bar Menu Animation

JavaScript Tab Bars - Tab Bar Menu Animation
From this video https://www.youtube.com/watch?v=OVYsPQkOhyc ,,
Author: Nguyễn Đức Chiến (nguyenchienbg2k)
Created on: October 8, 2019
Made with: HTML, SCSS, Babel
Tags: tab-bar, tab-menu, tab

26. Three Person Collaborative Animation Tutorial

JavaScript Tab Bars - Three Person Collaborative Animation Tutorial
Chris Coyier joins David Khourshid and Stephen Shaw put together a sliding navbar animation for the first THREEFRAMERS, three person @keyframers collab! ⏰ Streamed live on August 12, 2019 at https://twitch.tv/keyframers 💡 Inspiration: https://dribbble.com/shots/6934545-Navbar-experiment...
Read More
Author: @keyframers (keyframers)
Created on: August 12, 2019
Made with: HTML, SCSS, JS
Tags: keyframers, chris-coyier, navigation, animation, flipping

27. Simple Icon Navigation

JavaScript Tab Bars - Simple icon navigation
A simple navigation bar inspired by mobile app tab-bars.
Author: BG (BentG)
Created on: June 13, 2019
Made with: HTML, CSS, JS
Tags: navigation, feather icon, tab-bar