American Express American Express |

Tabs

Purpose

Tabs give customers the ability to view only the content they are interested in or easily switch between content. A tab label describes the tab’s associated grouping of content.

Keep the label character count short and succinct. We recommend a maximum of 12 characters and no more than four tabs.

Difference between tabs and navigation bar

While tabs and a navigation bar may seem to have a similar purpose, they have a strong cognitive difference. The content of each tab is considered to be related to that of the others and selecting between them keeps the customer on the same page. In a navigation bar, however, the content of each section isn’t necessarily related to the others, and making a selection will open up that content in a separate view.

Activation Types

The tabs list supports keyboard shortcuts to easily navigate through the tabs. Using the left ← and right → arrow keys moves focus to the next and previous tab respectively. Use the Home key to focus the first tab and the End key to focus the last tab. Users can then press Space or Enter to activate that tab. Specifying data-activation-type="automatic" on the tabs container will automatically select the tab when it receives focus as well.

By default data-activation-type="manual" is specified. If the individual tab panels can be displayed without noticeable latency, then the automatic activation type is recommended, allowing users to quickly navigate through the tabs. For more details on making this decision, check the WAI-ARIA Authoring Practices

Requirements

The DLS tabs component requires both dls.css and dls.js due to the complexities involved with its logic, functionality, and animations.

Interaction - Mobile

Tapping on a tab will switch its state to active and content will change below.

Example - 3 tabs with default data-activation-type (manual)

Copy
<div class="tabs border" data-toggle="tabs">
    <div class="tab-menu" role="tablist">
        <button id="tab1" class="tab-link pad-responsive-lr" role="tab" aria-selected="true" aria-controls="tabpanel1">
            <span>Pay with Points</span>
        </button>
        <button id="tab2" class="tab-link pad-responsive-lr" role="tab" aria-selected="false" aria-controls="tabpanel2" tabindex="-1">
            <span>Redeem for Gift Cards</span>
        </button>
        <button id="tab3" class="tab-link pad-responsive-lr" role="tab" aria-selected="false" aria-controls="tabpanel3" tabindex="-1">
            <span>Added to Card</span>
        </button>
    </div>
    <div class="tab-content pad-tb pad-responsive-lr">
        <div role="tabpanel" id="tabpanel1" aria-labelledby="tab1">
            Tab 1 content
        </div>
        <div class="hidden" id="tabpanel2" role="tabpanel" aria-labelledby="tab2">
            Tab 2 content
        </div>
        <div class="hidden" id="tabpanel3" role="tabpanel" aria-labelledby="tab3">
            Tab 3 content
        </div>
    </div>
</div>

Example - 6 tabs with data-activation-type of automatic

Copy
<div class="tabs border" data-toggle="tabs" data-activation-type="automatic">
    <div class="tab-menu" role="tablist">
        <button class="tab-link pad-responsive-lr" role="tab" id="tablink1" aria-selected="true" aria-controls="tablinkpanel1">
            <span>Pay with Points at Checkout</span>
        </button>
        <button class="tab-link pad-responsive-lr" role="tab" id="tablink2" aria-selected="false" aria-controls="tablinkpanel2" tabindex="-1">
            <span>Redeem for Gift Cards</span>
        </button>
        <button class="tab-link pad-responsive-lr" role="tab" id="tablink3" aria-selected="false" aria-controls="tablinkpanel3" tabindex="-1">
            <span>Cover Card Charges</span>
        </button>
        <button class="tab-link pad-responsive-lr" role="tab" id="tablink4" aria-selected="false" aria-controls="tablinkpanel4" tabindex="-1">
            <span>Book Travel</span>
        </button>
        <button class="tab-link pad-responsive-lr" role="tab" id="tablink5" aria-selected="false" aria-controls="tablinkpanel5" tabindex="-1">
            <span>Transfer Points</span>
        </button>
        <button class="tab-link pad-responsive-lr" role="tab" id="tablink6" aria-selected="false" aria-controls="tablinkpanel6" tabindex="-1">
            <span>Go Shopping</span>
        </button>
    </div>
    <div class="tab-content pad-tb pad-responsive-lr">
        <div id="tablinkpanel1" role="tabpanel" aria-labelledby="tablink1">
            Tab 1 content
        </div>
        <div class="hidden" id="tablinkpanel2" role="tabpanel" aria-labelledby="tablink2">
            Tab 2 content
        </div>
        <div class="hidden" id="tablinkpanel3" role="tabpanel" aria-labelledby="tablink3">
            Tab 3 content
        </div>
        <div class="hidden" id="tablinkpanel4" role="tabpanel" aria-labelledby="tablink4">
            Tab 4 content
        </div>
        <div class="hidden" id="tablinkpanel5" role="tabpanel" aria-labelledby="tablink5">
            Tab 5 content
        </div>
        <div class="hidden" id="tablinkpanel6" role="tabpanel" aria-labelledby="tablink6">
            Tab 6 content
        </div>
    </div>
</div>

Tabs with Icons

Usage

Though icons can be used within tabs to help give context to the content, don’t overuse them. Make sure the icons within the tabs work with other icons on the page.

EXAMPLE - 4 Tabs

Copy
<div class="tabs border" data-toggle="tabs">
    <div class="tab-menu" role="tablist">
        <button id="tabIcon1" class="tab-link pad-responsive-lr" role="tab" aria-selected="true" aria-controls="tabIconPanel1">
          <i class="margin-1-b" data-dls-icon="card-swipe" data-dls-icon-variant="filled" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
          <span>Pay with Points at Checkout</span>
        </button>
        <button id="tabIcon2" class="tab-link pad-responsive-lr" role="tab" aria-selected="false" aria-controls="tabIconPanel2" tabindex="-1">
          <i class="margin-1-b" data-dls-icon="gift" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
          <span>Redeem for Gift Cards</span>
        </button>
        <button id="tabIcon3" class="tab-link pad-responsive-lr" role="tab" aria-selected="false" aria-controls="tabIconPanel3" tabindex="-1">
          <i class="margin-1-b" data-dls-icon="airplane" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
          <span>Book Travel</span>
        </button>
        <button id="tabIcon4" class="tab-link pad-responsive-lr" role="tab" aria-selected="false" aria-controls="tabIconPanel4" tabindex="-1">
          <i class="margin-1-b" data-dls-icon="change" data-dls-icon-size="md" data-dls-icon-role="decorative"></i>
          <span>Transfer Points</span>
        </button>
    </div>
    <div class="tab-content pad-tb pad-responsive-lr">
        <div id="tabIconPanel1" role="tabpanel" aria-labelledby="tabIcon1">
            Tab 1 content
        </div>
        <div class="hidden" id="tabIconPanel2" role="tabpanel" aria-labelledby="tabIcon2">
            Tab 2 content
        </div>
        <div class="hidden" id="tabIconPanel3" role="tabpanel" aria-labelledby="tabIcon3">
            Tab 3 content
        </div>
        <div class="hidden" id="tabIconPanel4" role="tabpanel" aria-labelledby="tabIcon4">
            Tab 4 content
        </div>
    </div>
</div>

Functionality

If you are using dls.js, reference the attributes below for functionality.

Attribute Name Options Description
data-toggle tabs Creates a tab object; required for dls.js functionality.
data-activation-type manual/automatic Specifies if selection should follow focus. By default, "manual" activation is used. See "Activation Types" above for more details.
aria-selected true/false Indicates which tab panel is currently showing or not.