Tabs

Tabs group closely related content and show one panel at a time, letting readers switch views without leaving the page. They work well for short, parallel sections with clear, concise labels.

See when to use tabbed content and the accessibility guidelines.

• After opening a page, click the blue plus icon where you want the tabs to appear.
• Select ‘Tabs’.
• Add an optional anchor link.
• Click 'Apply' to add the tabbed content to the page.

• Each tab has a heading and a content area.
• To add a heading, hover over the tab and click the edit icon. Replace the placeholder text with a short, meaningful title.
• To add content, click the blue plus icon under the tab heading, then select from:
  • Heading
  • Text
  • Button
  • Image
  • Listing
  • Metadata
• When you are done, click 'Apply' to add the component to the tab.
• Repeat this process for each tab.
• To add new tabs, click 'Add Tab'.
• After adding tabbed content to a page, you can amend the content in the edit pane which opens on the right. Any changes you make will appear in the preview page on the left.
• Refer to the accessibility guidelines below for more information.

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.

Some users may overlook tabs or not understand how they work. To ensure that essential content is seen by all users, it’s best to keep it visible on the page rather than placing it in tabs.

• Tab headings should clearly describe their content: unclear labels can confuse users and discourage clicks
• Order the tabs according to user needs. The first tab should be the most commonly-needed section. Arrange the other tabs in the order that makes most sense for your users
• Avoid tab headings that wrap over more than one line. This makes it harder for users to see the connection between the selected tab and its content

• Accordions

Back to top