patternfly/tests-src/tabs.html

This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.

---
categories: [Widgets]
layout: page
title: Tabs
resource: true
---
      <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
      </ul>
      <br />
      <ul class="nav nav-tabs">
        <li><a href="#">Home</a></li>
        <li class="active"><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
      </ul>
      <br />
      <ul class="nav nav-tabs">
        <li><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li class="active"><a href="#">Messages</a></li>
      </ul>
      <h3>Justified</h3>
      <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
      </ul>
      <br />
      <ul class="nav nav-tabs nav-justified">
        <li><a href="#">Home</a></li>
        <li class="active"><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
      </ul>
      <br />
      <ul class="nav nav-tabs nav-justified">
        <li><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li class="active"><a href="#">Messages</a></li>
      </ul>
      <h3>Tabs with dropdowns</h3>
      <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Help</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            Dropdown <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
      <br />
      <ul class="nav nav-tabs">
        <li><a href="#">Home</a></li>
        <li class="active"><a href="#">Help</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            Dropdown <span class="caret"></span>
          </a>
          <ul class="dropdown-menu pull-right" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
      <br />
      <ul class="nav nav-tabs">
        <li><a href="#">Home</a></li>
        <li><a href="#">Help</a></li>
        <li class="active dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            Dropdown <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
      <h2>PatternFly Examples</h2>
      <ul class="nav nav-tabs nav-tabs-pf">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
      </ul>
      <br />
      <ul class="nav nav-tabs nav-tabs-pf">
        <li><a href="#">Home</a></li>
        <li class="active"><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
      </ul>
      <br />
      <ul class="nav nav-tabs nav-tabs-pf">
        <li><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li class="active"><a href="#">Messages</a></li>
      </ul>
      <h3>Justified</h3>
      <ul class="nav nav-tabs nav-tabs-pf nav-justified">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
      </ul>
      <br />
      <ul class="nav nav-tabs nav-tabs-pf nav-justified">
        <li><a href="#">Home</a></li>
        <li class="active"><a href="#">Profile</a></li>
        <li><a href="#">Messages</a></li>
      </ul>
      <br />
      <ul class="nav nav-tabs nav-tabs-pf nav-justified">
        <li><a href="#">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li class="active"><a href="#">Messages</a></li>
      </ul>
      <h3>Tabs with dropdowns</h3>
      <ul class="nav nav-tabs nav-tabs-pf">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Help</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            Dropdown <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
      <br />
      <ul class="nav nav-tabs nav-tabs-pf">
        <li><a href="#">Home</a></li>
        <li class="active"><a href="#">Help</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            Dropdown <span class="caret"></span>
          </a>
          <ul class="dropdown-menu pull-right" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
      <br />
      <ul class="nav nav-tabs nav-tabs-pf">
        <li><a href="#">Home</a></li>
        <li><a href="#">Help</a></li>
        <li class="active dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            Dropdown <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
      <h3>.nav-tabs + .nav-tabs-pf</h3>
      <p class="text-info">
        <strong>Note:</strong> the markup semantics used here are sub-optimal in order to easily achieve a responsive layout.
      </p>
      <ul class="nav nav-tabs">
        <li class="active"><a href="#">Tab One</a></li>
        <li><a href="#">Tab Two</a></li>
        <li><a href="#">Tab Three</a></li>
        <li><a href="#">Tab Four</a></li>
        <li><a href="#">Tab Five</a></li>
        <li><a href="#">Tab Six</a></li>
        <li><a href="#">Tab Seven</a></li>
      </ul>
      <ul class="nav nav-tabs nav-tabs-pf">
        <li class="active"><a href="#">Secondary Tab One</a></li>
        <li><a href="#">Secondary Tab Two</a></li>
        <li><a href="#">Secondary Tab Three</a></li>
        <li><a href="#">Secondary Tab Four</a></li>
        <li><a href="#">Secondary Tab Five</a></li>
        <li><a href="#">Secondary Tab Six</a></li>
        <li><a href="#">Secondary Tab Seven</a></li>
      </ul>
      <br />
      <ul class="nav nav-tabs">
        <li class="active"><a href="#">Tab One</a></li>
        <li><a href="#">Tab Two</a></li>
        <li><a href="#">Tab Three</a></li>
        <li><a href="#">Tab Four</a></li>
        <li><a href="#">Tab Five</a></li>
        <li><a href="#">Tab Six</a></li>
        <li><a href="#">Tab Seven</a></li>
      </ul>
      <ul class="nav nav-tabs nav-tabs-pf">
        <li><a href="#">Secondary Tab One</a></li>
        <li class="active"><a href="#">Secondary Tab Two</a></li>
        <li><a href="#">Secondary Tab Three</a></li>
        <li><a href="#">Secondary Tab Four</a></li>
        <li><a href="#">Secondary Tab Five</a></li>
        <li><a href="#">Secondary Tab Six</a></li>
        <li><a href="#">Secondary Tab Seven</a></li>
      </ul>
      <br />
      <ul class="nav nav-tabs">
        <li><a href="#">Tab One</a></li>
        <li class="active"><a href="#">Tab Two</a></li>
        <li><a href="#">Tab Three</a></li>
        <li><a href="#">Tab Four</a></li>
        <li><a href="#">Tab Five</a></li>
        <li><a href="#">Tab Six</a></li>
        <li><a href="#">Tab Seven</a></li>
      </ul>
      <ul class="nav nav-tabs nav-tabs-pf">
        <li><a href="#">Secondary Tab One</a></li>
        <li class="active"><a href="#">Secondary Tab Two</a></li>
        <li><a href="#">Secondary Tab Three</a></li>
        <li><a href="#">Secondary Tab Four</a></li>
        <li><a href="#">Secondary Tab Five</a></li>
        <li><a href="#">Secondary Tab Six</a></li>
        <li><a href="#">Secondary Tab Seven</a></li>
      </ul>