35+ CSS Tab Bars - Free Code + Demos
Collection of 35+ CSS 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. Tabbar Animation - Only CSS
Awesome tabbar animation
Author: Milan Raring (milanraring)
Links: Source Code / Demo, Dribbble Shot
Created on: January 2, 2020
Made with: HTML, SCSS
Tags: css, codepen, tabbar, animation, microinteractions
2. Tabbar Animation - Only CSS
Awesome tabbar animation
Author: Milan Raring (milanraring)
Links: Source Code / Demo, Dribbble Shot
Created on: December 25, 2019
Made with: HTML, SCSS
Tags: css, codepen, tabbar, animation, microinteractions
3. 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
4. Mobile Nav - Only Checkbox & CSS
CSS only mobile nav trigger and menus.
Author: Max Misnikov (maxim)
Links: Source Code / Demo
Created on: January 6, 2017
Made with: HTML, SCSS
Tags: mobile, css, navigation, menu, checkbox
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 Wizard
Author: animianacs (animianacs)
Links: Source Code / Demo
Created on: November 11, 2019
Made with: HTML, SCSS
7. Tab Bar Animation CSS Only
Tab Bar Animation CSS Only
Author: Raj Singh (raj457036)
Links: Source Code / Demo
Created on: October 19, 2019
Made with: HTML, SCSS
Tags: tab, bar, animation, css-only
8. Cred App Like Tab Bar Interaction
A tab bar interaction.
Author: Himalaya Singh (himalayasingh)
Links: Source Code / Demo
Created on: October 7, 2019
Made with: HTML, CSS
Tags: tab-bar, interaction, hover-effect, animation
9. Navbar UI Interaction
Navbar UI interaction with pure css from Nicholas's dribbble shot -> https://dribbble.com/shots/7269364-Navbar-Simple-UI-Interaction
Author: Muhammed Erdem (JavaScriptJunkie)
Links: Source Code / Demo, Dribbble Shot
Created on: September 30, 2019
Made with: HTML, SCSS, JS
Tags: navbar, transition, interaction, animation
10. Tab Bar With Morphing Highlight
CSS only tab bar with morphing highlight. Created with clipping paths and the radio CSS hack.
Author: Mikael Ainalem (ainalem)
Links: Source Code / Demo
Created on: September 24, 2019
Made with: HTML, CSS, JS
Tags: morphing, tab-bar, clipping, tab, bar
11. Tab Bar Active Animation - CSS Only
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble Shot
Created on: June 11, 2019
Made with: HTML, SCSS
12. Mobile Menu With Pure Css
Interactive material design made with pure-css
Author: Ramnek Singh (Ramnk7)
Links: Source Code / Demo, Dribbble Shot
Created on: February 23, 2019
Made with: HTML, CSS
Tags: codepenchallenge, cpc-triangle, cpc-circle, background, navbar
13. Bottom Navigation With Css
Author: Erdem Uslu (erdemuslu)
Links: Source Code / Demo, Dribbble Shot
Created on: February 17, 2019
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: Babel
HTML Pre-processor: Pug
14. Random Navigation Bar CSS
Author: Simone Bernabè (simoberny)
Links: Source Code / Demo
Created on: February 8, 2019
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
15. Tab Bar Icons
Author: Ryan (ryanparag)
Links: Source Code / Demo, Dribbble Page
Created on: November 21, 2018
Made with: Pug, SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: tabs, icons, toolbar, colors, ui
16. Tab Bar Photo/video Switch
Not sure how to remove the animation on load - any suggestions appreciated :D From https://dribbble.com/shots/5487871-Video-Photo-Switcher-Exploration
Author: Aaron Iker (aaroniker)
Links: Source Code / Demo, Dribbble.com
Created on: November 5, 2018
Made with: HTML, SCSS
Tags: tabbar, camera, video, photo, switch
17. Fluid Tab Bar
Remake of Fluid Tab Bar Interaction on dribbble https://dribbble.com/shots/4800174-Fluid-Tab-Bar-Interaction Icons from the Nuon project
Author: Mikael Ainalem (ainalem)
Links: Source Code / Demo, Dribbble Page
Created on: July 26, 2018
Made with: HTML, CSS, JS
Tags: bar, fluid, bubble, mobile bar, bezier curves
18. CSS Only Cut Out Tab Navigation
Author: @keyframers (keyframers)
Links: Source Code / Demo, Youtube Tutorial, Dribbble Page, Twitch.tv, Cdpn.io, Twitch.tv, Patreon.com
Created on: July 23, 2018
Made with: HTML, SCSS
Tags: keyframers, css, tab, scoop, cut-out
19. Fluid Tab Bar 2
Author: Dragos (siseer)
Links: Source Code / Demo, Dribbble Page
Created on: July 13, 2018
Made with: HTML, Stylus, JS
20. SVG Mobile Tab Bar
Your hybrid/web app tab bar doesn't need to be plain. You can make it playful and vibrant with SVG and CSS animations. This is one example how.
Author: Mikael Ainalem (ainalem)
Links: Source Code / Demo
Created on: April 30, 2018
Made with: HTML, CSS, JS
Tags: tab-bar, mobile-menu, mobile bar, tab, bar
21. Google Material Design Tab Bar
Author: Kapilraj Parameswararajah (Kapilnemo)
Links: Source Code / Demo
Created on: June 18, 2016
Made with: HTML, CSS, JS
22. Slide-Menu 2
This is a CSS-only slide menu.
Author: Aaron Benjamin (abenjamin)
Links: Source Code / Demo
Created on: April 29, 2015
Made with: HTML, CSS
Tags: menu, css
23. Navbar Concept HTML / CSS Only
Inspired by https://dribbble.com/shots/6118404-Banking-App-Tab-Bar-Navigation-Concept
Author: Boris Graeff (boris-graeff)
Links: Source Code / Demo
Created on: March 4, 2019
Made with: HTML, SCSS, JS
Tags: nav, phone, tab-bar
24. 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
25. CSS Tab Bar
For PairJam...
Author: Riley Shaw (rileyjshaw)
Links: Source Code / Demo
Created on: September 12, 2014
Made with: Slim, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Slim
Tags: css, tab, bar, editor, ui
26. Android Tab Bar In CSS
Just a quick thing I made. There's nothing like this online seemingly so.. Its a bit hacked together so I'll try improve it over time :) Niall
Author: Niall Paterson (paterson)
Links: Source Code / Demo
Created on: November 16, 2012
Made with: HTML, CSS, JS
Tags: android, mobile, css, javscript
27. MDC Tabs Prototype
Author: Justin O'Neill (oneezy)
Links: Source Code / Demo
Created on: April 9, 2019
Made with: HTML, SCSS, Babel
28. Animated Tab Bar
Author: PARUL MALHOTRA (PAUMALHOTRA)
Links: Source Code / Demo
Created on: May 3, 2020
Made with: HTML, CSS
29. CSS Animated Tab Bars
I was bored so I decided to play with animations... Maybe i'll add more, comment for any ideas. Enjoy that!
Author: StyleShit (EvyatarDa)
Links: Source Code / Demo
Made with: HTML, CSS, JS
30. Awesome Interactive NavBar
A user sees a label while they press on a button and interact with that. A user can control a label appearance by holding a button pressed as long as they want.
Author: Lorenzo Dossi (lorenzodossi)
Links: Source Code / Demo
Created on: November 15, 2018
Made with: HTML, CSS, JS
Tags: navbar, css, hover, icon, interact
31. Great Tab Bar Animation
Inspired from UX creation: https://www.linkedin.com/feed/update/urn:li:ugcPost:6502538539505451008
Author: Lucas Marandat (lucasmrdt)
Links: Source Code / Demo
Created on: February 21, 2019
Made with: HTML, CSS, JS
Tags: ux, animation, css, tabbar, ui
32. Awesome Css Navbar
My first css project
Author: Onur (onurhandtr0)
Links: Source Code / Demo
Created on: June 13, 2020
Made with: HTML, CSS
Tags: css, navbar, bar, css-navbar
33. Navbar TailwindCSS - 4th
Author: Componentity (componentity)
Links: Source Code / Demo
Created on: August 20, 2020
Made with: HTML, CSS
Tags: tailwind, navbar, section, hero, component
NEW
🔥 Auto-Apply to 100's of Jobs With AI 🔥
👉
Click to visit: ApplyFox.ai
More Awesome Lists:
Share: