UCLA Component Library

Tabs

bitbucket Report an Issue Slack Join the Slack Discussion

Navigate content within a page or section of your site. Tabs provide the ability to navigate different views or facets of the same content. For example, on one tab you could show a list of cards while another contains paragraphs of text. Rather than listing those views in your navigation, you could divide them into tabs.

Tabs can represent static pages or dynamic views of one page, with a single or multiple URL for each view. UCLA’s tabs have been forked from and themed for our uses from the W3.org tab examples.

Usability Guidance

  • Limit to 2-6 tabs within each page or section.
  • Use succinct labels of 1-2 words in length for each tab.
  • Visually distinguished current and other tabs with active, hover, and focus states.

Accessibility Requirements

  • Wrap your tabs in a container with ARIA role="tablist" and an aria-label.
  • Use the button <button> element for tabs with ARIA role="tab" and aria-selected="true" or "false".
  • Use the button <button> element if tabs change the content view within the same page.
  • Use the anchor <a> element if tabs link to other pages with a unique URL.
  • Ensure component is keyboard accessible. User should be able to focus on tabs with right/left arrows.

Further Reading

Code

HTML

<!-- .tabs is the container for both tabs and panels -->
<div class="tabs">
  <!-- .tablist is the container for tabs only -->
  <div role="tablist" aria-label="content-tabs">
    <button id="panel-01" class="btn tablinks" role="tab" aria-selected="true" aria-controls="panel-01-tab">
      Leadership
    </button>
    <button id="panel-02" class="btn tablinks" role="tab" aria-selected="false" aria-controls="panel-02-tab" tabindex="-1">
      Tenured
    </button>
    <button id="panel-03" class="btn tablinks" role="tab" aria-selected="false" aria-controls="panel-03-tab" tabindex="-1" data-deletable="">
      Adjunct
    </button>
  </div>
  <!-- .tabcontent contain panels of content -->
  <div id="panel-01-tab" tabindex="0" role="tabpanel" aria-labelledby="panel-01" class="tabcontent">
    <p>Panel 1: Leadership</p>
    <p>Include content about your department's faculty leadership here.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem neque, pulvinar ac bibendum eget, hendrerit a dolor. Nulla nec ex nulla.</p>
    <p>
       <a href="#">Example of inline link</a>.
    </p>
  </div>
  <div id="panel-02-tab" tabindex="0" role="tabpanel" aria-labelledby="panel-02" class="tabcontent">
     <p>Panel 2: Tenured</p>
     <p>Include content about your department's tenured faculty here.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem neque, pulvinar ac bibendum eget, hendrerit a dolor. Nulla nec ex nulla.</p>
     <p>
        <a href="#">Example of inline link</a>.
     </p>
  </div>
  <div id="panel-03-tab" tabindex="0" role="tabpanel" aria-labelledby="panel-03" class="tabcontent">
     <p>Panel 3: Adjunct</p>
     <p>Include content about your department's adjunct faculty here.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem neque, pulvinar ac bibendum eget, hendrerit a dolor. Nulla nec ex nulla.</p>
     <p>
        <a href="#">Example of inline link</a>.
     </p>
  </div>
</div>

JavaScript

Javascript to make the tabs functional and accessible is included in the javascript cdn.