Standard Life Digital Framework

Side tabs

full screen new window example HTML markup

Side tabs are a horizontal layout that shows tabbed content to either 2 or 3 levels.

Usage

Place the side tabs on the page and remove or add levels as you need. (The below example shows 3 levels for option 1 only)

Either use the Bootstrap collapse plugin or the below JavaScript support classes to dynamically set the active tabs.

On desktop and tablet, selecting an option will bring up another column to the right and if 3 levels are required a further column to the right of that. Deselecting that item should reset the columns back to the option that was selected.

On mobile, selecting an item should take the user to the next column whilst hiding the selected column, clicking the button to go back should take the user back to the previous column.

NOTE: JavaScript is required to get the below behaviour for both desktop and mobile.

Accessible attributes

Accessible attribute	Description
`role="tablist"`	Indicates that the element serves as a container for a set of tabs.
`aria-label="DESCRIPTION"`	Provides a label on the same level as the role tablist, that describes the purpose of the set of tabs.
`role="tab"`	Indicates the element serves as a tab control on each clickable tab.
`aria-selected="true"`	Indicates the element serves as a tab control on each clickable tab is active when true, and inactive when false.
`aria-controls="IDREF"`	Refers to the tabpanel element associated with each clickable tab.
`role="tabpanel"`	Indicates the element serves as a container for tab panel content.
`aria-labelledby="IDREF"`	Refers to the tab element that controls each panel.
`aria-hidden="true"`	Indicates whether the panel is visible, set to true for the active panel and false for inactive panels.

JavaScript Support

JavaScript Support class name	Description
`slb-collapsed`	Placed on the toggle button when the button is collapsed
`slb-collapse`	Placed on the panel for the default collapse properties
`slb-show`	Placed on the panel when the panel is shown

Pick a topic and we'll find the best option for you.

Back to panel 2

Markup: side-tab\side-tab.hbs

Copy

