Tabs | Crossroads Digital Design Kit

Tabs

Default tabs

Default tabs are based on Bootstrap's implementation.

Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper.

Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content soft-top">
    <div role="tabpanel" class="tab-pane active" id="home">
      <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper.</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">
      <p>Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="messages">
      <p>Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="settings">
      <p>Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur.</p>
    </div>
  </div>

</div>

Vertical tabs

Vertical tabs are a good solution for creating tabbable content for both mobile- and desktop-sized screens.

On mobile screens, the tabs receive a light gray background color. The intention is for the tabs to make use of Bootstrap's collapse feature. This can be accomplished by using an element with a .sidebar-nav-trigger class.

Vertical tabs also support nested tabs, which can be hidden with the collapse feature as well. Icons within the collapse triggers will automatically be rotated upon expand/collapse events.

The example below shows all of these features put together, but you certainly don't need to make use of all features to create vertical tabs.

<button class="sidebar-nav-trigger" data-toggle="collapse" data-target="#sidebar-nav">
  Most Watched
  <svg class="icon icon-1" viewBox="0 0 256 256">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svgs/icons.svg#chevron-down-thin"></use>
  </svg>
</button>
<ul class="sidebar-nav collapse" id="sidebar-nav">
  <li class="sidebar-nav-item">
    <a class="sidebar-nav-link" href="javascript:void(0)">
      Recent
    </a>
  </li>
  <li class="sidebar-nav-item">
    <a class="sidebar-nav-link active" href="javascript:void(0)">
      Most Watched
    </a>
  </li>
  <li class="sidebar-nav-item">
    <a class="sidebar-nav-link" href="#collapse-cat-a" data-toggle="collapse">
      Category A
      <svg class="icon icon-1" viewBox="0 0 256 256">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svgs/icons.svg#chevron-down-thin"></use>
      </svg>
    </a>
    <ul class="sidebar-subnav collapse" id="collapse-cat-a">
      <li class="sidebar-subnav-item">
        <a class="sidebar-subnav-link" href="javascript:void()">
          Sub-Item #1
        </a>
      </li>
      <li class="sidebar-subnav-item">
        <a class="sidebar-subnav-link" href="javascript:void()">
          Sub-Item #2
        </a>
      </li>
      <li class="sidebar-subnav-item">
        <a class="sidebar-subnav-link" href="javascript:void()">
          Sub-Item #3
        </a>
      </li>
    </ul>
  </li>
  <li class="sidebar-nav-item">
    <a class="sidebar-nav-link" href="javascript:void(0)">
      Category B
    </a>
  </li>
</ul>