Skip to main content

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 #


<div class="rvt-tabs" data-rvt-tabs="tabset-1">
<div class="rvt-tabs__tablist" role="tablist" aria-label="Rivet tabs">
<button class="rvt-tabs__tab" role="tab" data-rvt-tab="tab-1" id="t-one">
Tab one
</button>
<button class="rvt-tabs__tab" role="tab" data-rvt-tab="tab-2" id="t-two">
Tab two
</button>
<button class="rvt-tabs__tab" role="tab" data-rvt-tab="tab-3" id="t-three">
Tab three
</button>
<button class="rvt-tabs__tab" role="tab" data-rvt-tab="tab-4" id="t-four">
Tab four
</button>
</div>
<div class="rvt-tabs__panel" tabindex="0" role="tabpanel" id="tab-1" aria-labelledby="t-one" data-rvt-tab-panel="tab-1">
<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" tabindex="0" role="tabpanel" id="tab-2" aria-labelledby="t-two" data-rvt-tab-panel="tab-2">
<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" tabindex="0" role="tabpanel" id="tab-3" aria-labelledby="t-three" data-rvt-tab-panel="tab-3" 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" tabindex="0" role="tabpanel" id="tab-4" aria-labelledby="t-four" data-rvt-tab-panel="tab-4">
<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>

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 #

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
  • Keep tab labels to 1–2 words

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 #

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.

Keyboard navigation #

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 arrow 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 arrow 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
Event Description Details object properties
rvt:tabActivated Emitted when a tab is activated
  • tab: Reference to activated tab DOM element
  • Learn more about using Rivet JavaScript