responsive tabbed navigation
September 25, 2014 | 89 Feedbacks

Responsive Tabbed Navigation

A handy tabbed navigation, optimized for mobile devices, with support for both horizontal and vertical menu positioning.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

Tabbed navigations are very useful when you need to organize a considerable amount of side content. It’s very common to use tabs in a product page, for information like delivery options, product material info etc. Another use of tabs is in dashboards, where users need a quick way to switch from one panel to the other.

The code behind this snippet is very straightforward. Mostly CSS, plus a bit of jQuery to animate content height. The interesting point is the way we handled the user experience on small devices: in order to allow users to have as many buttons as they want, we decided to let the navigation scroll horizontally on small devices – instead of hiding it completely or firing a drop-down menu.

Icons credits: Vicons by the talented Victor Erixon.

css tabbed navigation preview

Creating the structure

The HTML is structured in 2 unordered lists (.cd-tabs-navigation and .cd-tabs-content) – the first one is the navigation and the second one the content, both wrapped into the .cd-tabs div.

Adding style

We used CSS media queries to change the navigation positioning from horizontal to vertical, and vice versa. Since we embraced the mobile-first approach, the <nav> element has an overflow:auto to hide part of the unordered list – whose width is higher.  Besides we used -webkit-overflow-scrolling: touch to have a smooth scrolling on touch devices – always applied to the <nav> element.

tabbed navigation responsive

The rest of the CSS and the jQuery are pretty easy, you can download the source file and experimenting with them ;)

Changelog

June 18, 2015
  • Updated to be used with more than one tab in the same page