<div id="sideTabs" class="slb-side-tab" role="tablist" aria-label="Side tab example">
    <!-- Panel level 1 -->
    <div id="option-0-panel" class="slb-side-tab__column collapse show">
        <!-- Placeholder information -->
        <div id="option-0-default" class="slb-side-tab__inactive-column collapse show">
            <p class="slb-side-tab__inactive-message">Pick a topic and we'll find the best option for you.</p>
        </div>
        <ul class="slb-side-tab__content">
            <li class="slb-side-tab__item">
                <a class="slb-side-tab__link collapsed" href="#" data-toggle="collapse" role="tab" aria-controls="option-1-panel" aria-selected="false" data-target="#option-1-panel">Option 1</a>
            </li>
            <li class="slb-side-tab__item">
                <a class="slb-side-tab__link collapsed" href="#" data-toggle="collapse" role="tab" aria-controls="option-2-panel" aria-selected="false" data-target="#option-2-panel">Option 2</a>
            </li>
            <li class="slb-side-tab__item">
                <a class="slb-side-tab__link collapsed" href="#" data-toggle="collapse" role="tab" aria-controls="option-3-panel" aria-selected="false" data-target="#option-3-panel">Option 3</a>
            </li>
            <li class="slb-side-tab__item">
                <a class="slb-side-tab__link collapsed" href="#" data-toggle="collapse" role="tab" aria-controls="option-4-panel" aria-selected="false" data-target="#option-4-panel">Option 4</a>
            </li>
        </ul>
    </div>
    <!-- Panel level 2 -->
    <div id="option-1-panel" class="slb-side-tab__column collapse" aria-hidden="true" role="tabpanel" data-panel="#option-0-panel">
        <!-- Back to panel 1 -->
        <div class="slb-side-tab__back">
            <a href="#" class="slb-side-tab__back-link"><span class="fa fa-chevron-left mr-2" aria-hidden="true"></span>Back to panel 1</a>
        </div>
        <ul class="slb-side-tab__content">
            <li class="slb-side-tab__item">
                <a class="slb-side-tab__link collapsed" href="#" data-toggle="collapse" role="tab" aria-controls="option-1a-panel" aria-selected="false" data-target="#option-1a-panel">Option 1a</a>
            </li>
            <li class="slb-side-tab__item">
                <a class="slb-side-tab__link collapsed" href="#" data-toggle="collapse" role="tab" aria-controls="option-1b-panel" aria-selected="false" data-target="#option-1b-panel">Option 1b</a>
            </li>
            <li class="slb-side-tab__item">
                <a class="slb-side-tab__link collapsed" href="#" data-toggle="collapse" role="tab" aria-controls="option-1c-panel" aria-selected="false" data-target="#option-1c-panel">Option 1c</a>
            </li>
            <li class="slb-side-tab__item">
                <a class="slb-side-tab__link collapsed" href="#" data-toggle="collapse" role="tab" aria-controls="option-1d-panel" aria-selected="false" data-target="#option-1d-panel">Option 1d</a>
            </li>
        </ul>
    </div>
    <div id="option-2-panel" class="slb-side-tab__column collapse" aria-hidden="true" role="tabpanel" data-panel="#option-0-panel">
        <!-- Back to panel 1 -->
        <div class="slb-side-tab__back">
            <a href="#" class="slb-side-tab__back-link"><span class="fa fa-chevron-left mr-2" aria-hidden="true"></span>Back to panel 1</a>
        </div>
        <ul class="slb-side-tab__content">
            <li class="slb-side-tab__item">
                <a class="slb-side-tab__link collapsed" href="#" data-toggle="collapse" role="tab" aria-selected="false">Option 2a</a>
            </li>
            <li class="slb-side-tab__item">
                <a class="slb-side-tab__link collapsed" href="#" data-toggle="collapse" role="tab" aria-selected="false">Option 2b</a>
            </li>
            <li class="slb-side-tab__item">
                <a class="slb-side-tab__link collapsed" href="#" data-toggle="collapse" role="tab" aria-selected="false">Option 2c</a>
            </li>
            <li class="slb-side-tab__item">
                <a class="slb-side-tab__link collapsed" href="#" data-toggle="collapse" role="tab" aria-selected="false">Option 2d</a>
            </li>
        </ul>
    </div>
    <div id="option-3-panel" class="slb-side-tab__column collapse" aria-hidden="true" role="tabpanel" data-panel="#option-0-panel">
        <!-- Back to panel 1 -->
        <div class="slb-side-tab__back">
            <a href="#" class="slb-side-tab__back-link"><span class="fa fa-chevron-left mr-2" aria-hidden="true"></span>Back to panel 1</a>
        </div>
        <ul class="slb-side-tab__content">
            <li class="slb-side-tab__item">
                <a class="slb-side-tab__link collapsed" href="#" data-toggle="collapse" role="tab" aria-selected="false">Option 3a</a>
            </li>
            <li class="slb-side-tab__item">
                <a class="slb-side-tab__link collapsed" href="#" data-toggle="collapse" role="tab" aria-selected="false">Option 3b</a>
            </li>
            <li class="slb-side-tab__item">
                <a class="slb-side-tab__link collapsed" href="#" data-toggle="collapse" role="tab" aria-selected="false">Option 3c</a>
            </li>
            <li class="slb-side-tab__item">
                <a class="slb-side-tab__link collapsed" href="#" data-toggle="collapse" role="tab" aria-selected="false">Option 3d</a>
            </li>
        </ul>
    </div>
    <div id="option-4-panel" class="slb-side-tab__column collapse" aria-hidden="true" role="tabpanel" data-panel="#option-0-panel">
        <!-- Back to panel 1 -->
        <div class="slb-side-tab__back">
            <a href="#" class="slb-side-tab__back-link"><span class="fa fa-chevron-left mr-2" aria-hidden="true"></span>Back to panel 1</a>
        </div>
        <ul class="slb-side-tab__content">
            <li class="slb-side-tab__item">
                <a class="slb-side-tab__link collapsed" href="#" data-toggle="collapse" role="tab" aria-selected="false">Option 4a</a>
            </li>
            <li class="slb-side-tab__item">
                <a class="slb-side-tab__link collapsed" href="#" data-toggle="collapse" role="tab" aria-selected="false">Option 4b</a>
            </li>
            <li class="slb-side-tab__item">
                <a class="slb-side-tab__link collapsed" href="#" data-toggle="collapse" role="tab" aria-selected="false">Option 4c</a>
            </li>
            <li class="slb-side-tab__item">
                <a class="slb-side-tab__link collapsed" href="#" data-toggle="collapse" role="tab" aria-selected="false">Option 4d</a>
            </li>
        </ul>
    </div>

    <!-- Panel level 3 -->
    <div id="option-1a-panel" class="slb-side-tab__column collapse" aria-hidden="true" role="tabpanel" data-panel="#option-1-panel">
        <!-- Back to panel 2 -->
        <div class="slb-side-tab__back">
            <a href="#" class="slb-side-tab__back-link"><span class="fa fa-chevron-left mr-2" aria-hidden="true"></span>Back to panel 2</a>
        </div>
        <form class="slb-side-tab__content">
            <fieldset role="radiogroup" aria-label="Radio Example Group">
                <legend class="sr-only">Radio Example Group</legend>
                <div class="slb-form__group">
                    <input type="radio" class="slb-form__control-tile" id="radioButtonExample-slb-form__control-tile-1" name="radioButtonExample-slb-form__control-tile" aria-checked="true" checked="checked">
                    <label for="radioButtonExample-slb-form__control-tile-1" class="slb-form__label">
                        <span class="slb-form__label-heading">Radio tile</span>
                        <span class="slb-form__label-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, temporibus.</span>
                    </label>
                </div>
                <div class="slb-form__group">
                    <input type="radio" class="slb-form__control-tile" id="radioButtonExample-slb-form__control-tile-2" name="radioButtonExample-slb-form__control-tile" aria-checked="false">
                    <label for="radioButtonExample-slb-form__control-tile-2" class="slb-form__label">
                        <span class="slb-form__label-heading">Radio tile</span>
                        <span class="slb-form__label-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, temporibus.</span>
                    </label>
                </div>
            </fieldset>
        </form>
    </div>
    <div id="option-1b-panel" class="slb-side-tab__column collapse" aria-hidden="true" role="tabpanel" data-panel="#option-1-panel">
        <!-- Back to panel 2 -->
        <div class="slb-side-tab__back">
            <a href="#" class="slb-side-tab__back-link"><span class="fa fa-chevron-left mr-2" aria-hidden="true"></span>Back to panel 2</a>
        </div>
        <form class="slb-side-tab__content">
            <fieldset role="radiogroup" aria-label="Radio Example Group">
                <legend class="sr-only">Radio Example Group</legend>
                <div class="slb-form__group">
                    <input type="radio" class="slb-form__control-tile" id="radioButtonExample-slb-form__control-tile-5" name="radioButtonExample-slb-form__control-tile" aria-checked="true" checked="checked">
                    <label for="radioButtonExample-slb-form__control-tile-5" class="slb-form__label">
                        <span class="slb-form__label-heading">Radio tile</span>
                        <span class="slb-form__label-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, temporibus.</span>
                    </label>
                </div>
                <div class="slb-form__group">
                    <input type="radio" class="slb-form__control-tile" id="radioButtonExample-slb-form__control-tile-6" name="radioButtonExample-slb-form__control-tile" aria-checked="false">
                    <label for="radioButtonExample-slb-form__control-tile-6" class="slb-form__label">
                        <span class="slb-form__label-heading">Radio tile</span>
                        <span class="slb-form__label-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, temporibus.</span>
                    </label>
                </div>
            </fieldset>
        </form>
    </div>
    <div id="option-1c-panel" class="slb-side-tab__column collapse" aria-hidden="true" role="tabpanel" data-panel="#option-1-panel">
        <!-- Back to panel 2 -->
        <div class="slb-side-tab__back">
            <a href="#" class="slb-side-tab__back-link"><span class="fa fa-chevron-left mr-2" aria-hidden="true"></span>Back to panel 2</a>
        </div>
        <form class="slb-side-tab__content">
            <fieldset role="radiogroup" aria-label="Radio Example Group">
                <legend class="sr-only">Radio Example Group</legend>
                <div class="slb-form__group">
                    <input type="radio" class="slb-form__control-tile" id="radioButtonExample-slb-form__control-tile-3" name="radioButtonExample-slb-form__control-tile" aria-checked="true" checked="checked">
                    <label for="radioButtonExample-slb-form__control-tile-3" class="slb-form__label">
                        <span class="slb-form__label-heading">Radio tile</span>
                        <span class="slb-form__label-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, temporibus.</span>
                    </label>
                </div>
                <div class="slb-form__group">
                    <input type="radio" class="slb-form__control-tile" id="radioButtonExample-slb-form__control-tile-7" name="radioButtonExample-slb-form__control-tile" aria-checked="false">
                    <label for="radioButtonExample-slb-form__control-tile-7" class="slb-form__label">
                        <span class="slb-form__label-heading">Radio tile</span>
                        <span class="slb-form__label-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, temporibus.</span>
                    </label>
                </div>
            </fieldset>
        </form>
    </div>
    <div id="option-1d-panel" class="slb-side-tab__column collapse" aria-hidden="true" role="tabpanel" data-panel="#option-1-panel">
        <!-- Back to panel 2 -->
        <div class="slb-side-tab__back">
            <a href="#" class="slb-side-tab__back-link"><span class="fa fa-chevron-left mr-2" aria-hidden="true"></span>Back to panel 2</a>
        </div>
        <form class="slb-side-tab__content">
            <fieldset role="radiogroup" aria-label="Radio Example Group">
                <legend class="sr-only">Radio Example Group</legend>
                <div class="slb-form__group">
                    <input type="radio" class="slb-form__control-tile" id="radioButtonExample-slb-form__control-tile-4" name="radioButtonExample-slb-form__control-tile" aria-checked="true" checked="checked">
                    <label for="radioButtonExample-slb-form__control-tile-4" class="slb-form__label">
                        <span class="slb-form__label-heading">Radio tile</span>
                        <span class="slb-form__label-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, temporibus.</span>
                    </label>
                </div>
                <div class="slb-form__group">
                    <input type="radio" class="slb-form__control-tile" id="radioButtonExample-slb-form__control-tile-8" name="radioButtonExample-slb-form__control-tile" aria-checked="false">
                    <label for="radioButtonExample-slb-form__control-tile-8" class="slb-form__label">
                        <span class="slb-form__label-heading">Radio tile</span>
                        <span class="slb-form__label-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, temporibus.</span>
                    </label>
                </div>
            </fieldset>
        </form>
    </div>
</div>

Source: components/_side-tab.scss