Tabs
The tabs component lets users navigate between related sections of content, displaying one section at a time.
We use AngularJS for this component and so you will need to include:
If you are using bootstrap, you can use the same html markup, but will need to remove the ng classes and angular script.
Example
Here is an example with some content within
Portal Code example
- The portal will use bootstraps panels and collapse classes to achieve this, so using the below markup will work out of the box in your custom HTML.
When to use this
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
Tabs can work well for people who use a service regularly, for example, users of a caseworking system. Their need to perform tasks quickly may be greater than their need for simplicity of first-time use.
When not to use this
Do not use the tabs component if the total amount of content the tabs contain will make the page slow to load. For this reason, do not use the tabs component as a form of page navigation.
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