Tabs

Allow users to switch between related groups of content without having to leave the page

Overview #

Use the tabs component to allow users to switch between related groups of content without having to leave the page.

Examples #

Choose an example

<div class="rvt-tabs" data-rvt-tabs="tabset-1">
  <div class="rvt-tabs__tablist" aria-label="Rivet tabs" data-rvt-tablist>
    <button class="rvt-tabs__tab" data-rvt-tab>Tab one</button>
    <button class="rvt-tabs__tab" data-rvt-tab>Tab two</button>
    <button class="rvt-tabs__tab" data-rvt-tab>Tab three</button>
    <button class="rvt-tabs__tab" data-rvt-tab>Tab four</button>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel>
    <span class="rvt-ts-23 rvt-text-bold">Become the best version of yourself at IU</span>
    <p>
      Develop the skills you need for a rewarding career, and follow in the footsteps of more than 729,000 IU alumni who are leading organizations, innovating the future, and making an impact on their communities and the world.
    </p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel>
    <span class="rvt-ts-23 rvt-text-bold">Find your calling</span>
    <p>
      IU offers more than 2,300 different programs of study. Not sure what to focus on? No problem. Browse by interest area to find options you'd enjoy pursuing.
    </p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel data-rvt-tab-init>
    <span class="rvt-ts-23 rvt-text-bold">Pursue your passion or explore the possibilities</span>
    <p>
      From nursing to criminal justice, epidemiology to environmental science, social work to cybersecurity, and more than 900 academic programs in between, IU gives you the power to study whatever sparks your interest, with the support of world-class professors and faculty who care about your success.
    </p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel>
    <span class="rvt-ts-23 rvt-text-bold">Find your ideal campus life at IU</span>
    <p>
      Each of our nine campuses offers a welcoming, inclusive environment that feels like home, whatever your background, interests, or goals. Whether you want a Big Ten college experience, the dynamic pace of an urban research university, the community feeling of a regional campus close to home, or the flexibility of a fully online degree program, you’ll find it at IU.
    </p>
  </div>
</div>

Open in new window Copy link to example

<div class="rvt-tabs" data-rvt-tabs="tabset-1">
  <div class="rvt-tabs__tablist" aria-label="Rivet tabs" data-rvt-tablist>
    <button class="rvt-tabs__tab" data-rvt-tab>Tab one</button>
    <button class="rvt-tabs__tab" data-rvt-tab="example-tab">Tab two</button>
    <button class="rvt-tabs__tab" data-rvt-tab>Tab three</button>
    <button class="rvt-tabs__tab" data-rvt-tab>Tab four</button>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel>
    <span class="rvt-ts-23 rvt-text-bold">Become the best version of yourself at IU</span>
    <p>
      Develop the skills you need for a rewarding career, and follow in the footsteps of more than 729,000 IU alumni who are leading organizations, innovating the future, and making an impact on their communities and the world.
    </p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="example-tab">
    <span class="rvt-ts-23 rvt-text-bold">Find your calling</span>
    <p>
      IU offers more than 2,300 different programs of study. Not sure what to focus on? No problem. Browse by interest area to find options you'd enjoy pursuing.
    </p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel data-rvt-tab-init>
    <span class="rvt-ts-23 rvt-text-bold">Pursue your passion or explore the possibilities</span>
    <p>
      From nursing to criminal justice, epidemiology to environmental science, social work to cybersecurity, and more than 900 academic programs in between, IU gives you the power to study whatever sparks your interest, with the support of world-class professors and faculty who care about your success.
    </p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel>
    <span class="rvt-ts-23 rvt-text-bold">Find your ideal campus life at IU</span>
    <p>
      Each of our nine campuses offers a welcoming, inclusive environment that feels like home, whatever your background, interests, or goals. Whether you want a Big Ten college experience, the dynamic pace of an urban research university, the community feeling of a regional campus close to home, or the flexibility of a fully online degree program, you’ll find it at IU.
    </p>
  </div>
</div>

Elements #

Element	Description	Usage	Required	Multiple
Tab list	List of tab trigger buttons and their associated content panels	Limit to a few tabs	Tab list is required	Component may contain multiple Tab list
Tab button	Button that shows its associated content panel when interacted with	Limit button text to 1-2 words	Tab button is required	Component may contain only one Tab button
Tab content panel	Panel of content associated with a tab button	Limit to a short paragraph. Avoid images, tables, or other complex content.	Tab content panel is required	Component may contain only one Tab content panel

Attributes #

Use the following attributes to configure tabs:

Attribute	Description
`data-rvt-tab-init`	Add to an element with the `data-rvt-tab-panel` attribute to activate that tab on page load

Usage #

Specifying tab IDs. By default, Rivet auto-generates tab and panel IDs. If you’d like a tab or panel to have a specific ID, you can explicitly set the data-rvt-tab and data-rvt-tab-panel attribute values in your markup. The attribute value for a given tab must match the attribute value of its associated panel. See the code examples on this page for guidance.

Do

Use to allow users to switch between related groups of content without refreshing the page
Use to present different views of the same data
Order tabs in way that makes sense for the content

Don't

Stack multiple rows of tabs
Use all capital letters in tab labels
Include a "More" tab
Cause the page to refresh when the user switches tabs
Use when someone would need to compare data across tabs—use a table instead

Accessibility #

Use a meaningful label. Change the default value of aria-label from “Rivet tabs” to a title that clearly describes the contents of the tabs.

ARIA labels #

Label	Description
`aria-selected`	Added to each `button` element with the `data-rvt-tab` attribute by the component’s JavaScript. Set to `true` if the associated panel is visible; `false` otherwise.
`role="tablist"`	Added to the element with the `data-rvt-tablist` element by the component’s JavaScript. Compatibility note: If this attribute is not found, the component JavaScript will infer where to place this attribute.
`role="tab"`	Added to each `button` element with the `data-rvt-tab` attribute by the component’s JavaScript.
`role="tabpanel"`	Added to each element with the `data-rvt-tab-panel` attribute by the component’s JavaScript.
`aria-labelledby`	Added to each element with the `data-rvt-tab-panel` attribute by the component’s JavaScript.

Keys	Description
`enter` or `space`	Activates the focused tab
`tab`	Move focus to the next focusable element. Elements in closed tabs should not be focusable.
`shift` + `tab`	Move focus to the previous focusable element. Elements in closed tabs should not be focusable.
`←left`	Move focus to the previous tab if any tab is focused. If focus is on the first tab, move focus to the last tab.
`→right`	Move focus to the next tab if any tab is focused. If focus is on the last tab, move focus to the first tab.

JavaScript #

Method	Description
`activateTab(tabId)`	Activates the tab with the given `data-rvt-tab-panel` attribute value
`addTab(label)`	Adds a new tab with the given label. Also adds its associated panel. Returns an object with `tab` and `panel` properties that contain references to the added tab and panel respectively.
`removeTab(idOrIndex)`	Removes the tab at the given index or with the given `data-rvt-tab` attribute value. Also removes its associated panel.

Event	Description	Detail object properties
`rvtTabActivated`	Emitted when a tab is activated	`tab`: Reference to activated tab DOM element
`rvtTabAdded`	Emitted when a tab is added	`tab`: Reference to added tab DOM element `panel`: Reference to added tab's associated panel DOM element
`rvtTabRemoved`	Emitted when a tab is removed	`tab`: Reference to removed tab DOM element `panel`: Reference to removed tab's associated panel DOM element

Learn more about using Rivet JavaScript