Tab elements

Tabs can provide structure to your content and make it more easily accessible to readers.

In this article

You can use tabs within the content areas of articles and posts or within page templates themselves.


The following examples use the default template used by the Tabs plugin.

  • <ul data-element="tabs" data-active-class="text-primary">
      <li data-title="Android">
        <p>Android is a mobile operating system based on a modified version of the Linux kernel and other open source software, designed primarily for touchscreen mobile devices such as smartphones and tablets. Android is developed by a consortium of developers known as the Open Handset Alliance and commercially sponsored by Google. It was unveiled in 2007, with the first commercial Android device launched in September 2008.</p>
      <li data-title="iOS">
        <p>iOS is a mobile operating system created and developed by Apple Inc. exclusively for its hardware. It is the operating system that presently powers many of the company's mobile devices, including the iPhone, and iPod Touch; it also powered the iPad prior to the introduction of iPadOS in 2019. It is the second most popular mobile operating system globally after Android. It is the basis for other operating systems made by Apple Inc, like iPadOS, tvOS, and watchOS.</p>
      <li data-title="Windows">
        <p>Windows 10 Mobile is a discontinued mobile operating system developed by Microsoft. First released in 2015, it is a successor to Windows Phone 8.1, but was marketed by Microsoft as being an edition of its PC operating system Windows 10. Windows 10 Mobile aimed to provide greater consistency with its counterpart for PCs, including more extensive synchronization of content, the ability to to connect devices to an external display and use a desktop interface with mouse and keyboard input support.</p>

Use .nav-justified on the list being converted to tabs to have tabs fill the available horizontal space.

Custom templates

The Tabs plugin is built on top of our micro-templating system, allowing you to create your own custom templates.

The following example demonstrates pill-style navigation links with a fade effect (using the .fade class as described on the Tabs plugin page).

In addition to completely changing the look-and-feel of the tabs, you can inject custom HTML (like icons) using a custom template.