Although they are most often seen within the content area of an article, tabs are also used as part of larger patterns throughout our theme collection. The Tabs plugin is responsible for generating the HTML markup for a tabs element, based on an existing list.
The following example uses the default template, which can replaced using the plugin’s template option.
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. Our guide on how to add tabs to your article content includes the steps involved in customizing the appearance of your tabs.
Create a ordered or unordered list (<ol> and <ul> elements, respectively)
Click the Source Code () button in the editor toolbar to view the source code of the page.
Add the data-element="tabs" attribute to the list element.
Add optional titles to each list item using the data-title attribute:
<uldata-element="tabs"><lidata-title="The first tab">...</li><lidata-title="The second tab">...</li><lidata-title="The third tab">...</li></ul>
If data attributes are used, you will need to ensure that the allow unsafe HTML setting is enabled within the Zendesk Guide settings.
The Tab plugin, which can be used independently of this plugin, is responsible for showing and hiding tabs. Because the Tabs plugin is simply responsible for generating the required HTML based on preexisting content, you simply add your own HTML markup to any page.
For data attributes, append the option name to data- and use kebab case instead of camel case. For example, data-template="my-tabs" instructs the plugin to use the custom my-tabs template for rendering markup.
The index of the tab that should be shown on initialization.
The class name(s) to apply to the active tab link.