p Tabs enable quick switch between different views.
      
.docs-demo.columns
  .column.col-6.col-sm-12
    ul.tab
      li.tab-item.active
        a(href="#tabs")
          | Music
      li.tab-item
        a(href="#tabs")
          | Playlists
      li.tab-item
        a(href="#tabs")
          | Radio
      li.tab-item
        a(href="#tabs")
          | Store
  .column.col-6.col-sm-12
    ul.tab.tab-block
      li.tab-item.active
        a(href="#tabs")
          | Music
      li.tab-item
        a(href="#tabs")
          | Playlists
      li.tab-item
        a(href="#tabs")
          | Radio

p
  | Add a container element with the #[code tab] class. 
  | And add child elements with the #[code tab-item] class. 
  | You can add the #[code tab-block] class for a full-width tab.
  | The #[code tab-item] or its child #{'<a>'} with the #[code active] class will be highlighted.

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")
      <ul class="tab tab-block">
        <li class="tab-item active">
          <a href="#">Music</a>
        </li>
        <li class="tab-item">
          <a href="#" class="active">Playlists</a>
        </li>
        <li class="tab-item">
          <a href="#">Radio</a>
        </li>
        <li class="tab-item">
          <a href="#">Connect</a>
        </li>
      </ul>

.docs-demo.columns
  .column.col-sm-12
    ul.tab
      li.tab-item.active
        a.badge(href="#tabs" data-badge="999")
          | Music
      li.tab-item
        a(href="#tabs")
          | Playlists
      li.tab-item
        a(href="#tabs")
          | Radio
  .column.col-sm-12
    ul.tab.tab-block
      li.tab-item.active
        a.badge(href="#tabs" data-badge="9")
          | Music
      li.tab-item
        a.badge(href="#tabs" data-badge="99")
          | Playlists
      li.tab-item
        a(href="#tabs")
          | Radio

p
  | If you need #[code badges] on tabs, you can add badge class to the element within #[code tab-item].

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")
      <ul class="tab tab-block">
        <li class="tab-item active">
          <a href="#" class="badge" data-badge="9">
            Music
          </a>
        </li>
      </ul>

.docs-demo.columns
  .column.col-12
    ul.tab
      li.tab-item.active
        a(href="#tabs")
          | Music
          span.btn.btn-clear
      li.tab-item
        a(href="#tabs")
          | Playlists
      li.tab-item
        a(href="#tabs")
          | Radio
      li.tab-item
        a(href="#tabs")
          | Store
      li.tab-item.tab-action
        .input-group.input-inline
          input.form-input.input-sm(type="text" placeholder="search")
          button.btn.btn-primary.btn-sm.input-group-btn Search

p
  | You could add a search box or buttons inside a tab.
  | Add the #[code tab-action] class to the #[code tab-item].

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")
      <ul class="tab">
        <li class="tab-item active">
          <a href="#">
            Music
          </a>
        </li>
        <li class="tab-item tab-action">
          <div class="input-group input-inline">
            <input class="form-input input-sm" type="text" placeholder="search">
            <button class="btn btn-primary btn-sm input-group-btn">Search</button>
          </div>
        </li>
      </ul>