Tab

The tab template separates related content into different panes that are viewable one at a time when the respective tab is clicked. The template groups and presents different aspects of content that are closely related and provides the user the ability to seamlessly and intuitively switch back and forth between respective sections.

Criteria

  • Tabs minimize the usage of screen space, which improves the overall look, organization and functionality of the page.

  • Use a minimum of three tabs or a maximum of five. Accordion view is recommended when more than five sections are required.

  • Tab labels should be short and not exceed two lines.

  • Always use title case for tab labels (first letter of each word is capitalized, except for small words).

  • Always use the ampersand (&) instead of “and” in accordion labels.

  • Order tabs logically.

  • Do not use tabs when they do not lend themselves to the content, such as when the information needs to be presented in a sequential order or when information needs to be compared.

  • Do not use tabs if content should not be hidden until clicked on.

  • Inline images can be used in a tab so long as they add value to the text and are used in a consistent way.

  • Note that on mobile, tabs are displayed as accordions.

 

Version 2.02 . March 2024 . City of Toronto Web Standards