30+ JavaScript Tab Bars - Free Code + Demos
Collection of 30+ JavaScript Tab Bars. All items are 100% free and open-source.
NEW
🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉
Click to visit: ApplyFox.ai
1. 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
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
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
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
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
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
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
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)
Created on: August 24, 2018
Made with: HTML, CSS, JS
Tags: svg, animation, interaction, jelly menu, goo
17. 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]
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
Author: Lucas Marandat (lucasmrdt)
Links: Source Code / Demo
Made with: HTML, CSS, JS
22. 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
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
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
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
27. Simple Icon Navigation
A simple navigation bar inspired by mobile app tab-bars.
Author: BG (BentG)
Links: Source Code / Demo
Created on: June 13, 2019
Made with: HTML, CSS, JS
Tags: navigation, feather icon, tab-bar
NEW
🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉
Click to visit: ApplyFox.ai
More Awesome Lists:
Share: