Tabs

Tabs

Tabs break up information into accessible and user friendly content blocks that can be used in a multitude of ways.

Module tabs are seeing an increase of use as websites and web applications push for optimising web page screen areas without sacrificing the amount of information presented at once.

Across the Macquarie University, we recommend a maximum of 4 tabs within each tab module to ensure that headings are legible and users don't get confused with too much content.

For user experience, and interface design, we have made the 'active' tab (the one that is selected and showing content) as light sand, with inactive tabs as the darker sand. This allows users to easily identify which of the tabs they are viewing.

Tab label 1

Tab content 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
  • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab label 2

Tab content 2

example image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab label 3

Tab content 3

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  2. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
  3. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
  4. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab label 4

Tab content 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

When to use tabs?

The primary goal of tabs is to permit users to view a group of related data one at a time, which in turn also allows content editors to group this information in a compacted manner, saving valuable screen real estate. With that in mind, when should you use them?

You have information that is related

Information in each individual tab or 'pane' should be related and relevant to each other. The content should have some connection to each other so that users can find some logical correlation between the information.

Information that doesn’t need to be compared or accessed simultaneously

Using tabs means that information in different panes will be shown to users one at a time. When information on panes must be compared to each other, or when pane information is better presented simultaneously, there would be better ways to present this information, because otherwise it can produce an annoying experience when website users have to click back and forth to compare and contrast information.

You are producing a step-by-step guide

Information can all be related, but done in a step-by-step guide ie. the first tab being "Step 1", the second tab being "Step 2" etc. However, if doing this, keep in mind that you don't want users to refer back to "Step 1" when in "Step 3" as this can create confusion and frustration for the user. A good example of this setup is shown on the Your undergraduate offer page.

Back to the top of this page