Tabs

Overview

Use the tabs feature to condense sections of text that have a similar purpose. For example, a set of instructions for students, faculty, and staff.

Because interactive elements, such as tabs, increase the cognitive load for your user, they are problematic when used inappropriately. Use another method to display content if any of these are true:

• The information you are displaying is important or time sensitive (event, service hours, urgent information)
• You have more than four sections to promote
• You expect people to be directed to your page from other sources (linked content, printed URLs, search engines) to locate information that would be hidden if nested in a tab
• The tab titles are more than 30 characters long (per tab)
• You are using the feature to achieve an aesthetic preference rather than to serve a functional need

Alternative options include creating a longer page or splitting content into multiple pages. Longer pages are not problematic when they are well organized. It's not necessary to try to condense as much information as possible into a single screen.

Usage guidelines

• Keep usage of this feature to a minimum. Tabs can be difficult to use on mobile devices and may make content more difficult to find.
• To ensure tabs will be readable on smaller screens, use no more than three to four tabs per section, and keep tab titles to 30 characters or less.
• Keep content within tabs to a minimum. Generally, display no more than two to three paragraphs per expandable section.

Documentation

• Learn how to implement the tabs feature (login required)