Ready Added in 1.0.0

Tabs

Use tabs to allow users to switch between logical chunks of content without having to leave the current page.

Migrating to Rivet 2

This version of Rivet is deprecated. View the tabs documentation on the Rivet 2 website.

Default tabs example

Panel 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="rvt-tabs">
    <div class="rvt-tabs__tablist" role="tablist" aria-label="Rivet tabs">
        <button class="rvt-tabs__tab" role="tab" aria-selected="true" data-tab="tab-1" id="t-one">
            Tab one
        </button>
        <button class="rvt-tabs__tab" role="tab" aria-selected="false" data-tab="tab-2" id="t-two" tabindex="-1">
            Tab two
        </button>
        <button class="rvt-tabs__tab" role="tab" aria-selected="false" data-tab="tab-3" id="t-three" tabindex="-1">
            Tab three
        </button>
    </div>
    <div class="rvt-tabs__panel" tabindex="0" role="tabpanel" id="tab-1" aria-labelledby="t-one">
        <span class="rvt-ts-23 rvt-text-bold">Panel 1</span>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
            in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
    <div class="rvt-tabs__panel" tabindex="0" role="tabpanel" id="tab-2" aria-labelledby="t-two" hidden="">
        <span class="rvt-ts-23 rvt-text-bold">Panel 2</span>
        <p>
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
    <div class="rvt-tabs__panel" tabindex="0" role="tabpanel" id="tab-3" aria-labelledby="t-three" hidden="">
        <span class="rvt-ts-23 rvt-text-bold">A grid inside a tab panel</span>
        <div class="rvt-grid">
            <div class="rvt-grid__item-4-md-up">
                <p>
                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
            <div class="rvt-grid__item-8-md-up">
                <p>
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>
        </div>
    </div>
</div>

When to use

Displaying a small number (2-5 categories) of closely related, distinct data
Displaying multiple unique views of the same data
Category labels are short and easy to understand
Switching between views is common for your users’ goals
Category names are unlikely to change very often and number of categories is unlikely to grow

When to consider something else

Displaying six or more categories (or more than what will easily fit horizontally on your target users' screen)
Displaying categories that require long labels for clarity
Users will frequently need to compare data from different tabs/categories
The data for each tab could just as easily function as its own page
If you are tempted to include a ‘More’ tab
If the amount of data that would be shown on each tab is small

Accessibility Requirements

Implementation notes

Do not stack rows of tabs - only use a small set of tabs in a single row
Order tabs in a logical manner
Default tab (on page load) should be the first tab. The first tab should be the most frequently viewed or most important tab.
Tab order should stay the same as the user moves between tabs
Label tabs with clear concise categories - 1-2 words is ideal
Do not use all capital letters in the tab labels
Do not include a ‘More’ tab
Page should not reload or refresh when the user switches to a different tab
Only the content of the tab and tab bar indicating the user’s location should change. The rest of the page should remain the same.

Fitted version

Applying the modifier class .rvt-tabs--fitted to the main .rvt-tabs container will make the tabs take up equal amounts of the space of the tabs container.

Sue’s Salads

Panel 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="rvt-tabs rvt-tabs--fitted">
    <div class="rvt-tabs__tablist" role="tablist" aria-label="Rivet tabs">
        <button class="rvt-tabs__tab" role="tab" aria-selected="true" data-tab="tab-1-fitted" id="t-one-fitted">
            Tab one
        </button>
        <button class="rvt-tabs__tab" role="tab" aria-selected="false" data-tab="tab-2-fitted" id="t-two-fitted" tabindex="-1">
            Tab two
        </button>
        <button class="rvt-tabs__tab" role="tab" aria-selected="false" data-tab="tab-3-fitted" id="t-three-fitted" tabindex="-1">
            Tab three
        </button>
    </div>
    <div class="rvt-tabs__panel" tabindex="0" role="tabpanel" id="tab-1-fitted" aria-labelledby="t-one-fitted">
        <span class="rvt-ts-26 rvt-text-bold rvt-display-block">Sue’s Salads</span>
        <p>
            Panel 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
    <div class="rvt-tabs__panel" tabindex="0" role="tabpanel" id="tab-2-fitted" aria-labelledby="t-two-fitted" hidden="">
        <span class="rvt-ts-26 rvt-text-bold rvt-display-block">JJ’s Diner</span>
        <p>
            Panel 2: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
    <div class="rvt-tabs__panel" tabindex="0" role="tabpanel" id="tab-3-fitted" aria-labelledby="t-three-fitted" hidden="">
        <span class="rvt-ts-26 rvt-text-bold rvt-display-block">Food n’ Stuff</span>
        <p>
            Panel 3: Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
    </div>
</div>

Vertical Tabs

Vertical tabs are deprecated

While Rivet supports displaying tabs vertically along the left-hand side of the content area, we’ve deprecated that feature and will be removing vertical tabs in a future release.

Tabs work best when displayed horizontally. Displaying tabs vertically along the left-hand side of the content area takes up horizontal screen space, which limits the display area of your tab’s content. In addition, vertical tabs cause confusion, as users might mistake the tabs for your application’s main navigation. The vertical arrangement may also tempt you to use a larger number of tabs, which is not recommended.

If you need help replacing vertical tabs in your interface, reach out to the Rivet team.

JavaScript API

If you use the appropriate data attribute/id combination in your markup, tabs will work without the need for any additional JavaScript. But if you need to control tabs programmatically, there are a handful of methods from the Rivet tabs API you can use:

Tabs JavaScript methods
Method	Description
`Tabs.init(context)`	Initializes the `Tabs` component Accepts an optional DOM element. If no element is provided in the argument it defaults to the `document` element. NOTE: the `init()` method is called automatically when `rivet.js` is loaded.
`Tabs.destroy(context)`	Destroys any currently initialized tabs and removes their event listeners. Accepts a optional DOM element. If no element is provided in the argument it defaults to the `document` element. NOTE: the optional `context` argument only needs to be passed into `.destroy()` if a DOM element was passed into the `.init()` method. If so, it must be the DOM element that was passed into `.init()` when the Tabs were initialized.
`Tabs.activateTab(id, callback)`	`id` - The unique id of the tab that you want to active. The value of the `id` argument should be the value of the `data-tab` attribute which corresponds to the `id` attribute of the tab panel it controls. `callback` - An optional callback that is executed after the tab is activated.

Custom Events

The Rivet Tabs also emit a custom event when a tab is activated that you can listen for in your own scripts.

Tabs JavaScript custom events
Event	Description
`tabActivated`	Emitted when a Tab is activated (using the `Tabs.activateTab()` method, or via a click on a button with the `data-tab` attribute). The value of the tab `data-tab` attribute is also passed along (if it exists) via the custom event’s detail property and is available to use in your scripts as `event.detail.name()`

Custom event example

Note here that the event.detail.name() property of the customEvent object is a function that returns a String. Read more about custom events on the MDN web docs.

// Listen for a custom "tabActivated" event
document.addEventListener('tabActivated', event => {
  if (event.detail.name() === 'my-tab') {
    alert('Hey, you activated the tab!')
  }
  // Maybe send some data via an AJAX request, etc...
}, false);