Responsive Tabbed Navigation

Responsive Tabbed Navigation

A handy tabbed navigation, optimized for mobile devices, with support for both horizontal and vertical menu positioning.

Nucleo icons

Sponsored by Nucleo, a free application to collect, customize and export all your icons as icon font and SVG symbols. Made by the CodyHouse folks!

All the resources available on CodyHouse are released under the BSD-3-Clause license. You can support our project with a Paypal donation 🙌

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 JavaScript 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: Nucleo icons.

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.

<div class="cd-tabs js-cd-tabs">
   <nav>
      <ul class="cd-tabs__navigation js-cd-navigation">
         <li><a data-content="inbox" class="cd-selected" href="#0">Inbox</a></li>
         <li><!-- ... --></li>
         <!-- ... -->
      </ul> <!-- cd-tabs__navigation -->
   </nav>

   <ul class="cd-tabs__content js-cd-content">
      <li data-content="inbox" class="cd-selected">
         <p>Inbox Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum recusandae rem animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam eveniet laboriosam?</p>

         <p>Inbox Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum recusandae rem animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam eveniet laboriosam?</p>
      </li>

      <li data-content="new"><!-- ... --></li>

      <!-- ... -->
   </ul> <!-- cd-tabs__content -->
</div> <!-- cd-tabs -->

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 bigger.  Besides we used -webkit-overflow-scrolling: touch to have a smooth scrolling on touch devices - always applied to the <nav> element.

tabbed navigation responsive

.cd-tabs nav {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /*...*/
}

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

Join our newsletter

Get our monthly recap with the latest CodyHouse news