Tabs

Tabs provide the ability to navigate different views or facets of the same content.

When to use

Use tabs to group related information into different categories, helping to reduce cognitive load.

Anatomy

1. Title (required)

2. Yellow Border - Active (required)

3. Container (required)

4. Gray Border - Inactive (required)

<!-- .tabs is the container for both tabs and panels -->
<div class="ucla-tabs">
  <!-- .tablist is the container for tabs only -->
  <nav class="ucla-tabslist" role="tablist" aria-label="content-tabs">
    <button
      id="panel-01"
      class="ucla-tablink is-active"
      role="tab"
      aria-selected="true"
      aria-controls="panel-01-tab"
    >
      Leadership
    </button>
    <button
      id="panel-02"
      class="ucla-tablink"
      role="tab"
      aria-selected="false"
      aria-controls="panel-02-tab"
    >
      Tenured
    </button>
    <button
      id="panel-03"
      class="ucla-tablink"
      role="tab"
      aria-selected="false"
      aria-controls="panel-03-tab"
    >
      Adjunct
    </button>
  </nav>
  <!-- .tabcontent contain panels of content -->
  <section class="ucla-tabpanels">
    <article
      id="panel-01-tab"
      tabindex="0"
      role="tabpanel"
      aria-labelledby="panel-01"
      class="ucla-tabpanel"
    >
      <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>
    </article>
    <article
      id="panel-02-tab"
      tabindex="0"
      role="tabpanel"
      aria-labelledby="panel-02"
      class="ucla-tabpanel"
      hidden
    >
      <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>
    </article>
    <article
      id="panel-03-tab"
      tabindex="0"
      role="tabpanel"
      aria-labelledby="panel-03"
      class="ucla-tabpanel"
      hidden
    >
      <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>
    </article>
  </section>
</div>

Best Practices

Limit to 2-6 tabs within each page or section.

Tabs should never be used for primary navigation. If tabs become too complex, consider using a standard navigation pattern.

The tabs component has two parts. The navigation and the panels. To build, you must first start with the .ucla-tabs container:

<div class="ucla-tabs"></div>

Navigation

The first part of the tabs component is the navigation. It’s comprised of inline buttons that are clicked to reveal it’s corresponding content. To build, you must use the following structure:

• .ucla-tabslist - Container for buttons
  • .ucla-tablink - Link for displaying tab content

<!-- ... -->
<nav class="ucla-tabslist" role="tablist" aria-label="content-tabs">
  <button id="panel-01" class="ucla-tablink"  aria-selected="false" aria-controls="panel-01-tab">
    Tab 1
  </button>
  <!-- ... -->
</nav>
<!-- ... -->

_Note: The aria-controls and id for the tab content needs to be {Button ID}-tab.

Tab Content

The second part of the tabs component is the content. Like the navigation, the tab content also has a container with the content nested inside:

• .ucla-tabpanels - Container for the Tab Panels
  • .ucla-tabpanel - Element that houses the content

<!-- ... -->
<section class="ucla-tabpanels">
  <article id="panel-01-tab" tabindex="0" role="tabpanel" aria-labelledby="panel-01" class="ucla-tabpanel">
    <!-- ... -->
  </article>
</section>
<!-- ... -->

_Note: The id of the .ucla-tabpanel must match the aria-controls in order for the tabs to function. See example below:

<div class="ucla-tabs">
  <nav class="ucla-tabslist" role="tablist" aria-label="content-tabs">
    <button id="panel-01" class="ucla-tablink"  aria-selected="false" aria-controls="panel-01-tab">
      Tab 1
    </button>
  </nav>
  <section class="ucla-tabpanels">
    <article id="panel-01-tab" tabindex="0" role="tabpanel" aria-labelledby="panel-01" class="ucla-tabpanel">
      <!-- ... -->
    </article>
  </section>
</div>

Preview Example