Tabs

Tabs are used for navigation and filtering purposes. Tabs are responsive, which means that items that do not fit on the row, are put in a hidden dropdown menu. The dropdown can be opened with the last 'more' button, which is only present when there are more tabs than can fit on a row.

To make the the items move to the dropdown, make sure to create the markup like shown below in the source code. Javascript will move the list items into the empty unordered list.

  <div class='tabwrapper'>
    <ul class='tabs'>
      <li><a class="tab active" href="#">All</a></li>
      <li><a class="tab" href="#">Campaign project group</a></li>
      <li><a class="tab" href="#">Discussion group</a></li>
      <li><a class="tab" href="#">Interest group</a></li>
      <li><a class="tab" href="#">Local groups</a></li>
      <li><a class="tab" href="#">Skills-based group</a></li>
      <li><a class="tab" href="#">Other type of group</a></li>
    </ul>
    <ul class='tabs-overflow'>
      <li><a class='tab tab-overflow-trigger' data-dropdown='#dropdown-tabs' href='#'>more</a>  <div class='dropdown dropdown-tip dropdown-relative dropdown-anchor-right' id='dropdown-tabs'>
          <ul class='dropdown-menu'></ul>
        </div>
      </li>
    </ul>
  </div>