How to set up tabs on a web page

How to set up tabs on a web page

How to set up tabs on a web page

You’ve seen them on other pages of the website and they are great for displaying information in an ordered way. If you’d like to create some tabs on your own website, it’s easy to do.

tabbed page

Here’s how.

Go to the page that you’d like to create tabs on.

For each tab, create a separate content container. In this example, there are four content containers. The first one is just for the introduction, and the next 3 are for the tabs.

Here’s what this looks like in the editing interface:

tabbed page in edit view

There are two things you need to do to get your tabs working properly:

  1. Add a css class to the content container. Don’t be scared, it’s easy. All you need to do is add the word ‘tab’ in the css class box in your content container settings window:

adding a css class

  1. Set the first line of text as a heading. It doesn’t matter which heading level you use, because Squiz will apply the tab style to it.

ensure the first line of text is set as a heading

That’s all you need to do. Don’t forget to save your work.

If you want some text below the tabs, just create another content container at the bottom and don’t give it a css class.

When to use tabs

Here are some excellent guidelines about when to use tabs from the Nielsen Norman group:

  1. Logically chunk the content behind the tabs so users can easily predict what they'll find when they select a given tab.
  2. Use tabs only when users don't need to see content from multiple tabs simultaneously. If people do need to compare the info behind different tabs, then having to switch back and forth puts an added burden on their short-term memory, increases cognitive load and interaction cost, and lowers usability compared to a design that puts everything on one big page.
  3. Write short tab labels and use plain language, rather than made-up terms. Tab labels should usually be 1–2 words. Short labels are more scannable; if you need longer labels, it’s a sign that the choices are too complicated for a tab control.

Back to the top of this page