Skip to content

Tab

The Tabbed Document Interface or Tab allows multiple panels to be contained within a single window, using tabs as a navigational widget for switching between sets of documents.

Tabs are useful for:

  • Bringing a set of 2 to 4 related elements together that do not require comparison
  • Require that only one element of a set is visible to reduce information overload
  • Hide a set of choices in an effort to “shortcut” the user’s potential selections
  • Reduce movement potential when interacting with large sections

How to Use the Tab Control

Tabs are great for helping a user with information overload, presenting only one concept at at time on screen. The content area is fairly flexible, allowing a variety of non-interactive content types within.

Tabs work best when composed with other content that runs down the page, usually in a single column. Tabs in column layouts with images or other content can create large gaps and create unnecessary scrolling. Avoid filler images on the same frame with tab controls or relocate the images within the tab panels.

Keep in mind that users expect to use a tab interface to select the content that they want to view. Forcing a user to view all tabs is possible within the framework, but counter to user expectations.

While the panels of a tab control can contain more information than other controls, care should be taken regarding the length. If the content is equivalent to other pages in the course, consider breaking the tab control’s content over multiple pages. Large tab controls that cause a user to scroll back and forth to view the content of each tab can cause inactive tabs to be dismissed as unimportant. This problem is even more painful for the user if the tab must share space on the screen with an image or on mobile devices.

Do

  • Use Tabs for a small number of terms and longer definitions.
  • Use images, lists, columns or other elements within panel content.
  • Use icons (along with accessible labels) for tabs.

Don’t

  • Use attempt to use more than 3-5 tabs on desktop, or 2-3 tabs if the course needs to support mobile devices.
  • Use long phrases as tabs – 1-2 words maximum.
  • Use Tabs for terms or concepts that a user is expected to compare (try Static or 2-Sided Cards instead).

Reveal

Tab controls can reveal other elements when the tab is selected. Only one element per tab can be revealed, however multiple child elements can be contained within the revealed element, depending on the layout of the interaction.

Note that reveal elements are displayed due to user interaction. Because of this, the default tab cannot have a reveal element. This detail may require that the tab control has an introductory panel.

Unstyled Example



Item 1

Item 1 details

Example Code

<div id="tab-unstyled" class="tab-control">
  <div class="tab-list">
    <button type="button">Item 1</button>
    <button type="button">Item 2</button>
    <button type="button">Item 3</button>
  </div>
  <div class="panel-container">
    <div class="tab-panel">
      <div class="inner">
        <h3>Item 1</h3>
        <p>Item 1 details</p>
      </div>
    </div>
    <div class="tab-panel" hidden>
      <div class="inner">
        <h3>Item 2</h3>
        <p>Item 2 details.</p>
      </div>
    </div>
    <div class="tab-panel" hidden>
      <div class="inner">
        <h3>Item 3</h3>
        <p>Item 3 details.</p>
      </div>
    </div>
  </div>
</div>
document.addEventListener('ready', function() {
  // Initialize Component Instance
  TabControl.create('#tab-unstyled'); 
  // Handle Complete Event
  document.getElementById('tab-unstyled').addEventListener('complete', function (e) { 
    console.log('I am complete');
  });
});