Tabs

Tabs are a way of splitting a page into 2-5 logical chunks of data to display. Each of these chunks can be given a short, single word title. They are not a suitable design pattern where more than 4 items need to be displayed, and it is highly recommended that you use only 3 tabs with titles of 10 characters or less.

Tabs should each contain a substantive amount of information (more than a paragraph or equivalent non-text content) and not be used to display a single link (eg. Click a tab only to find "click here to do this One Thing"). Conversely if you find that a tab is super long, or contains a large amount of bandwidth-heavy content, do not use the tab component as this will cause the user to download a large amount of content which might not be used. Instead, consider splitting this content out into a separate page that can be purposefully opened if it is desired.

For use on a homepage

Tabs should not be confused with your site navigation when used on a homepage, as it is likely that you will have a larger IA than can be communicated via 2-5 tabs. Instead, tabs are appropriate if you would like to showcase the most important content on your website to users and lead them deeper into your site structure to learn more.

It is important to note that not every page on your website needs to be accessible from either your homepage or local navigation, indeed trying to make either your local navigation or tabs reflect your IA in its entirety is a poor design decision as it will likely confuse your user by giving them too much to think about before they can make an initial click decision.

Full width navigation tabs

<div class="tabbed-nav" data-tabbed="" id="nav">
  <div class="full-width">
    <nav role="tablist">
      <a href="#1tab" role="tab">Tab1</a><a data-current="" href="#tab2" role="tab">Tab2</a><a href="#tab3" role="tab"><span class="small" data-icon="chat">Contact</span></a><a href="/" role="tab">External</a>
    </nav>
  </div>
  <div class="tab" id="1tab" role="tabpanel">
    <section class="lead">
      <p>
        Lorem ipsum dolor sit amet, dissentiet definitiones vix te, libris quaeque repudiandae mei cu, at duo indoctum instructior delicatissimi. Et sed stet partem, enim altera eam ei. Pro erat zril omittam ea. Eu choro aeterno vix, nonumy aliquip mei ne, cum putant perpetua periculis at.
      </p>
    </section>
  </div>
  <div class="tab" id="tab2" role="tabpanel">
    <section>
      <h2 class="title">
        Lorem ipsum dolor sit
      </h2>
      <p>
        Amet, dissentiet definitiones vix te, libris quaeque repudiandae mei cu, at duo indoctum instructior delicatissimi. Et sed stet partem, enim altera eam ei. Pro erat zril omittam ea. Eu choro aeterno vix, nonumy aliquip mei ne, cum putant perpetua periculis at.
      </p>
    </section>
  </div>
  <div class="tab" id="tab3" role="tabpanel">
    <section class="lead">
      <p>
        Vis ne ullum voluptatibus, qui te veniam dictas cotidieque. Ut his sale audire aperiri. Augue novum cu nec, vel id brute meliore oporteat. In tation expetendis eos.
      </p>
      <p>
        <a class="button" data-tab="1" href="#tab1">Go back to tab 1</a>
      </p>
    </section>
    <section>
      <h2 class="title">
        Et vim viris habemus referrentur
      </h2>
      <p>
        Vel veniam tempor definiebas at. No modus albucius vis, ad duis fabellas per. Et vim viris habemus referrentur, in mei liber scaevola. Ponderum referrentur consectetuer sea eu, illud temporibus vim ei. Cu has assum consectetuer, omittam scriptorem est te. At mel verear verterem reformidans, ei sonet quodsi eripuit mei, per utinam vituperata an.
      </p>
    </section>
  </div>
</div>

Sidebar tabs are another form of navigational tabs for use with the sidebar layout. For practical examples, have a look at the search layout (view source) and course layout (view source).

If the sidebar is on the right-hand side of the page, use class sidebar-tabs--right to bring the tabs against the left edge of the sidebar.

By default, sidebar tabs are designed to scroll the page up to a full-width tabs component (above). If one does not exist on the page, it will scroll to itself. You can set a different scroll target with the data-scroll-target attribute like in the example below.

Warning: The sidebar layout should only be used as the main layout, and not in the middle of a page as in the example below. 

