Information Services Division


Drupal CMS: Tabs

Learn to add Indigo tabs in Drupal.

Before you start 

When editing use Chrome, Firefox or Safari but NOT Internet Explorer


Take note - we don't recommend the use of tabbed boxes as they don't work well on mobile!
Also, you cannot add a new tab to an existing tabbed box.

Below is an example of a tabbed box with just 2 tabs.

Header for the first tab

Content content content content etc.

Content content content content etc.


Tabbed boxes should be used sparingly and not only for the reasons given above.

For example, they can be useful to provide a user with an overview of different aspects of a course?

They should not be used when the information is incremental e.g. adding a new tab for every new academic year.
Instead, you could make a bulleted list of all the years and individual pages for the information related to that year.

When adding a tabbed box, it is advisable to have the following ready: the names for each label, the titles and the content.

  1. Go to the page where you want add tabs
  2. Ensure you are in editing mode
  3. Click on the 'Indigo tabs' icon in the editing toolbar
  4. Type a number representing how many tabs you would like e.g. 3
  5. Click on insert
  6. Don't delete the links in the tabs - instead, edit the links in the tabs
    i.e. click in the middle of the link, type your text and then remove the letters you don't need...
  7. Add the Header - e.g. Course requirements - the Header sits below the tab which already has a title, so don't repeat that, but instead elaborate on the Tab's title.
    If you cannot think of a header, you can also leave it out! (see the example above: the first tab has a header, the second one hasn't.
    By default it's in H2 style but you can change that to H3 or even H4.
  8. Add the content and then move on to the next tab
  9. Save
  10. Finally, check you are happy with the result, including on a mobile device

Help and support


We are continually improving our website. Please provide any feedback using the feedback form.

Please note: This form is only to provide feedback. If you require IT support please contact the IT Services Help desk. We can only respond to UCL email addresses.

Give feedback