- 29 CSS Tab Bars
- Related Articles
- Author
- Links
- Made with
- About a code
- Glassmorphism Tabbar Animation
- Author
- Links
- Made with
- About a code
- Menu with Hover Reveal
- Author
- Links
- Made with
- About a code
- App Navigation Concept
- Author
- Links
- Made with
- About a code
- Tab Bar Interaction
- Author
- Links
- Made with
- About a code
- Sliding Tabs CSS Transitions Only
- Author
- Links
- Made with
- About the code
- Tabbar Animation Only CSS
- Author
- Links
- Made with
- About the code
- Tab Bar Animation Only CSS
- Author
- Links
- Made with
- About the code
- Tab Bar Animation
- Author
- Links
- Made with
- About the code
- Mobile Nav
- Author
- Links
- Made with
- About the code
- Tab Bar Animation
- Author
- Links
- Made with
- About the code
- Tab Wizard
- Author
- Links
- Made with
- About the code
- Tab Bar Animation CSS Only
- Author
- Links
- Made with
- About the code
- Cred App Like Tab Bar Interaction
- Author
- Links
- Made with
- About the code
- Navbar UI Interaction
- Author
- Links
- Made with
- About the code
- Nav Animation
- Author
- Links
- Made with
- About the code
- Tab Bar With Morphing Highlight
- Author
- Links
- Made with
- About a code
- Mobile Menu
- Author
- Links
- Made with
- About the code
- Tab Bar Active Animation
- Author
- Links
- Made with
- About the code
- Mobile Menu With Pure CSS
- Author
- Links
- Made with
- About the code
- Bottom Navigation With CSS
- Author
- Links
- Made with
- About the code
- Random Navigation Bar CSS
- Author
- Links
- Made with
- About the code
- Tab Bar Icons
- Author
- Links
- Made with
- About the code
- Tab Bar Photo/Video Switch
- Author
- Links
- Made with
- About the code
- Fluid Tab Bar
- Author
- Links
- Made with
- About the code
- CSS Only Cut-Out Tab Navigation
- Author
- Links
- Made with
- About the code
- Fluid Tab Bar
- Author
- Links
- Made with
- About the code
- SVG Mobile Tab Bar
- Author
- Links
- Made with
- About the code
- Google Material Design Tab Bar
- Author
- 20 Cool HTML & CSS Tabs [Examples]
- 1. Animated Tab Bar
- 2. Pure CSS Tabs
- 3. Closable CSS Tabs
- 4. Animated HTML & CSS Tabs
- 5. CSS Tabs With Indicator
- 6. Card Tabs (CSS)
- 7. Scaling Animated Tabs (CSS)
- 8. Animated Zooming Tabs (CSS)
- 9. CSS Tab Filter Card
- 10. Flexbox Based CSS Tabs
- 11. Simple Flat Tabs (CSS)
- 12. Minimal CSS Tab Design
- 13. Variable Height Tabs (CSS)
- 14. Set Of Different CSS Tabs
- 15. Centred Tabs (CSS)
- 16. CSS Tabs Menu
- 17. Responsive CSS Tabs With Icons
- 18. CSS Tab Portfolio Example
- 19. User Menu CSS Tabs
- 20. Responsive Tabs That Scale Down
- Takeaway
- Related Articles
29 CSS Tab Bars
Collection of hand-picked free HTML and CSS tab bar code examples. Update of January 2020 collection. 6 new items.
Related Articles
Author
Links
Made with
About a code
Glassmorphism Tabbar Animation
Only CSS glassmorphism tabbar animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Menu with Hover Reveal
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
App Navigation Concept
Just a simple menu for a fictitious app. No actual functionality other than simulating an active state when a link gets focus.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Tab Bar Interaction
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About a code
Sliding Tabs CSS Transitions Only
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Tabbar Animation Only CSS
Compatible browsers: Chrome, Firefox, Edge, Opera, Safari
Author
Links
Made with
About the code
Tab Bar Animation Only CSS
Compatible browsers: Chrome, Firefox, Edge, Opera, Safari
Author
Links
Made with
About the code
Tab Bar Animation
Only CSS awesome tab bar animation.
Compatible browsers: Chrome, Firefox, Edge, Opera, Safari
Author
Links
Made with
About the code
Mobile Nav
CSS filter contrast and blur.
Compatible browsers: Chrome, Firefox, Edge, Opera, Safari
Author
Links
Made with
About the code
Tab Bar Animation
Tab animation with pure CSS.
Compatible browsers: Chrome, Firefox, Edge, Opera, Safari
Author
Links
Made with
About the code
Tab Wizard
Compatible browsers: Chrome, Firefox, Edge, Opera, Safari
Author
Links
Made with
About the code
Tab Bar Animation CSS Only
Compatible browsers: Chrome, Firefox, Edge, Opera, Safari
Author
Links
Made with
About the code
Cred App Like Tab Bar Interaction
Compatible browsers: Chrome, Firefox, Edge, Opera, Safari
Author
Links
Made with
About the code
Navbar UI Interaction
Navbar UI interaction with pure CSS.
Compatible browsers: Chrome, Firefox, Edge, Opera, Safari
Author
Links
Made with
About the code
Nav Animation
Compatible browsers: Chrome, Firefox, Edge, Opera, Safari
Author
Links
Made with
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
Author
Links
Made with
About a code
Mobile Menu
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Tab Bar Active Animation
CSS only tab bar active animation.
Compatible browsers: Chrome, Firefox, Edge, Opera, Safari
Author
Links
Made with
About the code
Mobile Menu With Pure CSS
Interactive Material design made with pure CSS.
Compatible browsers: Chrome, Firefox, Edge, Opera, Safari
Author
Links
Made with
About the code
Bottom Navigation With CSS
Compatible browsers: Chrome, Firefox, Edge, Opera, Safari
Author
Links
Made with
About the code
Random Navigation Bar CSS
Compatible browsers: Chrome, Firefox, Edge, Opera, Safari
Author
Links
Made with
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
Author
Links
Made with
About the code
Tab Bar Photo/Video Switch
Pure CSS tab bar photo/video switch.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
About the code
Fluid Tab Bar
Remake of «Fluid Tab Bar Interaction» on dribbble.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
Links
Made with
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
Author
Links
Made with
About the code
Fluid Tab Bar
Fluid tab bar in SVG, HTML, CSS and JS.
Compatible browsers: Chrome, Edge, Opera, Safari
Author
Links
Made with
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
Author
Links
Made with
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
Author
20 Cool HTML & CSS Tabs [Examples]
I have put together a whole range of different tabs (CSS) that you can use in your web projects.
Whether you are looking for inspiration or want to learn how it is done, you will for sure find something you like in this article.
Let’s jump right in, shall we!
1. Animated Tab Bar
A cool animated CSS tab bar with clickable icons.
Requires a little JS but nothing difficult. You would have to pair this tab bar with your own content: easy enough by just working out which tab is active and displaying the correct text.
2. Pure CSS Tabs
A great example of how you can create effective HTML tabs with just CSS and no JavaScript. This one will be really easy to learn from as well.
This one has cool animations for when you switch between tabs. Both on the actual tab itself and the content.
It uses HTML labels to form each tab as well, very simple.
3. Closable CSS Tabs
With a little help from JS, you can create a nice animated set of closable tabs.
Comes with a fancy animation when you close them, try it!
This one is more of a template, but it shows us how we can create tabs that have more of a purpose.
4. Animated HTML & CSS Tabs
A nice example of animated tabs using only HTML and CSS.
Clean and minimal design with nice hover animations on each tab. When you switch between tabs, it uses a fade/flash to change the text, very slick. The CSS is very well put together as well.
5. CSS Tabs With Indicator
If you are looking to create CSS tabs with icons, this one is for you.
Animated tabs with an indicator can be useful to create a minimal design but the user still knows where they are. These CSS tabs would go nicely on a product landing page to explain the different features of a product or service.
6. Card Tabs (CSS)
CSS Tabs inside of a card, with animation on change of tab.
Requires a little JS but these card designs are very popular, they are a nice way of containing information with an image or icon.
A card is a great way to present engaging information to the user and a tab allows you to maximise the space.
7. Scaling Animated Tabs (CSS)
CSS tabs with a scaling animation and example content.
Uses a fancy zoom/scaling animation to transition between tab content. Has a clean and minimal feel to it, each tab has a hover effect before clicking. This one is pure HTML and CSS tabs.
8. Animated Zooming Tabs (CSS)
Animated tabs with a zoom effect on the content — but this effect isn’t annoying because the background stays static, it is just the text that zooms in and out — The tabs themselves have their own cool animations and hover effects.
If you do not like that text effect, try with one of these CSS Text Animation examples that we have selected for you.
It is great to look at a different CSS & HTML tab design where they are not attached to the content. The little gap really gives a different feel, making the design stand out.
9. CSS Tab Filter Card
An HTML card that uses CSS and JS to create a tab filter selection.
Another great example to see how content using CSS tabs can be filtered to display what is needed. The tabs themselves have a subtle hover effect and the content switches with no animation, so it is very snappy.
You can use this example to see how something might be used in the real world, just look at those online status indicators!
10. Flexbox Based CSS Tabs
Fully responsive CSS tabs that work without any JS.
Reduces down to accordion-style tabs on mobile and small screens. It has a subtle fade animation when you switch between the tabs.
If you are interested in CSS accordions check out our list with the best CSS only accordions.
11. Simple Flat Tabs (CSS)
Simple but effective CSS tabs with a minimal style. No fancy animations, just a clean design. Works well and the tabs have a minimal hover effect. Perfect for a flat-design website.
12. Minimal CSS Tab Design
Minimal and flat themed CSS only tabs.
Simple hover tab effect with snappy content switching. Even though the design and colour choice is very mutual, this could easily be changed to fit your own brand/style. This CSS and HTML tab is really well coded.
13. Variable Height Tabs (CSS)
A good example of CSS tabs with variable content height.
Clean and minimal design to use as well. It uses a smooth fade transition between content. The whole tab element also uses a fancy shadow hover effect, letting the user know they are interacting with it.
14. Set Of Different CSS Tabs
A nice selection of different CSS tabs Responsive, centred and sticky tabs, etc.
This CodePen comes with a whole range of CSS tab examples, different styles, tab indicators and backgrounds. Requires a little JS to work but the active tab can be changed using JS, great if you need to activate a tab from another event.
15. Centred Tabs (CSS)
Centred CSS tabs with no JS.
A simple fade transition between tab content and each tab has its own indicator when selected based on the background colour.
This CSS tab example would go nicely on a landing or product page, helping maximise the space in one area. You can easily change the colours to fit your brand/style.
16. CSS Tabs Menu
CSS tabs menu with content and forms.
Uses a quick fade transition between tab content and has a range of example content within each one, showing how it could be used in a real website.
Great to learn from and adapt to your own brand/style.
17. Responsive CSS Tabs With Icons
Fully responsive CSS tabs with icons that use a minimal design and layout. A nice top indicator as well on each selected tab. A great example of how vertical height can be taken into account.
18. CSS Tab Portfolio Example
A well put together CSS tab bar which changes the content below in the style of a portfolio website.
This example shows us how CSS tabs are extremely useful in the real world, even the actual items in the tab content are working.
Each card in the tab content has its own tags and buttons, even a hover effect to bring them up. Very impressive design and real-world use case. Uses a fade animation transition to go between content.
If you like to add hover effects to your tabs buttons, we recommend you this list of the best CSS button hover effects.
It is also a great example to learn how you can only display certain elements with certain tags using JS.
19. User Menu CSS Tabs
A cool CSS tab menu that uses a lovely gradient as the background.
Comes with an example of UI input elements allowing you to see how it could be used in a real web app. There is no transition between tab content, so everything feels very snappy.
20. Responsive Tabs That Scale Down
A pure HTML and CSS Tab example of a responsive design that uses tabs and a nice animated slide down menu.
These tabs will scale down to a mobile-style menu when the screen gets too small. It is very impressive that this has all been achieved without any JS! The tabs have a lovely hover effect and an indicator on top.
Takeaway
We’ve seen some great examples and each one offers something different. From responsive designs to fancy CSS animations and transitions, there is something for everyone.
Take these examples and easily adapt them to your own brand or style! Tabs are a great way to display a lot more content in one area or to create an intuitive UI layout.
Do you like the idea of tabs but fancy something a bit more different? Have you got lots of content you want to display but need something more flexible and eye-catching? As an amazing alternative to CSS tabs, you can display your content using fullPage.js
FullPage.js is a full-featured JavaScript library that you can use to create unique and powerful full-screen scrollable websites. With fullPage.js you’ll quickly be building highly-polished sites that are up there with the most impressive websites — it is a library that is already used by reputable companies like EA, Sony, and eBay! —
Compatible with the latest software and website editors like Gutenberg and Elementor, you will surely be able to create something unique.
Related Articles
Luke Embrey is a full-stack developer, BSc in Computer Science and based in the UK.
You can find out more about him at https://lukeembrey.com/
Join 2,000+ readers and learn something new every month!