Tabs are a form of secondary in-page navigation, helping to group different types of content in a limited space. Tabs make it easy to explore and switch between different blocks of content.
Do not hide essential content in tabs
Avoid using tabs to display essential information, as some of the audience may not understand how tabs work and could miss the hidden content.
On this page
When to use tabs
Do
- Only use tabs on standard content pages, not full-width pages like landing pages.
- Limit of 7 tabs (technical limit). It is recommended to have a maximum of 5 tabs if possible.
- Keep tab item headings short, preferably a single word, that clearly describes the tab content. Limit of 25 characters for tab headings.
- Arrange the tab items in an order that makes sense for the audience, from left to right.
- Use when you would like to display content at the same level of hierarchy.
Don't
- Do not use tabs for important content where important information can be hidden and missed.
- Do not use tabs for content that needs to be viewed at the same time.
- Do not use with very short content, consider using lists or paragraphs.
- Do not use very long headings. Limit of 25 characters for tab headings.
- Do not use for very long content where the physical tabs become lost.
- Do not use for content where users are likely to want to compare information across multiple tabs.
Adding a tabs on a page
Landing page
You can add tabs on a landing page by selecting Tabs from the list of content blocks.
Standard page
You can add tabs on a standard page by selecting Add Accordion/Tabs from the drop-down list of blocks. Choose Type as Tab.
Configuring tabs
Fill in the fields as required:
- Heading/Tab Title (required)
-
Limit of 150 characters.
-
You have the option to prevent the display of H2 headings from showing on the page navigation by selecting the checkbox Excluded from in-page navigation.
-
- Body (required)
- Preferably a short paragraph i.e. up to 250 characters.
- Click on Add Tab/Tabbed Item to add another Tab.
See tabs live on nsw.gov.au
Check out Tabs to see how this works on a live page.
You can also see live examples of how agencies have applied the component to their content below:
Need any more help?
If you have any questions, or require assistance with anything mentioned on this article, submit a request via the webform.