Tabs#

Tabs enable quick switch between different views.

Add a container element with the tab class. And add child radio inputs and labels with the tab-item class. You can add the tab-block class for a full-width tab. The input with the checked attribute will be highlighted.

<div class="tab">
  <input type="radio" name="tab1" id="tab1-1" checked>
  <label class="tab-item" for="tab1-1">Music</label>
  <input type="radio" name="tab1" id="tab1-2">
  <label class="tab-item" for="tab1-2">Playlists</label>
  <input type="radio" name="tab1" id="tab1-3">
  <label class="tab-item" for="tab1-3">Radio</label>
  <input type="radio" name="tab1" id="tab1-4">
  <label class="tab-item" for="tab1-4">Store</label>
  <div class="tab-panel">...</div>
  <div class="tab-panel">...</div>
  <div class="tab-panel">...</div>
  <div class="tab-panel">...</div>
 </div>

If you need badges on tabs, you can add badge class to the element within tab-item.

<div class="tab tab-block">
  <input type="radio" name="tab4" id="tab4-1" checked>
  <label class="tab-item badge" for="tab4-1" data-badge="9">Music</label>
  <input type="radio" name="tab4" id="tab4-2">
  <label class="tab-item badge" for="tab4-2" data-badge="99">Playlists</label>
  <input type="radio" name="tab4" id="tab4-3">
  <label class="tab-item" for="tab4-3">Radio</label>
  <div class="tab-panel">...</div>
  <div class="tab-panel">...</div>
  <div class="tab-panel">...</div>
</div>

You could add a search box or buttons inside a tab. Add the tab-action class to the tab-item.

<div class="tab">
  <input type="radio" name="tab5" id="tab5-1" checked>
  <label class="tab-item" for="tab5-1">Music<span class="btn btn-clear"></span></label>
  <input type="radio" name="tab5" id="tab5-2">
  <label class="tab-item" for="tab5-2">Playlists</label>
  <input type="radio" name="tab5" id="tab5-3">
  <label class="tab-item" for="tab5-3">Radio</label>
  <input type="radio" name="tab5" id="tab5-4">
  <label class="tab-item" for="tab5-4">Store</label>
  <label class="tab-item tab-action">
    <div class="input-group input-inline">
      <input class="form-input input-sm" type="text">
      <button class="btn btn-primary btn-sm input-group-btn">Search</button>
    </div>
  </label>
  <div class="tab-panel">...</div>
  <div class="tab-panel">...</div>
  <div class="tab-panel">...</div>
  <div class="tab-panel">...</div>
</div>