Tabs

<div class="ds_tabs" data-module="ds-tabs">
    <nav class="ds_tabs__navigation" aria-labelledby="ds_tabs__title">
        <h2 id="ds_tabs__title" class="ds_tabs__title">Contents</h2>
        <ul class="ds_tabs__list" id="tablist">
            <li class="ds_tabs__tab">
                <a class="ds_tabs__tab-link" href="#tab1">Courses and funding</a>
            </li>
            <li class="ds_tabs__tab">
                <a class="ds_tabs__tab-link" href="#tab2">Choosing apprenticeships</a>
            </li>
            <li class="ds_tabs__tab">
                <a class="ds_tabs__tab-link" href="#tab3">Extra skills support</a>
            </li>
        </ul>
    </nav>
    <div class="ds_tabs__content  ds_tabs__content--bordered" id="tab1">
        <h2>Search for training courses and funding</h2>
        <p>A wide range of training courses for your employees are available.</p>
        <p>Opportunities include distance learning, short courses and vocational training.</p>
        <p><a href="#">Visit My World of Work to search for training courses</a>.</p>
        <p>You can also <a href="#">search for training courses, and funding towards training</a>.</p>
    </div>
    <div class="ds_tabs__content  ds_tabs__content--bordered" id="tab2">
        <h2>Choosing an apprenticeship for your business</h2>
        <p>Apprenticeships can help you address skills gaps in your business. The government provides help with the cost of training an apprentice.</p>
        <p>There are 3 different types of apprenticeship:</p>
        <ul>
            <li>Foundation Apprenticeships let school or college students do short-term work experience at your business as part of a qualification</li>
            <li>Modern Apprenticeships let your new or current employees gain a qualification while working in a paid role at your business</li>
            <li>Graduate Apprenticeships let your new or current employees gain a degree while working in a paid role at your business</li>
        </ul>
        <p>You can find more information on the <a href="#">apprenticeships.scot</a> website.</p>
    </div>
    <div class="ds_tabs__content  ds_tabs__content--bordered" id="tab3">
        <h2>Extra skills support</h2>
        <p>The <a href="#">Skills for Growth</a> service can offer skills advice to businesses with fewer than 250 employees.</p>
        <p>Businesses of any size can get skills advice by completing a <a href="#">skills support request form</a>.</p>
        <p>Businesses of any size can also get skills advice by calling Skills Development Scotland on 0800 783 6000.</p>
    </div>
</div>

About this component

Tabs allow users to see one specific section of content at a time, whilst having awareness of the other content available. Each tab, when selected, will reveal its own unique content.

One tab must always be selected when the page is first loaded. This should be the first tab unless there is a strong reason to have another tab selected.

At smaller viewport widths this component does not display as tabs. The tab titles display as a list of anchor links to content that is displayed below those links.

We based our tabs component on the one built by the UK Government Digital Service. Find out more about when and where not to use tabs on GOV.UK’s Design System.

Usage

When using tabs for content it’s best to use clear and succinct labels to describe the content in each tab. Tabs hide content from the user, so it is important to make it clear what the content in each tab is about.

You should order tabs based on user needs, with the most needed section of content in the first tab.

Do not disable any of the tabs. If there is no content for a tab, either remove it or explain why it has no content when selected.

You should avoid tabs that wrap over more than one row because of long labels or having too many tabs. Wrapping makes it harder for the user to understand which tab is open.

We recommend you always test your content without tabs first. Consider if it’s better to:

• simplify and reduce the amount of content
• split the content across multiple pages
• keep the content on a single page, separated by headings
• use a contents list of anchor links to let users navigate quickly to specific sections of content

Implementation

The tabs component needs JavaScript enabled in the user’s browser. If a user does not have JavaScript enabled the tabs will use the alternative tab behaviour also used on small viewports — the tab titles display as a list of anchor links to content that is displayed below those links.

Related components

Accordion

Tabs vs accordions

Tabs and accordions both let users choose the content they wish to see from a group of hidden content sections. Accordions can have any number of sections open, while tabs always have exactly one section open.

Consider using tabs instead of an accordion if users do not need to view more than one section at a time. You should also consider the number of sections of content, because there is a limit to the number of sections that can fit in a row of tabs.

Tabs may work better for users who need to switch quickly between multiple sections. Tabs remain in the same position when changing sections, whereas accordions push other content down the page when they open.

Accordions may work better when users do not need to see any of the content on page load.

Both tabs and accordions work best for relatively short content. If the content is longer than the viewport height the user might need to scroll back up to the tab or accordion headings to change the selected content.

Website analytics

To understand user behaviour, clicks on tabs can be tracked through the original page path, the click URL, the click text, and a data attribute showing the tab number.

The data attribute is added automatically by the Design System’s ‘tracking’ script.

Accessibility

The component uses appropriate ARIA attributes to help users of assistive technologies. We have followed suggestions from the W3C’s WAI-ARIA Authoring Practices for tabs.