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.

Attribute	Type	Default	Description
activeIdx	Number	unset	The index of the tab and panel you want to be open by default. If unset, defaults to 0.
theme	String	unset	The 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.

Attribute	Description
tabChange	Will 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>