Post thumbnail: 8 CSS Tab Bars

8 CSS Tab Bars

Collection of hand-picked free HTML and CSS tab bar code examples.

Related Articles

  1. CSS Tabs

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

Author

  • Ryan

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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