Page Loading

Tabbed content

The tabs component lets users navigate between related sections of content, displaying one section at a time.

Tabbed content example

How to use tabbed content

Tabs can be a helpful way of letting users quickly switch between related information if:

  • Your content can be usefully separated into clearly labelled sections
  • The first section is more relevant than the others for most users
  • Users will not need to view all the sections at once

Do not use the tabs component if the total amount of content contained in the tabs will make the page slow to load. In other words, don’t try and squeeze four pages worth of content into one page by using tabs.  

Tabs hide content from users and not everyone will notice them or understand how they work. Do not use tabs if your users might need to:

  • Read through all of the content in order, for example, to understand a step-by-step process
  • Compare information in different tabs - having to memorise the information and switch backwards and forwards can be frustrating and difficult

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 table of contents to let users navigate quickly to specific sections of content 

We've added examples of how tabbed content should appear on full width pages on different sites at the end of this page. 

Adding tabs in the CMS

Tabbed content modifier rules

  • Background: default (white) or ‘background’ (grey)
  • Grid span: 8
    • Standard - applied at container level. Span removed on pages with left hand navigation
    • SDI - applied at panel level
  • Padding: default, unless required to improve layout  
  • Alignment: default 

Accessibility

Tabs hide content, so the tab labels need to make it very clear what they link to, otherwise users will not know if they need to click on them. Long titles may not read well on mobile.  

If you struggle to come up with clear labels, it might be because the way you’ve separated the content is not clear.

Here's how tabbed content looks as standard

This applies to the majority of our sites, including Scottish Enterprise and Find Business Support, but not SDI. It's aligned to the left of the page, with a span of 8. We do this by adding it to a container first, then applying the span to the container. 

Here's how tabbed content should look on SDI

It's aligned to the centre of the page, with a span of 8. We do this by applying the span to the whole panel.