Tab Styles Inspiration

A couple of modern and subtle tab styles and effects for your inspiration. We use pseudo-elements, SVGs and CSS transitions for some of the techniques.

By in Playground on
Demo Download

Today we’d like to share a couple of tab styles with you. The collection contains some styles and effects for modern tabs; from a simple box to a SVG shape. Depending on your design, different tab layouts and looks can spice up your sections; think outside of the box (literally) and you’ll see how interesting the usually boring tabs can become.

For the demo we’ve used a flexbox layout so make sure you view it with a modern browser.

The icons in most of the tabs are from the fantastic Elegant Themes Line Icon Set and we’ve used the Icomoon app to create our custom icon font.

For the tab functionality we’ve used the Blueprint Responsive Full Width Tabs and adjusted it for our needs.

The main common tab style for all tabs can be found in tabs.css and all individual styles are in tabstyles.css

Take a look at some of the examples:

Tab-Style-Inspiration04

Tab-Style-Inspiration03

Tab-Style-Inspiration02

Tab-Style-Inspiration01

There are a couple of example media queries and fallbacks that can be customized. We’ve opted for showing icons only on smaller screens (see the Blueprint) or a horizontal stack where it makes sense.

We hope you enjoy these styles and get inspired 🙂

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Inline Menu Layout with Gallery Panel

Kinetic Typography Page Transition

Image To Grid Transition

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 79

Comments are closed.

  11. Wow! Very nice way to show interaction on touch screens devices as well as desktop… Thanks 🙂

  14. Incredible! I can’t believe you did it again! Your level of creativity in impressive. Thanks a lot for sharing your works.

  21. Wonderful as always!
    Mary Lou is teaching us the grammar, the vocabulary and the musical notes!
    Bravo!
    Lets write the songs, the poems and the future… now.
    Without you and Pedro my work won’t be the same.
    Muchas gracias

  26. Beautiful! Love the circular versions with animated borders. Going to play around with these next week!

  27. Great stuff Mary.

    I tried contacting you through the contact form … is it possible to have a quick chat over email.
    W.

  28. Mary Lou

    You are a serious source of inspiration for me. Whenever I just need a creative shot in the arm I look at your stuff!

  29. Hi, thanks for the wonderful tab menu 🙂
    When I try to add more than 5 tabs it’s not working correctly, the tab-current class applied to third tab by default.
    Do I need to make any changes in JS files? Waiting for your reply.

    Thank you

  32. Great jobs. I lve that tabs but i test it on IE9 and most of your design are broken. It’s a pity to forgot IE9 support. At least think of a substitute style.

  33. One of the reasons i started to love web is you Mary Lou!
    Any chance there could be a fade between the tabs? Thanks!

  34. Hi !

    First of all, thank you very much for all your amazing work.

    I have a question, and despite my research, I can’t find the answer :
    I would like to know if it’s possible to link to a specific tab. For example, I would to open the tab 4 directly when I enter this link : http://tympanus.net/Development/TabStylesInspiration/#section-bar-4, but it doesn’t work. Is there a way to do it ?
    Or is it possible to open the page on a current or active tab that would not be the first tab ?

    Thank you very much for your answer.
    (And sorry for my bad english…)

  35. how to link directly to specific tab ? something like anchor. Im trying to link from drop down menu directly to tab. Please help…

    • I have the same question. I need to work with drop down tabs but the next tab load other contet. Please help!

    • Did any find a solution or post how to link to a tab from another page. I am also very interested in this solution.

      Thank You

    • Try changing the 0 in line 32 in cbpFWTabs1.js:
      start: 0

      to a different number. If you have five tabs, they are numbered 0, 1…4. So if you want it to open on the second tab, then you want:
      start: 1

      However, this means you will need a different cbpFWTabs1.js file for each page that opens with a different tab, unless someone can find a more elegant solution.

  38. Outstanding! Very nicely done! My site will be much better because of your code and beautiful designs! I am learning a lot from you! Thank you very much. Hope someday I will inspire others too.

  39. I love it! Here is my question: How to make only three ( e.g. home, deals, and upload ) items in the menu?

  42. Hi Mary Lou, you doing great job and I adore your work. I have question about this template. Why this template work different on Safari browser. When I am positioned on the tabs in inspect element display: -webkit-flex is disabled. Can you help me about this? Tnx for your attention.

  44. Hi Mary,

    This is Karthikeyan from Chennai, India. Am working as a Web Designer in a MNC Company. After get into this field Web Designing, when ever i get time, i will go through your articles. It’s really amazing and am totally impressed on your effort.

    Keep going. It will be helpful for all the developers around the universe.

    God Bless You. Wish you a Very “Merry Christma”s & “Happy New Year 2015”

  45. Ok, so, as any other wondeful examples on this website i can’t get to make it works for any of them inside wordpress, i tested for days, every ways possible, i enqueue every single script properly, check is they are loaded, and jquery when neede, i can’t get any of these scripts to work inside wordpress, it’s unbelievable how unconvenient this thing is. Maybe i can get a clue on how make it work in wordpress?

  50. Great job and wonderful effort. I love this tab style.

    I was wondering by any chance the content wrap can be extended till the end of a web browser?