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
      class="ucla-tablink is-active"
      aria-selected="true"
      role="tab"
    >
      Leadership
    </button>
    <button
      class="ucla-tablink"
      aria-selected="false"
      role="tab"
    >
      Tenured
    </button>
    <button
      class="ucla-tablink"
      aria-selected="false"
      role="tab"
    >
      Adjunct
    </button>
  </nav>
  <!-- .tabcontent contain panels of content -->
  <section class="ucla-tabpanels">
    <article
      class="ucla-tabpanel"
      role="tabpanel"
      tabindex="0"
    >
      <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
      class="ucla-tabpanel"
      role="tabpanel"
      tabindex="0"
      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
      class="ucla-tabpanel"
      role="tabpanel"
      tabindex="0"
      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 class="ucla-tablink"  aria-selected="false" role="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 tabindex="0" role="tabpanel" class="ucla-tabpanel">
    <!-- ... -->
  </article>
</section>
<!-- ... -->

Preview Example

JavaScript

Methods

activateTab(panelID)

Activates the tab item with the ID value of .ucla-tabpanels".

const tabs = document.querySelector('your tabs component');
tabs.activateTab('your tab panel ID');

Events

bruinTabActivated

Emits when an tab panel is activated.

document.addEventListener('bruinTabActivated', function() {
  // Your JavaScript here
})