Tabs

CSS file | Tabs JS file | Priority Nav JS file

Tabs are UI pattern where content is separated into different sections, where only one section is viewable at a time. They can also be used for navigating between different pages, where all of the page fall under a common high-level heading.

<div class="sba-c-tabs">
  <div class="sba-c-tabs-wrapper" role="navigation">
    <ul class="sba-c-tabs__list">
      <!-- List items are not closed to avoid spacing issues with inline-block display -->
      <li class="sba-c-tabs__item">
        <a class="sba-c-tabs__link  current " href="#">Overview</a>
      <li class="sba-c-tabs__item">
        <button class="sba-c-tabs__link sba-js-visibility-trigger " type="button" aria-expanded="false" aria-controls="dropdown-Documents">
          <span>Documents</span>
        </button>
        <ul id="dropdown-Documents" class="sba-c-tabs__submenu" hidden>
          <li class="sba-c-tabs__submenu__item">
            <a class="sba-c-tabs__submenu__link" href="#">Firm Documents</a>
          </li>
          <li class="sba-c-tabs__submenu__item">
            <a class="sba-c-tabs__submenu__link" href="#">Analyst Documents</a>
          </li>
        </ul>
      <li class="sba-c-tabs__item">
        <a class="sba-c-tabs__link " href="#">SBA Notes</a>
      <li class="sba-c-tabs__item">
        <a class="sba-c-tabs__link " href="#">Messages</a>
      <li class="sba-c-tabs__item">
        <a class="sba-c-tabs__link " href="#">Activity Log</a>
    </ul>
  </div>
</div>

Guidance

• The current tab is highlighted with a class name of current on the tab’s link, or, if there is a submenu, a button. Both would have a sba-c-tabs__link class name.
• Tabs can appear against any background color

Tabs with a Priority+ navigation pattern

The [Priority+ pattern](https://css-tricks.com/the-priority-navigation-pattern/) will show as many horizontal navigation items as will fit in view and hiding the rest behind a "more" button rather than hiding the entire menu. This pattern can, and should most likely be used on any set of tabs.

Use the example below to see the Priority+ pattern in action.

To activate the Priority+ patter to a tabset:

• Add the class name sba-js-priority-nav-tabs to the wrapper sba-c-tabs-wrapper

The Priority+ JavaScript uses PriorityNav.js, which is included in the Certify Design System gem.

In-page tabs

Tabs can also be used to toggle content on the same page.

<div class="sba-c-tabs sba-js-tabs">
  <div class="sba-c-tabs-wrapper">
    <ul class="sba-c-tabs__list" aria-role="tablist">
      <!-- List items are not closed to avoid spacing issues with inline-block display -->
      <li class="sba-c-tabs__item">
        <button class="sba-c-tabs__link" aria-role="tab" type="button">Tab 1</button>
      <li class="sba-c-tabs__item">
        <button class="sba-c-tabs__link" aria-role="tab" type="button">Tab 2</button>
      <li class="sba-c-tabs__item">
        <button class="sba-c-tabs__link" aria-role="tab" type="button">Tab 3</button>
    </ul>
  </div>
  <div class="sba-c-tabs__tab-content">
    <div class="sba-u-padding--2">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend quam sit amet ante sollicitudin dictum. Mauris vulputate elit nec porttitor posuere. Aenean sit amet sapien tristique, tincidunt urna sit amet, luctus est.</p>
    </div>
  </div>
  <div class="sba-c-tabs__tab-content">
    <div class="sba-u-padding--2">
      <p>Praesent id sem eget ipsum faucibus iaculis. Nullam nec dapibus nulla, eget mattis orci. </p>
      <p></p>
    </div>
  </div>
  <div class="sba-c-tabs__tab-content">
    <div class="sba-u-padding--2">
      <p>Nulla congue enim risus, at semper turpis pharetra hendrerit. Nunc vehicula fringilla quam, at vestibulum dolor consectetur sit amet. Curabitur mi neque, facilisis ac ultrices quis, tempor quis felis. Cras at nulla velit. Cras tempor purus neque, ut rhoncus leo fringilla id.</p>
    </div>
  </div>
</div>

Guidance

• Add the class name sba-js-tabs to main tab block element and the Javascript will create the id, aria-controls, aria-expanded, and any CSS classes needed for tab interactions.
• Use padding utility inside the tab content, otherwise content will align with the edge of that tab block. This is done to maintain flexibility of the content.
• In-page tabs may not have a submenu

When to consider something else

• Content is tabs is important where a user could overlook
• Content in tabs is very long where the user needs to continuously scroll up and down
• Tabs should to be used to describe steps