<p>
  <strong>Sidebar tabs</strong> are another form of navigational tabs for use with the <strong>sidebar layout</strong>. For practical examples, have a look at the <a href="/layouts/search">search layout</a> (<a href="/layouts/search/source">view source</a>) and <a href="/layouts/course">course layout</a> (<a href="/layouts/course/source">view source</a>).
</p>
<p>If the sidebar is on the right-hand side of the page, use class <code>sidebar-tabs--right</code> to bring the tabs against the left edge of the sidebar.
</p>
<p>By default, sidebar tabs are designed to scroll the page up to a full-width tabs component (above). If one does not exist on the page, it will scroll to itself. You can set a different scroll target with the <code>data-scroll-target</code> attribute like in the example below.
</p>
<p class="notice notice--warning">
  <strong>Warning:</strong> The sidebar layout should only be used as the <strong>main layout</strong>, and not in the middle of a page as in the example below.
</p>
<div class="layout-sidebar sidebar-tabs" data-scroll-target="#sidebar-tabs-example" id="sidebar-tabs-example">
  <div class="aside layout-sidebar__side">
    <div class="layout-sidebar__side__inner box">
      <h2 class="subtitle">
        Example
      </h2>
      <p>
        No modus albucius vis, ad duis fabellas per. Et vim viris habemus referrentur, in mei liber scaevola. Ponderum referrentur consectetuer sea eu, illud temporibus vim ei.
      </p>
      <ul class="sidebar-tabs__list">
        <li>
          <a aria-controls="1side" aria-selected="true" class="sidebar-tabs__tab" href="#1side" role="tab">Tab 1</a>
        </li>
        <li>
          <a aria-controls="side-2" class="sidebar-tabs__tab" href="#side-2" role="tab">Tab 2</a>
        </li>
        <li>
          <a aria-controls="side-3" class="sidebar-tabs__tab" href="#side-3" role="tab">Tab 3</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="layout-sidebar__main sidebar-tabs__panels">
    <div class="layout-sidebar__main__inner box">
      <div class="sidebar-tabs__panel box" id="1side" role="tabpanel">
        <h2>
          Tab 1
        </h2>
        <p>
          Et vim viris habemus referrentur, in mei liber scaevola. Ponderum referrentur consectetuer sea eu, illud temporibus vim ei. Cu has assum consectetuer, omittam scriptorem est te. At mel verear verterem reformidans, ei sonet quodsi eripuit mei, per utinam vituperata an.
        </p>
      </div>
      <div class="sidebar-tabs__panel box" hidden="" id="side-2" role="tabpanel">
        <h2>
          Tab 2
        </h2>
        <p>
          Vel veniam tempor definiebas at. No modus albucius vis, ad duis fabellas per. Et vim viris habemus referrentur, in mei liber scaevola. Ponderum referrentur consectetuer sea eu, illud temporibus vim ei. Cu has assum consectetuer, omittam scriptorem est te. At mel verear verterem reformidans, ei sonet quodsi eripuit mei, per utinam vituperata an.
        </p>
      </div>
      <div class="sidebar-tabs__panel box" hidden="" id="side-3" role="tabpanel">
        <h2>
          Tab 3
        </h2>
        <p>
          Ponderum referrentur consectetuer sea eu, illud temporibus vim ei. Cu has assum consectetuer, omittam scriptorem est te. At mel verear verterem reformidans, ei sonet quodsi eripuit mei, per utinam vituperata an.
        </p>
      </div>
    </div>
  </div>
</div>

In page tabs

Duis placerat mattis tristique. Ut feugiat non nulla nec pellentesque. Fusce consequat volutpat ligula, non consequat leo. Vivamus pharetra sed nulla ut fermentum. Nam non urna nisl. Donec et orci massa. Proin congue quam mauris, lobortis posuere erat facilisis vitae. Nunc erat nibh, auctor sit amet rutrum vel, pretium vitae mauris. Cras eu odio lectus. Sed luctus eros quis tortor dignissim tincidunt. Nulla elit mauris, rutrum nec massa non, ultricies mattis sapien.

