Sections

Create tabs in content

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 plugin 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 plugin 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 data-element="tabs" attribute to the list and a data-title attribute to each list item. For example:

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

Where:

  • The data-element="tabs" attribute 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.

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

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

The default tabs styles can be seen on the Tabs plugin page.

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 */
.nav-tabs .nav-link {
  color: red;
}

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

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:

  • <script type="text/html" id="tmpl-custom-tabs">
      <% if (children.length) { %>
          <ul class="nav nav-tabs nav-justified" id="<%= id %>">
            <% children.forEach(function(child, index) { %>
              <% var isActive = initial === index; %>
              <li class="nav-item">
                <a class="nav-link flex align-items-center justify-content-center font-semibold font-size-lg text-gray-700 py-4 hover:text-gray-800 hover:bg-gray-100<% if (isActive) { %> is-active<% } %>" role="tab" data-toggle="tab" aria-expanded="<%= isActive %>" href="#<%= id %>-<%= index %>">
                  <% if (child.title === 'Android') { %>
                    <svg class="svg-icon fill-current bottom-0 mr-3" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                      <path d="M24 19H0a13.6 13.6 0 0 1 2.21-6.07A11.2 11.2 0 0 1 5.87 9.4l.41-.23-2.02-3.41a.51.51 0 0 1 .17-.7.5.5 0 0 1 .69.18l2.08 3.5a12.62 12.62 0 0 1 4.84-.9 12.2 12.2 0 0 1 4.75.9l2.07-3.5a.5.5 0 0 1 .7-.17.51.51 0 0 1 .16.7L17.7 9.19l.5.28a11.38 11.38 0 0 1 3.63 3.62A14.48 14.48 0 0 1 24 19zm-7.5-4.48a1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1 1 1 0 0 0-1 1zm-11 0a1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1 1 1 0 0 0-1 1z"/>
                    </svg>
                  <% } else if (child.title === 'iOS') { %>
                    <svg class="svg-icon fill-current bottom-0 mr-3" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                      <path d="M7.078 23.55c-.473-.316-.893-.703-1.244-1.15-.383-.463-.738-.95-1.064-1.454-.766-1.12-1.365-2.345-1.78-3.636-.5-1.502-.743-2.94-.743-4.347 0-1.57.34-2.94 1.002-4.09.49-.9 1.22-1.653 2.1-2.182.85-.53 1.84-.82 2.84-.84.35 0 .73.05 1.13.15.29.08.64.21 1.07.37.55.21.85.34.95.37.32.12.59.17.8.17.16 0 .39-.05.645-.13.145-.05.42-.14.81-.31.386-.14.692-.26.935-.35.37-.11.728-.21 1.05-.26.39-.06.777-.08 1.148-.05.71.05 1.36.2 1.94.42 1.02.41 1.843 1.05 2.457 1.96-.26.16-.5.346-.725.55-.487.43-.9.94-1.23 1.505-.43.77-.65 1.64-.644 2.52.015 1.083.29 2.035.84 2.86.387.6.904 1.114 1.534 1.536.31.21.582.355.84.45-.12.375-.252.74-.405 1.1-.347.807-.76 1.58-1.25 2.31-.432.63-.772 1.1-1.03 1.41-.402.48-.79.84-1.18 1.097-.43.285-.935.436-1.452.436-.35.015-.7-.03-1.034-.127-.29-.095-.576-.202-.856-.323-.293-.134-.596-.248-.905-.34-.38-.1-.77-.148-1.164-.147-.4 0-.79.05-1.16.145-.31.088-.61.196-.907.325-.42.175-.695.29-.855.34-.324.096-.656.154-.99.175-.52 0-1.004-.15-1.486-.45zm6.854-18.46c-.68.34-1.326.484-1.973.436-.1-.646 0-1.31.27-2.037.24-.62.56-1.18 1-1.68.46-.52 1.01-.95 1.63-1.26.66-.34 1.29-.52 1.89-.55.08.68 0 1.35-.25 2.07-.228.64-.568 1.23-1 1.76-.435.52-.975.95-1.586 1.26z"/>
                    </svg>
                  <% } else if (child.title === 'Windows') { %>
                    <svg class="svg-icon fill-current bottom-0 mr-3" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                      <path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801"/>
                    </svg>
                  <% } %>
                  <%= child.title %>
                </a>
              </li>
            <% }); %>
          </ul>
          <div class="tabs">
            <% children.forEach(function(child, index) { %>
              <% var isActive = initial === index; %>
              <div class="tab list-unstyled p-6 bg-white border border-radius-bottom<% if (isActive) { %> is-active<% } %>" id="<%= id %>-<%= index %>" role="tab-panel">
                <%= child.innerHTML %>
              </div>
            <% }); %>
          </div>
      <% } %>
    </script>

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.

You could include the micro-template within the Article page template (article_page.hbs) or one that’s globally available, like the Footer (footer.hbs). The micro-template in this example has an id of tmpl-custom-tabs so to apply this to a set of tabs in your content you’d update your list to include a reference to the template:

<ul data-element="tabs" data-template="custom-tabs">
  <li data-title="The first tab">...</li>
  <li data-title="The second tab">...</li>
  <li data-title="The third tab">...</li>
</ul>

Questions or feedback about this guide? Let us know