Skip to main content

Tab Navigation

Installation#

For detailed instructions, view our install section in this documentation. Make sure all of the dependencies and polyfills are loaded to make the component cross-browser compatible.

CDN#

<script src="https://unpkg.com/@pearson-ux/tabs"></script>

NPM#

npm i @pearson-ux/tabs --save

Demo#

Light Theme#

  • Tab One's
  • Tab Two
  • Tab Three

Content one!

Content two!

Content three!

<pearson-tabs >
<ul class="tabs" slot="tabs">
<li>Tab One</li>
<li>Tab Two</li>
<li>Tab Three</li>
</ul>
<div class="panels" slot="panels">
<div data-panel>
<p>Content one!</p>
</div>
<div data-panel>
<p>Content two!</p>
</div>
<div data-panel>
<p>Content three!</p>
</div>
</div>
</pearson-tabs>

Dark Theme#

  • Tab One
  • Tab Two
  • Tab Three

Content one!

Content two!

Content three!

<pearson-tabs theme="dark">
<!-- content markup -->
</pearson-tabs>

Structure#

Follow these steps to successfully build out a tab navigation menu.

First, we'll add the pearson-tabs element to your application.

<pearson-tabs>
</pearson-tabs>

The first child of the pearson-tabs element needs to be a ul with a class="tabs" and a slot="tabs"

<pearson-tabs>
<ul class="tabs" slot="tabs"></ul>
</pearson-tabs>

Next, in your ul, add an li for each menu tab you want to generate.

Important Note You cannot add any additional markup to the li element, only text is supported at this time.

<pearson-tabs>
<ul class="tabs" slot="tabs">
<li>Tab One</li>
</ul>
</pearson-tabs>

After your ul, add a div with a class="panels" and a slot="panels.

<pearson-tabs>
<ul class="tabs" slot="tabs">
<li>Tab One</li>
</ul>
<div class="panels" slot="panels">
</div>
</pearson-tabs>

Finally, for every menu tab, add a div with an attribute of data-panel as a child of the div with slot="panels". You can display any content you want to display inside the div data-panel content areas.

<pearson-tabs>
<ul class="tabs" slot="tabs">
<li>Tab One</li>
<li>Tab Two</li>
</ul>
<div class="panels" slot="panels">
<div data-panel>
<p>Content for tab one </p>
</div>
<div data-panel>
<p>Content for tab two </p>
</div>
</div>
</pearson-tabs>

API#

All attributes in this API are optional.

AttributeTypeDefaultDescription
activeIdxNumberunsetThe index of the tab and panel you want to be open by default. If unset, defaults to 0.
themeStringunsetThe color palette used to render the tabs. Accepted values: 'dark'. If unset, will render the light theme.

Events#

<pearson-tabs> only emits one event: tabChange.

AttributeDescription
tabChangeWill fire when the tab navigation is triggered via mouse or keyboard
const tabs = document.querySelector('pearson-tabs');
tabs.addEventListener('tabChange', () => {
// Do something when a tab is clicked
});

HTML Markup#

Do you want to use your own JS to make the tabs function? No problem, use the markup below along with CSS to build an tab navigation menu with your own JS.

Here are some basic practices to make sure the tab navigation you build is accessible.
<div class="gr-tabbed-navigation light">
<ul class="tab-list" role="tablist" data-tab-selected="0">
<li class="tab-item" role="presentation">
<button id="tabOneBtn"
class="gr-btn tab-action"
role="tab"
tabindex="0"
aria-selected="true"
aria-controls="tabOne">
Tab One
</button>
</li>
<li class="tab-item" role="presentation">
<button id="tabTwoBtn"
class="gr-btn tab-action"
role="tab"
tabindex="0"
aria-selected="true"
aria-controls="tabTwo">
Tab Two
</button>
</li>
<li class="tab-item" role="presentation">
<button id="tabThreeBtn"
class="gr-btn tab-action"
role="tab"
tabindex="0"
aria-selected="true"
aria-controls="tabThree">
Tab Three
</button>
</li>
</ul>
<div id="tabSlider" class="tab-slider" style="width:54px;"></div>
</div>