Collection of free HTML and CSS tab bar code examples. Update of December 2018 collection. 15 new items.

23 CSS Tab Bars

Collection of hand-picked free HTML and CSS tab bar code examples. Update of December 2018 collection. 15 new items.

Related Articles

  1. JavaScript Tab Bars
  2. jQuery Tab Bars

Author

  • Milan Raring

Made with

  • HTML / CSS (SCSS)

About the code

Tabbar Animation Only CSS

Awesome tabbar animation.

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Milan Raring

Made with

  • HTML / CSS (SCSS)

About the code

Tab Bar Animation Only CSS

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Milan Raring

Made with

  • HTML / CSS (SCSS)

About the code

Tab Bar Animation

Only CSS awesome tab bar animation.

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: no

Dependencies: -

Author

  • co0kie

Made with

  • HTML / CSS (SCSS)

About the code

Mobile Nav

CSS filter contrast and blur.

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Onur E.

Made with

  • HTML / CSS (SCSS)

About the code

Tab Bar Animation

Tab animation with pure CSS.

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • animianacs

Made with

  • HTML / CSS (SCSS)

About the code

Tab Wizard

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Raj Singh

Made with

  • HTML / CSS (SCSS)

About the code

Tab Bar Animation CSS Only

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Himalaya Singh

Made with

  • HTML / CSS

About the code

Cred App Like Tab Bar Interaction

A tab bar interaction.

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Muhammed Erdem

Made with

  • HTML / CSS (SCSS)

About the code

Navbar UI Interaction

Navbar UI interaction with pure CSS.

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Kasper De Bruyne

Made with

  • HTML / CSS

About the code

Nav Animation

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Mikael Ainalem

Made with

  • HTML / CSS

About the code

Tab Bar With Morphing Highlight

CSS only tab bar with morphing highlight. Created with clipping paths and the radio CSS hack.

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS)

About the code

Tab Bar Active Animation

CSS only tab bar active animation.

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Ramnek Singh

Made with

  • HTML / CSS

About the code

Mobile Menu With Pure CSS

Interactive Material design made with pure CSS.

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: no

Dependencies: bootstrap.css

Author

  • Erdem Uslu

Made with

  • HTML (Pug) / CSS (Sass)

About the code

Bottom Navigation With CSS

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Simone Bernabè

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Random Navigation Bar CSS

Compatible browsers: Chrome, Firefox, Edge, Opera, Safari

Responsive: no

Dependencies: material-icons.css

Demo image: Tab Bar Icons Tab Bar Icons - GIF Demo

Author

  • Ryan

Made with

  • HTML (Pug) / CSS (SCSS) / JavaScript (Babel)

About the code

Tab Bar Icons

Tab bar icons in HTML, SVG, CSS and JS. The profile icon follows you.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Tab Bar Photo/Video Switch Tab Bar Photo/Video Switch - GIF Demo

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS)

About the code

Tab Bar Photo/Video Switch

Pure CSS tab bar photo/video switch.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Fluid Tab Bar

Author

  • Mikael Ainalem

Made with

  • HTML / CSS / JavaScript

About the code

Fluid Tab Bar

Remake of "Fluid Tab Bar Interaction" on dribbble.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS Only Cut-Out Tab Navigation CSS Only Cut-Out Tab Navigation - GIF Demo

Author

  • @keyframers

Made with

  • HTML / CSS (SCSS)

About the code

CSS Only Cut-Out Tab Navigation

David Khourshid and Stephen Shaw scoop out a section of a navigation while building a CSS-only tab navigation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Fluid Tab Bar Fluid Tab Bar - GIF Demo

Author

  • Dragos

Made with

  • HTML / CSS (Stylus) / JavaScript

About the code

Fluid Tab Bar

Fluid tab bar in SVG, HTML, CSS and JS.

Compatible browsers: Chrome, Edge, Opera, Safari

Dependencies: -

Demo image: SVG Mobile Tab Bar SVG Mobile Tab Bar - GIF Demo

Author

  • Mikael Ainalem

Made with

  • HTML / CSS / JavaScript

About the code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Google Material Design Tab Bar Google Material Design Tab Bar - GIF Demo

Author

  • Kapilraj Parameswararajah

Made with

  • HTML / CSS / JavaScript

About the code

Google Material Design Tab Bar

Google Material Design tab bar in HTML, CSS and JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Slide Tab Bar Slide Tab Bar - GIF Demo

Author

  • Aaron Benjamin

Made with

  • HTML / CSS

About the code

Slide Tab Bar

This is a CSS-only slide tab bar.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

back to top