Sed ante purus, sagittis non tortor vel, vestibulum rutrum purus. Morbi at tempor lorem, malesuada egestas leo. Praesent semper viverra est a lacinia. Donec sit amet condimentum dui. Sed elementum ligula erat, in volutpat velit elementum ut. Aliquam condimentum erat eget elit imperdiet, in pretium magna iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam vitae aliquet nibh. Ut turpis sem, interdum in risus at, eleifend elementum enim. Donec ut mi ac dolor eleifend tempus. Sed convallis quam ipsum, non interdum lectus blandit ut. Sed at neque sit amet lectus venenatis tincidunt vel non nisl. Vivamus sodales ultrices diam, sed convallis nisi tincidunt a. Morbi mollis tristique diam quis rutrum. Aliquam mauris est, molestie at magna at, luctus mattis nunc.

photo 1
Caption to the image (photo 1)

Cras pretium et elit id bibendum. Duis dapibus condimentum justo, aliquet porta justo vehicula quis. Pellentesque vulputate mattis lacus quis elementum. Vivamus vitae lobortis orci. Praesent interdum et elit non dignissim. Morbi sit amet nibh vitae tortor ullamcorper consequat sed non leo. Nam massa est, egestas ac felis id, blandit luctus metus. Mauris eu aliquet nisi. Donec nunc ipsum, fermentum quis enim posuere, dapibus fermentum libero. Aliquam erat volutpat. Nulla tempor tellus lorem, dapibus euismod mi mattis sit amet. Sed ac orci consequat, aliquet ligula vitae, facilisis elit. Sed et lobortis est, eu facilisis massa. 

<section>
  <div class="tabbed" data-tabbed="true">
    <nav role="tablist">
      <a href="#first-tab" role="tab">First Tab</a><a data-current="true" href="#second-tab" role="tab">2nd tab</a><a href="#third-tab" role="tab">Third tab</a>
    </nav>
    <section id="first-tab" role="tabpanel">
      <p>
        Duis placerat mattis tristique. Ut feugiat non nulla nec pellentesque. Fusce consequat volutpat ligula, non consequat leo. Vivamus pharetra sed nulla ut fermentum. Nam non urna nisl. Donec et orci massa. Proin congue quam mauris, lobortis posuere erat facilisis vitae. Nunc erat nibh, auctor sit amet rutrum vel, pretium vitae mauris. Cras eu odio lectus. Sed luctus eros quis tortor dignissim tincidunt. Nulla elit mauris, rutrum nec massa non, ultricies mattis sapien.
      </p>
    </section>
    <section id="second-tab" role="tabpanel">
      <p>
        Sed ante purus, sagittis non tortor vel, vestibulum rutrum purus. Morbi at tempor lorem, malesuada egestas leo. Praesent semper viverra est a lacinia. Donec sit amet condimentum dui. Sed elementum ligula erat, in volutpat velit elementum ut. Aliquam condimentum erat eget elit imperdiet, in pretium magna iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam vitae aliquet nibh. Ut turpis sem, interdum in risus at, eleifend elementum enim. Donec ut mi ac dolor eleifend tempus. Sed convallis quam ipsum, non interdum lectus blandit ut. Sed at neque sit amet lectus venenatis tincidunt vel non nisl. Vivamus sodales ultrices diam, sed convallis nisi tincidunt a. Morbi mollis tristique diam quis rutrum. Aliquam mauris est, molestie at magna at, luctus mattis nunc.
      </p>
    </section>
    <section id="third-tab" role="tabpanel">
      <figure class="figure figure--min">
        <img alt="photo 1" class="figure__content" src="http://placekitten.com/g/500/300" /><figcaption class="figure__caption">Caption to the image (photo 1)</figcaption>
      </figure>
      <p>
        Cras pretium et elit id bibendum. Duis dapibus condimentum justo, aliquet porta justo vehicula quis. Pellentesque vulputate mattis lacus quis elementum. Vivamus vitae lobortis orci. Praesent interdum et elit non dignissim. Morbi sit amet nibh vitae tortor ullamcorper consequat sed non leo. Nam massa est, egestas ac felis id, blandit luctus metus. Mauris eu aliquet nisi. Donec nunc ipsum, fermentum quis enim posuere, dapibus fermentum libero. Aliquam erat volutpat. Nulla tempor tellus lorem, dapibus euismod mi mattis sit amet. Sed ac orci consequat, aliquet ligula vitae, facilisis elit. Sed et lobortis est, eu facilisis massa.
      </p>
    </section>
  </div>
</section>