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)

Links: Source Code / Demo

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)

Links: Source Code / Demo

Created on: October 29, 2019

Made with: HTML, SCSS, Babel

Tags: navigation, menu, tab, mobile, tabbar

3. Nav Tab

Author: alphardex (alphardex)

Links: Source Code / Demo

Created on: October 24, 2019

Made with: HTML, SCSS, TypeScript

Tags: nav, tabs

4. Tab Bar Animation

Author: Ricardo Oliva Alonso (ricardoolivaalonso)

Links: Source Code / Demo, Dribbble Shot

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

Author: Ricardo Oliva Alonso (ricardoolivaalonso)

Links: Source Code / Demo, Dribbble Shot

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)

Links: Source Code / Demo

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)

Links: Source Code / Demo

Created on: September 4, 2019

Made with: HTML, CSS, JS

8. Tab Bar Animation

Simple Tab Bar Animated Navigation Menu

Author: Flávio Amaral (flavio_amaral)

Links: Source Code / Demo

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)

Links: Source Code / Demo, Dribbble Shot

Created on: July 30, 2019

Made with: HTML, CSS, Babel

Tags: navigation, menu, animation, nav

10. Tab Bar Navigation

Author: Montique Stevens (mkstevens)

Links: Source Code / Demo

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)

Links: Source Code / Demo

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)

Links: Source Code / Demo

Created on: April 21, 2019

Made with: HTML, CSS, JS

Tags: background transition, css-animation, javascript-animation, keyframes

13. 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)

Links: Source Code / Demo, Dribbble Shot

Created on: April 8, 2019

Made with: HTML, CSS, JS

Tags: navigation, mobile, weeklycodingchallenge, svg

14. Modern Tabs

Modern tabs with JavaScript

Author: alexkorzin (alexkorzin)

Links: Source Code / Demo

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)

Links: Source Code / Demo, Material.io

Created on: January 31, 2019

Made with: HTML, CSS, JS

Tags: material, stretch, select, options, stretch button

16. Jelly Menu

Author: Jorge (dok)

Links: Source Code / Demo, Dribbble Shot, Www.uplabs.com

Created on: August 24, 2018

Made with: HTML, CSS, JS

Tags: svg, animation, interaction, jelly menu, goo

17. Google Material Design Tab Bar

JavaScript Tab Bars - Google Material Design Tab Bar

Author: Kapilraj Parameswararajah (Kapilnemo)

Links: Source Code / Demo

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)

Links: Source Code / Demo

Created on: December 5, 2018

Made with: HTML, CSS, Babel

19. Animated Tabbar

Author: bilalbera (BeraMeric)

Links: Source Code / Demo

Created on: February 28, 2020

Made with: HTML, CSS, JS

Tags: tabbar, animated tabbar, css, js

20. Tab Bar Navigation

Tab bar navigation is made in the frame of the week of coding from @FlorinPop17

Author: Nikios05 (nikios05)

Links: Source Code / Demo

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)

Links: Source Code / Demo

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)

Links: Source Code / Demo

Created on: July 30, 2017

Made with: HTML, CSS, JS

Tags: grid, tabbar, android

23. Tab Bar Animation

Author: Animation Bro (animationbro)

Links: Source Code / Demo

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)

Links: Source Code / Demo

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)

Links: Source Code / Demo

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)

Links: Source Code / Demo

Created on: August 12, 2019

Made with: HTML, SCSS, JS

Tags: keyframers, chris-coyier, navigation, animation, flipping