Bootstrap/docs/_includes/components/navs.html

<div class="bs-docs-section">
  <h1 id="nav" class="page-header">Navs</h1>

  <p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>

  <h2 id="nav-basic">Basic nav</h2>
  <p>Uses no modifier classes. No supported active state by default, given highly customizable nature of nav styles.</p>
  <div class="bs-example">
    <ul class="nav" role="tablist">
      <li>
        <a href="#">Active</a>
      </li>
      <li>
        <a href="#">Link</a>
      </li>
      <li>
        <a href="#">Another link</a>
      </li>
      <li class="disabled">
        <a href="#">Disabled</a>
      </li>
    </ul>
  </div>

  <h2 id="nav-tabs">Tabs</h2>
  <p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
  <div class="bs-example">
    <ul class="nav-tab" role="tablist">
      <li class="nav-tab-item active">
        <a href="#" class="nav-tab-link">Active</a>
      </li>
      <li class="nav-tab-item">
        <a href="#" class="nav-tab-link">Link</a>
      </li>
      <li class="nav-tab-item">
        <a href="#" class="nav-tab-link">Another link</a>
      </li>
      <li class="nav-tab-item disabled">
        <a href="#" class="nav-tab-link">Disabled</a>
      </li>
    </ul>
  </div>
{% highlight html %}
<ul class="nav-tab" role="tablist">
  <li class="nav-tab-item active">
    <a href="#" class="nav-tab-link">Active</a>
  </li>
  <li class="nav-tab-item">
    <a href="#" class="nav-tab-link">Link</a>
  </li>
  <li class="nav-tab-item">
    <a href="#" class="nav-tab-link">Another link</a>
  </li>
  <li class="nav-tab-item disabled">
    <a href="#" class="nav-tab-link">Disabled</a>
  </li>
</ul>
{% endhighlight %}
  <div class="bs-callout bs-callout-info">
    <h4>Requires JavaScript tabs plugin</h4>
    <p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>.</p>
  </div>

  <h2 id="nav-pills">Pills</h2>
  <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p>
  <div class="bs-example">
    <ul class="nav-pill" role="tablist">
      <li class="nav-pill-item active">
        <a href="#" class="nav-pill-link">Active</a>
      </li>
      <li class="nav-pill-item">
        <a href="#" class="nav-pill-link">Link</a>
      </li>
      <li class="nav-pill-item">
        <a href="#" class="nav-pill-link">Another link</a>
      </li>
      <li class="nav-pill-item disabled">
        <a href="#" class="nav-pill-link">Disabled</a>
      </li>
    </ul>
  </div>
{% highlight html %}
<ul class="nav-pill" role="tablist">
  <li class="nav-pill-item active">
    <a href="#" class="nav-pill-link">Active</a>
  </li>
  <li class="nav-pill-item">
    <a href="#" class="nav-pill-link">Link</a>
  </li>
  <li class="nav-pill-item">
    <a href="#" class="nav-pill-link">Another link</a>
  </li>
  <li class="nav-pill-item disabled">
    <a href="#" class="nav-pill-link">Disabled</a>
  </li>
</ul>
{% endhighlight %}

  <p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p>
  <div class="bs-example">
    <ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 300px;">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Profile</a></li>
      <li><a href="#">Messages</a></li>
    </ul>
  </div>
{% highlight html %}
<ul class="nav nav-pills nav-stacked" role="tablist">
  ...
</ul>
{% endhighlight %}


  <h2 id="nav-justified">Justified</h2>
  <p>Easily make tabs or pills equal widths of their parent at screens wider than 768px with <code>.nav-justified</code>. On smaller screens, the nav links are stacked.</p>
  <div class="bs-callout bs-callout-warning">
    <h4>Safari and responsive justified navs</h4>
    <p>As of v7.0.1, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p>
  </div>
  <div class="bs-example">
    <ul class="nav nav-tabs nav-justified" role="tablist">
      <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-pills nav-justified" role="tablist">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Profile</a></li>
      <li><a href="#">Messages</a></li>
    </ul>
  </div>
{% highlight html %}
<ul class="nav nav-tabs nav-justified" role="tablist">
  ...
</ul>
<ul class="nav nav-pills nav-justified" role="tablist">
  ...
</ul>
{% endhighlight %}


  <h2 id="nav-dropdowns">Using dropdowns</h2>
  <p>Add dropdown menus with a little extra HTML and the <a href="../javascript/#dropdowns">dropdowns JavaScript plugin</a>.</p>

  <h3>Tabs with dropdowns</h3>
  <div class="bs-example">
    <ul class="nav nav-tabs" role="tablist">
      <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
        </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>
  </div>
{% highlight html %}
<ul class="nav nav-tabs" role="tablist">
  ...
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Dropdown
    </a>
    <ul class="dropdown-menu" role="menu">
      ...
    </ul>
  </li>
  ...
</ul>
{% endhighlight %}

  <h3>Pills with dropdowns</h3>
  <div class="bs-example">
    <ul class="nav nav-pills" role="tablist">
      <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
        </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>
  </div><!-- /example -->
{% highlight html %}
<ul class="nav nav-pills" role="tablist">
  ...
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Dropdown
    </a>
    <ul class="dropdown-menu" role="menu">
      ...
    </ul>
  </li>
  ...
</ul>
{% endhighlight %}
</div>