Information Services Division


Drupal CMS: Tabs

Learn to add Indigo tabs in Drupal.

This guide is aimed at

  • Staff
  • PG Students

Before you start 

You need to be a Senior Editor, Editor or Author
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. Depending on your role:
    if you are a Senior Editor: click on 'Publishing options - Draft (Current)' in the left-hand menu, choose 'published' from the drop-down menu
    if you are an Editor: click on 'Revision information' in the left-hand menu, choose 'published' from the drop-down menu
    if you are an Author: click on 'Revision information' in the left-hand menu, choose 'needs review' from the drop-down menu
  10. Save
  11. If you need to put the page in the menu, check the instructions for putting a page in the website's menu
  12. Finally, check you are happy with the result, including on a mobile device

Help and support


We are continually improving our site, so please provide us any feedback on this web page using the form below. It would also be really useful if we could discuss your feedback with you, so if you are happy to be contacted please include your UCL email address in 'Email' field below.

Please note: We can only respond to UCL email addresses

Help us improve this page