Tabs are grouped sets of hide/show panels. Use them to group and simplify large amounts of content such as product information.
Tabset
Default tabset: See Visual design for the usage recommendations for the default style. Tabsets can appear both ranged to the right, or justified.
Lego tabset: See Visual design for the usage recommendations for the lego style. Tabsets can appear both ranged to the right, or justified.
Responsive tabcordion: This a responsive component that can render as either a tabs or an accordion, depending on the screen width available. The tabcordion, can appear in either the default or lego style, see Visual design for the usage recommendations for either style.
User experience
The Tabs component has two modes:
- Tabset – traditional horizontal tabs, allowing only one content panel to be visible at a time, by selecting the relevant tab.
- Tabcordion – a responsive combination of accordions and tabs.
‘Tabcordion’ is the term we use to describe a responsive tab set. When using a Tabset in our web applications we typically experience layout issues when the application needs to display on small viewports (phones). Often the tabs won’t fit horizontally in the limited screen size. To remedy this problem, we developed the Tabcordion where the Tabset will turn into an Accordion when viewed on smaller devices (phones).
This component is useful when trying to simplify and group content for users to view when they need it, as opposed to displaying everything at once.
Visual design
Tabset, Accordions and Tabcordions, can have one of two styles applied to them Default and Lego:
The Default style is designed to be subtle and understated while still providing a clear indication of which tab or accordion bar is selected, and its related content. To further reinforce this relationship a transition is used to display related content when a tab or accordion bar is selected. Generous padding provides a larger hit area and important breathing space to provide emphasis without adding noise.
The Lego tabset is designed to be more prominent. This design came out of a project request for a more emphasised component which would also add some brand colour to an otherwise dry, text heavy interface.
Tab sets and accordions are intended to visually group related content. When used correctly with moderate content they do this extremely well. However, if too much content is used it becomes difficult to visualise this relationship as content extends below the viewport.
Dos and don’ts
- Avoid using too much content and consider smaller viewports when designing responsive web apps.
- Avoid changing the styles of Tabs and Accordions (border, colour, size etc )
- Do use Tabs and Accordions on any background (light or dark).
- Avoid making Tab and Accordion labels too long. Although they will wrap the interface will become cluttered very quickly.