View in StorybookView on NPM

    When to use

    When you have a group of related content, and you need to save space, or when your user needs to switch between grouped content.

    Guidance

    Tabs should be used within a page for switching between groups of related content. They shouldn’t be a used as a way of navigating to different sections of the site. If your users need to compare content, or see all the content at one time, then tabs are not the correct solution.

    • tab labels should be short (1-2 words), clear and descriptive
    • it’s recommend that between 3 and 5 tabs is the limit to the amount tabs you use
    • words used should relate to the content within each tab
    • arrangement of tabs should be in a order which makes sense to our users
    • do not use all caps for labels
    • don't have tabs within tabs
    • ARIA attributes are applied via JS
    • keyboard controls are enabled: Left/up and down/right changes the selected tab Home/end moves to first/last tab

    Using the Tabs component

    React

    Detailed instructions for using the component in React can be found on NPM, see the link at the top of the page.

    In HTML

    Make sure the CSS and JS is loaded into your page. If you're using this on nice.org.uk and "niceorg-client" is selected then the CSS and JS will already be available.

    <div data-tabs>
        <div data-tab-title="Tab one title"><p>Tab One content</p></div>
        <div data-tab-title="Tab two title"><p>Tab Two content</p></div>
        <div data-tab-title="Tab three title"><p>Tab Three content</p></div>
    </div>
    
    

    The container should have the data attribute data-tabs. The direct children of this element will become the content of the three tabs, and the said children data-tab-title attribute will be the name of the tab. The first tab will be the active tab on load.