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: Nucleo, icon organizer & icon library

👋 Important: this experiment is built using the CodyHouse Framework.

Creating the structure

The HTML is structured in 2 unordered lists (.cd-tabs__list and .cd-tabs__panels) - 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 container max-width-md">
  <nav class="cd-tabs__navigation">
    <ul class="cd-tabs__list">
      <li>
        <a href="#tab-inbox" class="cd-tabs__item cd-tabs__item--selected">
          <svg aria-hidden="true" class="icon icon--xs"><path d="M15,0H1C0.4,0,0,0.4,0,1v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1V1C16,0.4,15.6,0,15,0z M14,2v7h-3 c-0.6,0-1,0.4-1,1v2H6v-2c0-0.6-0.4-1-1-1H2V2H14z"></path></svg>
          <span>Inbox</span>
        </a>
      </li>

      <li>
        <!-- ... -->
      </li>

      <!-- ... -->
    </ul> <!-- cd-tabs__list -->
  </nav>

  <ul class="cd-tabs__panels">
    <li id="tab-inbox" class="cd-tabs__panel cd-tabs__panel--selected text-component">
      <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 id="tab-new" class="cd-tabs__panel text-component">
       <!-- ... -->
    </li>

     <!-- ... -->
  </ul> <!-- cd-tabs__panels -->
</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 .cd-tabs__list element has an overflow-x: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 .cd-tabs__list element.

.cd-tabs__list {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

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

⚠️ Note: if you want the navigation to remain vertical on bigger screens, you can remove the scss code inside the md breakpoint (you'll find comments in the style.scss file to show you which parts to remove).