Creating tabs

Tabs are content element that can make it easier for visitors to find what they’re after by grouping content. You can convert static lists into fully functional tabs using data-attributes, without copying and pasting HTML or changing your actual content.

Although they are most often seen within the content area of an article, tabs and the Tabs extension are also used as part of larger patterns throughout our theme collection. In this guide we’ll focus on how to create tabs within the content of your article using the editor within Zendesk Guide.

Because the extension is built-in to all of our themes, there are no additional scripts to include or code to write.

Adding tabs to article content

The first step is to create a numbered or bulleted list in your article where each list item contains the content that will be contained within its own tab. If you have a lot of content to display in each tab, or content that contains headings and other custom elements, we recommend using the Source Code view within the article editor.

The list itself will be a <ol> or <ul> element, with child list items represented as <li> elements.

Once you’ve added all of your content to the list add a class name of .js-tabs to the list and a data-title attribute to each list item. For example:

<ul class="js-tabs">
  <li data-title="The first tab title">...</li>
  <li data-title="The second tab title">...</li>
  <li data-title="The third tab title">...</li>
</ul>

Where:

  • The .js-tabs class name specifies that we’d like to convert this list into dynamic tabs.
  • The data-title attribute specifies the title for each tab.
  • The content of each list item is converted into its own tab.

The default tabs style as well as an alternative method for specifying tab titles can be found on the Tabs extension page.

If data attributes are used you will need to ensure that the allow unsafe HTML setting is enabled within Zendesk Guide.

This approach ensures a separation between your content and how it’s displayed to visitors. If you ever decide to disable tabs for a given list, change themes or export your content you’ll see a simple, uncontaminated list.

Styling tabs

If you’d like to give your tabs their own unique look-and-feel there are a couple of options. You can write your own custom CSS, for example:

/* Change the color of a tab link to red */
.content .nav-tabs .nav-link {
  color: red;
}

/* Change the color of text in a tab to blue */
.content .tabs .tab {
  color: blue;
}

Using a custom micro-template

Or for the more adventurous among you, you can create your own custom micro-template.

A custom template allows to to change not just the appearance of the tabs, but their underlying HTML structure and behavior. Below is an example of a custom tabs template that you could use that not only changes the size and appearance of the tabs, but introduces custom icons:

Large, justified tabs with icons

An optional fade effect can be added by using .fade on each tab. If the fade effect is applied the active tab must also have .is-shown in order to be visible.

The Tabs extension looks for a micro-template with an id of tabs by default, so adding one to Article page template (article_page.hbs) or the globally available Footer template (footer.hbs) will ensure that it’s used for all tabs within your article content.

<ul class="js-tabs">
  <li data-title="The first tab title">...</li>
  <li data-title="The second tab title">...</li>
  <li data-title="The third tab title">...</li>
</ul>

<template id="tmpl-tabs">
  ...
</template>

Questions or feedback about this article? Let us know