Tab

The tab module aims to combine multiple components and design paradigms, like collapses, accordions, carousels and tabs, into one general-purpose component. Tabs are very simple in structure, responsive on mobile and they allow for layout customization so that you can turn them into accordions or collapses whenever you want.

All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.

Quick overview

Spoilers, collapses, accordions, tabs, carousels have been a staple of modern design for quite a long time. All of these elements are implemented using the tab module's single generic container. The tab container replaces all of these design paradigms with one component that is very flexible and responsive in order to let you present your website or app's content any way you like. Tabbed navigation is very easy to implement, while collapse, accordion and carousel components use the stacked architecture of tabs. As usual, the tab container is responsive and accessible, allowing you to deliver your content properly to all devices and users.

Quick start

To use the tab module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

Basic syntax

Tab 1

This is the first tab's content.

Tab 2

This is the second tab's content.

Tab 3

This is the third tab's content.

Tab 4

This is the fourth tab's content.

The tab container's basic sytanx is composed of two components, presented below in the order they should be added to the DOM tree:

At the outermost level of the tab container is a <div> element implementing the .tabs class. This serves as the wrapper of the tab container.
Inside the .tabs container, add a set of the following three elements for each tab:
1. First, add an <input type="radio"> element. Give it a name and an id in order to be able to link to it and group it with the rest of the radio buttons in the container.
2. Follow the <input> element with a <label> element linking to it. Inside this element, add the text you want to be shown as the title of your tab.
3. Finally, add a <div> immediately after the <label>'s closing tag. This will be the panel that contains the tab's content. Inside this element, you can add all the content you want in your tab (headings, images, text).

Tabs are responsive and will collapse into a stacked display on smaller screens, allowing the user to view the actual content more easily. The tab container's syntax is accessible, but parts of it might confuse screen readers, so we suggest adding the aria-hidden="true" attribute to all the <input> and <label> elements inside the .tabs container.

Sample code

<div class="tabs">
  <input type="radio" name="tab-group" id="tab1" checked aria-hidden="true">
  <label for="tab1" aria-hidden="true">Tab 1</label>
  <div>
    <h3>Tab 1</h3>
    <p>This is the first tab's content.</p>
  </div>
  <input type="radio" name="tab-group" id="tab2" aria-hidden="true">
  <label for="tab2" aria-hidden="true">Tab 2</label>
  <div>
    <h3>Tab 2</h3>
    <p>This is the second tab's content.</p>
  </div>
  <input type="radio" name="tab-group" id="tab3" aria-hidden="true">
  <label for="tab3" aria-hidden="true">Tab 3</label>
  <div>
    <h3>Tab 3</h3>
    <p>This is the third tab's content.</p>
  </div>
</div>

Notes

Tabs are compatible with modern browsers, but might not display properly in older browsers.
Remember to add the checked attribute to one of your <input>s if you want that tab to be the one displayed by default. If none is specified, the first one will be displayed.
The height of the tab container's panel area is 400px. If you want to change this default size, please check out the customization page.
Using the method described above for making tabs accessible, screen readers will ignore tab controls and only read the content of tabs.

<div class="tabs">
  <input type="checkbox" name="tab-group" id="tab1" checked aria-hidden="true">
  <label for="tab1" aria-hidden="true">Tab 1</label>
  <div>
    <h3>Bad Tab</h3>
  </div>
</div>

Don't: Do not use checkboxes inside the default .tabs container, otherwise you might notice unexpected behavior. If you want to use an <input type="checkbox">, check out the next section.

<div class="tabs">
  <input type="radio" name="tab-group" id="tab1" checked aria-hidden="true">
  <label for="tab1" aria-hidden="true">Tab 1</label>
  <div>
    <h3>Lonely Tab</h3>
  </div>
</div>

Don't: You can add a single tab in a .tabs container, but what use would that be? You should probably read the next section to see what you can do with a stacked tab container instead.

<div class="tabs">
  <input type="radio" name="tab-group" id="tab1" checked aria-hidden="true">
  <label for="tab1" aria-hidden="true">Tab 1</label>
  <input type="radio" name="tab-group" id="tab2" aria-hidden="true">
  <label for="tab2" aria-hidden="true">Tab 2</label>
  <div>
    <h3>Bad Tab</h3>
  </div>
  <div>
    <h3>Bad Tab</h3>
  </div>
</div>

Don't: The syntax and structure of the tab container is very strict. Try to follow it exactly as described in this section.

<div class="tabs">
  <input type="radio" name="tab-group" id="tab1" checked>
  <label for="tab1">Tab</label>
  <div>
    <h3>Not fully accessible tab</h3>
  </div>
</div>

Don't: Remember to use the aria-hidden="true" attribute to make your tabs fully accessible.

Stacked tabs

Section 1

This is the first accordion section's content.

Section 2

This is the second accordion section's content.

This is the first collapse section's content.

This is the second collapse section's content.

Apart from the normal tab layout, you can make your tabs stacked instead, using the .stacked class in your .tabs container element. Stacked tabs are more versatile, allowing you to use checkboxes and/or radio buttons to implement collapses, accordions and spoilers. Carousel-styled elements can also be displayed in this fashion, if you wish. Remember to use the aria-hidden="true" attribute to make your tabs fully accessible, as before.

Sample code

<div class="tabs stacked">
  <input type="radio" name="accordion" id="a1" checked aria-hidden="true">
  <label for="a1" aria-hidden="true">Accordion section 1</label>
  <div>
    <h3>Section 1</h3>
    <p>This is the first accordion section's content.</p>
  </div>
  <input type="radio" name="accordion" id="a2"aria-hidden="true">
  <label for="a2" aria-hidden="true">Accordion section 2</label>
  <div>
    <h3>Section 2</h3>
    <p>This is the second accordion section's content.</p>
  </div>
</div>

<div class="tabs stacked">
  <input type="checkbox" id="c1" aria-hidden="true">
  <label for="c1" aria-hidden="true">Collapse section 1</label>
  <div>
    <p>This is the first collapse section's content.</p>
  </div>
  <input type="checkbox" id="c2" aria-hidden="true">
  <label for="c2" aria-hidden="true">Collapse section 2</label>
  <div>
    <p>This is the second collapse section's content.</p>
  </div>
</div>

Notes

.stacked tabs can be used with either checkboxes or radio buttons.
You can mix and match checkboxes and radio buttons, but we suggest you do not do so, unless you think it is necessary for your design.

<div class="tabs stacked">
  <input type="checkbox" id="c1" aria-hidden="true">
  <label for="c1" aria-hidden="true">Single collapse</label>
  <div>
    <p>This is a singular collapse.</p>
  </div>
</div>

Do: You can implement single collapses (otherwise known as spoilers), using a .tabs.stacked container with only one checkbox-based tab.

<div class="tabs stacked">
  <input type="radio" name="accordion" id="a1" checked aria-hidden="true">
  <label for="a1" aria-hidden="true">Single accordion section</label>
  <div>
    <p>This accordion section cannot close once opened</p>
  </div>
</div>

Don't: Avoid having a single radio-based tab in a .tabs.stacked container, as this might result in unexpected behavior.

If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.