Sep 25, 2014
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • David K

    I wonder if it’s possible to do this without jQuery, by making use of the :target pseudoselector? Great stuff by the way.

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi David! I think it’s is, but as a side effect the tabs is gonna jump to the top of the page. Not 100% sure though, I’ll look into this

  • taylan

    If you change iPhone device orientation to landscape from portrait and then back to portrait you are not able to scroll on the menu icons :(

    • http://codyhouse.co/ Sebastiano Guerriero

      I totally missed this bug! Thanks for letting me know, I’ll look into this

      • taylan

        Thank you :-) can’t wait to use it in a future project.

        • http://codyhouse.co/ Sebastiano Guerriero

          Hey @disqus_t3HAEEm9YN:disqus, you can download the source file and try now. It should be working fine

          • Juukie14

            Having zero problems on ios 8.0.2 :)

  • http://www.bijudesigner.com/ Biju UI Developer: www.bijudes

    Nice tabs, I think in mobile you change the layout to accordion horizontal tabs design.?

    • http://codyhouse.co/ Sebastiano Guerriero

      Not accordion, but just horizontal tabs :)

      • http://www.bijudesigner.com/ Biju UI Developer: www.bijudes

        yup, exactly something like horizontal tabs :)

  • Bruno Barros

    Man, beautiful job! Would be nice to have this technique on Bootstrap.

  • http://camgould.com/ Cam

    Great! As always. Thanks :)

  • Chu Quang Tú

    Gonna try this today. Very well-done work! Thank you.

  • Irshad Ahamed

    Great one! wanna experiment this

  • http://joseluisquintana.pe/ Jose Luis Quintana

    Very interesting !
    Thanks !

  • Juukie14

    Awesome! Thank you for sharing.

  • http://www.picduniya.com/ Pic Duniya
  • disqus_UZrzuW8WD3

    Hey, dumb question, but how do you have the tabs always as “Vertical” tabs?

    • http://codyhouse.co/ Sebastiano Guerriero

      You just need to delete the content of the last media query (960px)

      • disqus_UZrzuW8WD3

        Thanks for the reply…..
        That “sort of works”?
        1. It’s actually the “second to last” it seems?
        2. Also when the screen size is big, the entire tab content is showing “below” all the tabs, instead of on the side of the tabs. Although, when you lower the screen size the content does go back up to the side of the tabs where it should be, until it get’s mobile size, then the tabs go to the top like they should.

        It seems something else needs to be adjusted with the position of the content when larger screen size?

        • Hannah

          Did you find a solution for this? Thanks!

  • http://www.healthelicious.com.au/ Tom Grimshaw

    Uber awesome Sebastiano! Thanks heaps for creating and posting this.

  • Marc P. Gangmei

    Awesome on the demo. But mess up my site. May be you need to standardize your css further, if i am not wrong. But this is wonderful though not working on my site.

  • Josip Jurkas

    @Sebastiano Guerreiro Tnx for this awesome bit of code. My concern is whether this tabs are having issues if nested inside other plugin (magnific popup in my case). I did the markup and it initializes properly as I want but it does not function when clicking on tabs. So the tabs are nested inside the popup. Any help ?

    • http://codyhouse.co/ Sebastiano Guerriero

      Hi Josip, did you include also our jQuery in addition to the javascript of the plugin?

      • Josip Jurkas

        Yes I did Sebastiano…Maybe it’s positioning problem. Tabs are located on left side inside col3 container and the content on the right side inside col9 ? I’ve tried pretty much everything so far and am running out of ideas…

  • Justin Staley

    I want to remove the icons and use images only — two different images for two tabs. Can you help? Thank you!

  • Kabeer

    Hello Sebastiano, how can i convert this into vertical tabs, acctually m very low in jquery and css.

  • http://www.healthelicious.com.au/ Tom Grimshaw

    Hey Sebastiano, I have implemented it at http://www.healthelicious.com.au/EnergyBoosterBar.html but the icons do not display.
    I first had the vicons.svg file in my standard images folder and altered the URL reference in the style.css to the absolute address – no luck. I then tried various alternatives, even reverting to placing the img folder on the same level as the css folder and using the relative address as in your style.css – all without success.
    For what do I check please?

  • david

    great tabs! how do two sets of tabs work separate on the same page? anyone tryed it? would be great to receive a link!

    • Hafidz Nasir

      Simplest (and maybe not the smartest) way I can think of is create an id for each tab’s and and edit your main.js (line 2 & 3)

      from
      var tabItems = $(‘.cd-tabs-navigation a’),
      tabContentWrapper = $(‘.cd-tabs-content’);

      to
      var tabItems = $(‘#idname.cd-tabs-navigation a’),
      tabContentWrapper = $(‘#idname.cd-tabs-content’);

      _____
      then duplicate everything in main.js for your other tab’s idname.
      Stupid but works for me haha

    • Artemis

      As follow

  • Parsi Man

    very nice , thank you Sebastiano ;)

  • Wasif Munir

    Hi Friends Simple way for having your own mobile app http://bit.ly/1Bplclc

  • Jason Subers

    Ran into an issue with the tab contents not sizing properly when they contained responsive elements. Moving the .innerheight calculation ( var slectedContentHeight = selectedContent.innerHeight(); ) to take place after adding and removing the ‘selected’ classes seems to have resolved this issue for me, though it may have broken the animation.

    • mar

      I had the same problem with div’s containing floated elements. Same solution worked and doesn’t seem to have broken the animation… Thanks for sharing your solution! It was driving me nuts!

  • Chaz Le

    why does it add dots to my list?

    • http://codyhouse.co Claudia Romano

      Hi Chaz, we use a reset.css file to eliminate default style for list items. Make sure to include it too!

  • Bob

    Hi Sebastiano, great menu! One question though: is there a way to navigate to the next tab with a link INSIDE the content box, en not via the tabs? Thanks!

    • http://codyhouse.co Claudia Romano

      Hi Bob, glad you like it! Yes you can do that. You should bind the function to change tab (the code is in the js file) to the click on that link! Hope this helps!

      • Bob

        thanks!

      • arlene aguinaldo

        Hi. I would love to do this, but not sure what binding the function to change the tab means. Can you please share where this piece of code is?

  • Danielle Biggar

    Hi, I am desperate to use your plugin on our site but it keeps saying failed when I upload. Not a valid plugin. Please help. Unfotunatly, for confidentiality, I am not at liberty to provide a site url but I can say we are running harmonUX Core wp theme.

  • TiddlyWin

    Hi, Ive currently implemented this on my site and I’m just wondering how do I link to a specific tab from another page as the hash reference is 0. I’m kinda new to jQuery so any help would be great

    Thanks

    • http://codyhouse.co Claudia Romano

      Hi Tiddly, this article should help: http://css-tricks.com/better-linkable-tabs/

      • saji

        Hi claudia, I checked the link that you shared above. But couldn’t sort that out. can you please help

        Thanks in advance

    • saji

      Hi Tiddly,

      were you able to sort the direct linking to specific tabs? if yes kindly advice..

    • mar

      Hi Tiddly,

      Have you managed to do this?

      Thanks…

    • TiddlyWin

      Hi guys, I’m really sorry about the delay, Ive been so busy with a rather large project. Sad to say I actually ditched this script in favour of the Foundation 5 tab system which allowed for easier deep linking.

  • Eli

    Hi, I’ve tried to implement them on some page, works fine. Just that content under in tags don’t appear. I.e.

    something that doesn’t appear

    Please help.

    • jennylu98

      Hi, Same issue. Did you get it working?

  • Phil

    How do you change the icons? I want to use the other icons by vicons

  • http://lukespoor.me Luke Spoor

    How would this work with a set of tabs within tabs? I want to use it for page navigation on a small page then have some tabbed content within the page. Would this work?

  • Sabin Antony

    is it possible to show google maps on this tabs?
    First tab is showing properly, but not other tabs.

  • bhuvan

    how to set vertical

  • Daniel

    nice work and thanks. let me know how to use it in vertical mode in full screen page not only in media case, exact same as the first screen shot above. tnx

    • Nope

      Just edit the media query yourself.

  • ijas

    Hi , thanks for this wonderful element. Had one query, how can we make a word in the content area a hyperlink?

  • Michelle

    I would like to load the content of each tabbed page using ajax. Is there an event I can listen for that indicates a tab has been clicked?

  • http://peterchrjoergensen.dk Peter C. Jørgensen

    This doesn’t allow for nested lists. How would you solve that?

  • ffferaf

    whether this can be added the function tabs close ? sorry bad english

  • vaibhav

    I am trying to add multiple with data-contents using javascript. I can see the nav menu list but while clicking on particular unable to view data-content. any idea why this is happenig?

    for( var i=0;i<len;i++){
    name=results.rows.item(i).sub_category;
    $(".cd-tabs-navigation").append('‘+name+’‘);
    }

    • http://codyhouse.co Claudia Romano

      Hi, in the main.js file, try replacing

      with:

      Hope this helps!

  • mar

    Hi, I can’t figure out how to reload the content for a specific tab… I checked the link that @claudiarrromano:disqus gave @tiddlywin:disqus , but I still can’t figure it out…

  • twoshadows

    Is there a way to expand the tabs to fill the tab bar?

    • http://codyhouse.co Claudia Romano

      Hi, you may try giving a width:100% to the ul.cd-tabs-navigation, and a percentage to the li items (e.g., if you have 4 tabs, you can set a width: 25%). Hope this helps!

  • KZL

    Hi! Any thoughts on how to implement this in Squarespace? Thanks!

  • http://hormigasenlanube.com/ Javier Gobea

    Hi! Thanks for sharing. One question. It is possible to use some javascript, to mark witch tab the user has read, or unread. Maybe changue some color. It will be useful for a course style.

    Thanks.

    • http://josephrex.me/ Joseph Rex

      Just use :visited on the links

  • llahnoraa

    This is great, perfect example with accessible keyboard. However, do you have option to convert to Accordion in mobile? This will be huge helpful. Thank you.

  • a’ndre ‘ci

    Hi Sebastiano Guerriero (o ciao, forse?).

    We’re testing – hoping to integrate – this snippet on our website, but I’m facing a big problem “nesting” a tab into another one. I already changed all init script to refer to children (avoiding a generic .find())

    this is the pretty-much-untouched code: http://1drv.ms/1iOX9aq

    The website we’re building will be a commercial tracking website, so we’ll get back to you for the license once we decide if we use this!

  • Kim

    Is it possible to use these tabs as a dynamically created element? For instance,
    $(document).on(‘click’, tabItems + ‘ a’, function(event){ … });
    Obviously this doesn’t work but something like it using a delegated event?

  • Jandrik Blom

    Hi Is it possible to navigate to load a HTML page or a angularJS module onclick of one of the tabs? and if so how :D

  • Rico Vostro

    great.

  • Kristy Kleist

    How do I move the tabs to the right?

    • Rohan Tapiyawala

      its easy… for the parent menu tag () currently its says float: left;
      change it to float: right;
      to start from right most corner change direction(rtl) [not recommended]

  • David Panzarella

    Is it possible to build this using flexbox for the navigation buttons?

  • alaink

    Hi, Is there a way to make the navigation “position fixed to the top” but keep all functionality. i find that the tab is perfect for a responsive site, but user will need to scroll up to change tabs, any ideas

  • Alex Simpson

    Has been anyone been able to implement this on Squarespace?

  • Pushker Ghimire

    How to properly update URL hash upon selecting a tab ?

  • Emmanul Awuku

    Thanks for sharing. Please how do I move the tabs to the right hand side?

  • Moslem Hady

    Perfect. thank you

  • http://saicreatives.com/ saicreatives

    Nice Work, I will use in my website.