35+ CSS Tab Bars - Free Code + Demos

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

1. Tabbar Animation - Only CSS

CSS Tab Bars - Tabbar animation - Only CSS
Awesome tabbar animation
Author: Milan Raring (milanraring)
Created on: January 2, 2020
Made with: HTML, SCSS
Tags: css, codepen, tabbar, animation, microinteractions

2. Tabbar Animation - Only CSS

CSS Tab Bars - Tabbar animation - Only CSS
Awesome tabbar animation
Author: Milan Raring (milanraring)
Created on: December 25, 2019
Made with: HTML, SCSS
Tags: css, codepen, tabbar, animation, microinteractions

3. Tab Bar Animation

CSS 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

4. Mobile Nav - Only Checkbox & CSS

CSS Tab Bars - Mobile Nav - only checkbox & CSS
CSS only mobile nav trigger and menus.
Author: Max Misnikov (maxim)
Created on: January 6, 2017
Made with: HTML, SCSS
Tags: mobile, css, navigation, menu, checkbox

5. Tab Bar Animation

CSS 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 Wizard

CSS Tab Bars - tab wizard
Author: animianacs (animianacs)
Created on: November 11, 2019
Made with: HTML, SCSS

7. Tab Bar Animation CSS Only

CSS Tab Bars - Tab Bar Animation CSS Only
Tab Bar Animation CSS Only
Author: Raj Singh (raj457036)
Created on: October 19, 2019
Made with: HTML, SCSS
Tags: tab, bar, animation, css-only

8. Cred App Like Tab Bar Interaction

CSS Tab Bars - Cred App Like Tab Bar Interaction
A tab bar interaction.
Author: Himalaya Singh (himalayasingh)
Created on: October 7, 2019
Made with: HTML, CSS
Tags: tab-bar, interaction, hover-effect, animation

9. Navbar UI Interaction

CSS Tab Bars - 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)
Created on: September 30, 2019
Made with: HTML, SCSS, JS
Tags: navbar, transition, interaction, animation

10. Tab Bar With Morphing Highlight

CSS Tab Bars - 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)
Created on: September 24, 2019
Made with: HTML, CSS, JS
Tags: morphing, tab-bar, clipping, tab, bar

11. Tab Bar Active Animation - CSS Only

CSS Tab Bars - Tab bar active animation - CSS only
Author: Aaron Iker (aaroniker)
Created on: June 11, 2019
Made with: HTML, SCSS

12. Mobile Menu With Pure Css

CSS Tab Bars - mobile menu with pure css
Interactive material design made with pure-css
Author: Ramnek Singh (Ramnk7)
Created on: February 23, 2019
Made with: HTML, CSS
Tags: codepenchallenge, cpc-triangle, cpc-circle, background, navbar

13. Bottom Navigation With Css

CSS Tab Bars - Bottom navigation with css
Author: Erdem Uslu (erdemuslu)
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

CSS Tab Bars - Random navigation bar CSS
Author: Simone Bernabè (simoberny)
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

CSS Tab Bars - tab bar icons
Author: Ryan (ryanparag)
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

CSS Tab Bars - 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)
Created on: November 5, 2018
Made with: HTML, SCSS
Tags: tabbar, camera, video, photo, switch

17. Fluid Tab Bar

CSS Tab Bars - 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)
Created on: July 26, 2018
Made with: HTML, CSS, JS
Tags: bar, fluid, bubble, mobile bar, bezier curves

20. SVG Mobile Tab Bar

CSS Tab Bars - 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)
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

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

22. Slide-Menu 2

CSS Tab Bars - Slide-Menu 2
This is a CSS-only slide menu.
Author: Aaron Benjamin (abenjamin)
Created on: April 29, 2015
Made with: HTML, CSS
Tags: menu, css

23. Navbar Concept HTML / CSS Only

CSS Tab Bars - Navbar concept HTML / CSS only
Inspired by https://dribbble.com/shots/6118404-Banking-App-Tab-Bar-Navigation-Concept
Author: Boris Graeff (boris-graeff)
Created on: March 4, 2019
Made with: HTML, SCSS, JS
Tags: nav, phone, tab-bar

24. Tab Bar Animation

CSS 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

25. CSS Tab Bar

CSS Tab Bars - CSS Tab Bar
For PairJam...
Author: Riley Shaw (rileyjshaw)
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

CSS Tab Bars - 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)
Created on: November 16, 2012
Made with: HTML, CSS, JS
Tags: android, mobile, css, javscript

27. MDC Tabs Prototype

CSS Tab Bars - MDC Tabs Prototype
Author: Justin O'Neill (oneezy)
Created on: April 9, 2019
Made with: HTML, SCSS, Babel

28. Animated Tab Bar

CSS Tab Bars - Animated tab bar
Author: PARUL MALHOTRA (PAUMALHOTRA)
Created on: May 3, 2020
Made with: HTML, CSS

29. CSS Animated Tab Bars

CSS Tab Bars - 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)
Made with: HTML, CSS, JS

30. Awesome Interactive NavBar

CSS Tab Bars - 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)
Created on: November 15, 2018
Made with: HTML, CSS, JS
Tags: navbar, css, hover, icon, interact

31. Great Tab Bar Animation

CSS Tab Bars - Great Tab Bar Animation
Inspired from UX creation: https://www.linkedin.com/feed/update/urn:li:ugcPost:6502538539505451008
Author: Lucas Marandat (lucasmrdt)
Created on: February 21, 2019
Made with: HTML, CSS, JS
Tags: ux, animation, css, tabbar, ui

32. Awesome Css Navbar

CSS Tab Bars - Awesome Css Navbar
My first css project
Author: Onur (onurhandtr0)
Created on: June 13, 2020
Made with: HTML, CSS
Tags: css, navbar, bar, css-navbar

33. Navbar TailwindCSS - 4th

CSS Tab Bars - Navbar TailwindCSS - 4th
Author: Componentity (componentity)
Created on: August 20, 2020
Made with: HTML, CSS
Tags: tailwind, navbar, section, hero, component