navbar.html

---
alert-message: ', <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>, and <a href="http://silviomoreto.github.io/bootstrap-select/">http://silviomoreto.github.io/bootstrap-select/</a>.'
categories: [Widgets]
layout: page
title: Navbar
resource: true
url-js-extra: 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js'
---
      <h2>Primary Navigation Bar</h2>
      <nav class="navbar navbar-default navbar-pf" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
            <img src="../../dist/img/brand.svg" alt="{{ site.title-product }}" />
          </a>
        </div>
        <div class="collapse navbar-collapse navbar-collapse-1">
          <ul class="nav navbar-nav navbar-utility">
            <li class="dropdown">
              <a class="nav-item-iconic" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span title="Help" class="fa pficon-help"></span>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
                <li><a href="#">Help</a></li>
                <li><a href="#">About</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="pficon pficon-user"></span>
                Brian Johnson <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-primary">
            <li>
              <a href="#">First Link</a>
            </li>
            <li>
              <a href="#">Another Link</a>
            </li>
            <li>
              <a href="#">And Another</a>
            </li>
            <li>
              <a href="#">As a General Rule</a>
            </li>
            <li>
              <a href="#">Five to Seven Links</a>
            </li>
            <li>
              <a href="#">Is Good</a>
            </li>
          </ul>
        </div>
      </nav>
      <hr>
      <nav class="navbar navbar-default navbar-pf" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
            <img src="{{site.assets-base}}/{{site.navbar-brand-icon}}" alt="{{ site.title-product }}" />
          </a>
        </div>
        <div class="collapse navbar-collapse navbar-collapse-1">
          <ul class="nav navbar-nav navbar-utility">
            <li class="dropdown">
              <a class="nav-item-iconic" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span title="Help" class="fa pficon-help"></span>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
                <li><a href="#">Help</a></li>
                <li><a href="#">About</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="pficon pficon-user"></span>
                Brian Johnson <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-primary">
            <li>
              <a href="#">First Link</a>
            </li>
            <li class="active">
              <a href="#">Another Link</a>
            </li>
            <li>
              <a href="#">And Another</a>
            </li>
            <li>
              <a href="#">As a General Rule</a>
            </li>
            <li>
              <a href="#">Five to Seven Links</a>
            </li>
            <li>
              <a href="#">Is Good</a>
            </li>
          </ul>
        </div>
      </nav>

      <hr>
      <h2>Context Selector</h2>
      <nav class="navbar navbar-default navbar-pf" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-3">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
            <img src="../../dist/img/brand.svg" alt="{{ site.title-product }}" />
          </a>
        </div>
        <div class="collapse navbar-collapse navbar-collapse-3">
          <ul class="nav navbar-nav navbar-utility">
            <li class="dropdown">
              <a class="nav-item-iconic" id="dropdownMenu5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span title="Help" class="fa pficon-help"></span>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu5">
                <li><a href="#">Help</a></li>
                <li><a href="#">About</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="pficon pficon-user"></span>
                Brian Johnson
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-primary">
            <li class="context context-bootstrap-select">
              <select class="selectpicker" data-live-search="true">
                <optgroup label="Context Label">
                  <option>First Option</option>
                  <option>Another Option</option>
                  <option>And Another</option>
                  <option>Fourth Option That Is a Lot Longer And Will Be Too Long At Small Resolutions</option>
                  <option data-divider="true"></option>
                  <option data-subtext="supplemental data">Fifth Option</option>
                  <option disabled>Disabled Option</option>
                  <option data-subtext="end">Final Option</option>
                </optgroup>
              </select>
            </li>
            <li>
              <a href="#">First Link</a>
            </li>
            <li>
              <a href="#">Another Link</a>
            </li>
            <li>
              <a href="#">And Another</a>
            </li>
            <li>
              <a href="#">As a General Rule</a>
            </li>
            <li>
              <a href="#">Five to Seven Links</a>
            </li>
            <li>
              <a href="#">Is Good</a>
            </li>
          </ul>
        </div>
      </nav>
      <hr>
      <nav class="navbar navbar-default navbar-pf" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-3">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
            <img src="../../dist/img/brand.svg" alt="{{ site.title-product }}" />
          </a>
        </div>
        <div class="collapse navbar-collapse navbar-collapse-3">
          <ul class="nav navbar-nav navbar-utility">
            <li class="dropdown">
              <a class="nav-item-iconic" id="dropdownMenu6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span title="Help" class="fa pficon-help"></span>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu6">
                <li><a href="#">Help</a></li>
                <li><a href="#">About</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="pficon pficon-user"></span>
                Brian Johnson
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-primary">
            <li class="context context-bootstrap-select">
              <select class="selectpicker" data-live-search="true">
                <optgroup label="Context Label">
                  <option>First Option</option>
                  <option>Another Option</option>
                  <option>And Another</option>
                  <option>Fourth Option That Is a Lot Longer And Will Be Too Long At Small Resolutions</option>
                  <option data-divider="true"></option>
                  <option data-subtext="supplemental data">Fifth Option</option>
                  <option disabled>Disabled Option</option>
                  <option data-subtext="end">Final Option</option>
                </optgroup>
              </select>
            </li>
            <li>
              <a href="#">First Link</a>
            </li>
            <li class="active">
              <a href="#">Another Link</a>
            </li>
            <li>
              <a href="#">And Another</a>
            </li>
            <li>
              <a href="#">As a General Rule</a>
            </li>
            <li>
              <a href="#">Five to Seven Links</a>
            </li>
            <li>
              <a href="#">Is Good</a>
            </li>
          </ul>
        </div>
      </nav>
      <hr>
      <h2>Multi-level Menu</h2>
      <nav class="navbar navbar-default navbar-pf" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-5">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
            <img src="../../dist/img/brand.svg" alt="{{ site.title-product }}" />
          </a>
        </div>
        <div class="collapse navbar-collapse navbar-collapse-5">
          <ul class="nav navbar-nav navbar-utility">
            <li class="dropdown">
              <a class="nav-item-iconic" id="dropdownMenu7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span title="Help" class="fa pficon-help"></span>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu7">
                <li><a href="#">Help</a></li>
                <li><a href="#">About</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="pficon pficon-user"></span>
                Brian Johnson
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-primary">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Dropdown
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">Separated link</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Dropdown with Submenu
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">Separated link</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Dropdown with Dropup Submenu
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu dropup">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">Separated link</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Dropdown with Pull-left Submenu
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">Separated link</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
                <li class="dropdown-submenu pull-left">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">No Dropdown</a>
            </li>
          </ul>
        </div>
      </nav>
      <hr>
      {% include widgets/navigation/horizontal-multi-level.html %}
      <hr>
      <nav class="navbar navbar-default navbar-pf" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-5">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
            <img src="../../dist/img/brand.svg" alt="{{ site.title-product }}" />
          </a>
        </div>
        <div class="collapse navbar-collapse navbar-collapse-5">
          <ul class="nav navbar-nav navbar-utility">
            <li class="dropdown">
              <a class="nav-item-iconic" id="dropdownMenu8" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span title="Help" class="fa pficon-help"></span>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu8">
                <li><a href="#">Help</a></li>
                <li><a href="#">About</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="pficon pficon-user"></span>
                Brian Johnson
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-primary">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Dropdown
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">Separated link</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
            <li class="dropdown active">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Dropdown with Submenu
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">Separated link</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
                <li class="dropdown-submenu active">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li class="active">
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Dropdown with Dropup Submenu
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu dropup">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">Separated link</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Dropdown with Pull-left Submenu
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">Separated link</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
                <li class="dropdown-submenu pull-left">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">No Dropdown</a>
            </li>
          </ul>
        </div>
      </nav>
      <hr>
      <h2>
        Multi-level Menu and Context Selector
      </h2>
      <nav class="navbar navbar-default navbar-pf" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-8">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
            <img src="../../dist/img/brand.svg" alt="{{ site.title-product }}" />
          </a>
        </div>
        <div class="collapse navbar-collapse navbar-collapse-8">
          <ul class="nav navbar-nav navbar-utility">
            <li class="dropdown">
              <a class="nav-item-iconic" id="dropdownMenu9" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span title="Help" class="fa pficon-help"></span>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu9">
                <li><a href="#">Help</a></li>
                <li><a href="#">About</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="pficon pficon-user"></span>
                Brian Johnson
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-primary">
            <li class="context context-bootstrap-select">
              <select class="selectpicker" data-live-search="true">
                <optgroup label="Context Label">
                  <option>First Option</option>
                  <option>Another Option</option>
                  <option>And Another</option>
                  <option>Fourth Option That Is a Lot Longer And Will Be Too Long At Small Resolutions</option>
                  <option data-divider="true"></option>
                  <option data-subtext="supplemental data">Fifth Option</option>
                  <option disabled>Disabled Option</option>
                  <option data-subtext="end">Final Option</option>
                </optgroup>
              </select>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Dropdown
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">Separated link</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Dropdown with Submenu
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">Separated link</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Dropdown with Dropup Submenu
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu dropup">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">Separated link</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Dropdown with Pull-left Submenu
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">Separated link</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
                <li class="dropdown-submenu pull-left">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">No Dropdown</a>
            </li>
          </ul>
        </div>
      </nav>
      <hr>
      <nav class="navbar navbar-default navbar-pf" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-8">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
            <img src="../../dist/img/brand.svg" alt="{{ site.title-product }}" />
          </a>
        </div>
        <div class="collapse navbar-collapse navbar-collapse-8">
          <ul class="nav navbar-nav navbar-utility">
            <li class="dropdown">
              <a class="nav-item-iconic" id="dropdownMenu10" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span title="Help" class="fa pficon-help"></span>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu10">
                <li><a href="#">Help</a></li>
                <li><a href="#">About</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="pficon pficon-user"></span>
                Brian Johnson
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-primary">
            <li class="context context-bootstrap-select">
              <select class="selectpicker" data-live-search="true">
                <optgroup label="Context Label">
                  <option>First Option</option>
                  <option>Another Option</option>
                  <option>And Another</option>
                  <option>Fourth Option That Is a Lot Longer And Will Be Too Long At Small Resolutions</option>
                  <option data-divider="true"></option>
                  <option data-subtext="supplemental data">Fifth Option</option>
                  <option disabled>Disabled Option</option>
                  <option data-subtext="end">Final Option</option>
                </optgroup>
              </select>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Dropdown
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">Separated link</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
            <li class="dropdown active">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Dropdown with Submenu
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">Separated link</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Dropdown with Dropup Submenu
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu dropup">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">Separated link</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Dropdown with Pull-left Submenu
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">Separated link</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
                <li class="dropdown-submenu pull-left">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">No Dropdown</a>
            </li>
          </ul>
        </div>
      </nav>
      <hr>
      <nav class="navbar navbar-default navbar-pf" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-8">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
            <img src="../../dist/img/brand.svg" alt="{{ site.title-product }}" />
          </a>
        </div>
        <div class="collapse navbar-collapse navbar-collapse-8">
          <ul class="nav navbar-nav navbar-utility">
            <li class="dropdown">
              <a class="nav-item-iconic" id="dropdownMenu11" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span title="Help" class="fa pficon-help"></span>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu11">
                <li><a href="#">Help</a></li>
                <li><a href="#">About</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="pficon pficon-user"></span>
                Brian Johnson
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-primary">
            <li class="context context-bootstrap-select">
              <select class="selectpicker" data-live-search="true">
                <optgroup label="Context Label">
                  <option>First Option</option>
                  <option>Another Option</option>
                  <option>And Another</option>
                  <option>Fourth Option That Is a Lot Longer And Will Be Too Long At Small Resolutions</option>
                  <option data-divider="true"></option>
                  <option data-subtext="supplemental data">Fifth Option</option>
                  <option disabled>Disabled Option</option>
                  <option data-subtext="end">Final Option</option>
                </optgroup>
              </select>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Dropdown
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">Separated link</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
            <li class="dropdown active">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Dropdown with Submenu
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">Separated link</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
                <li class="dropdown-submenu active">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li class="active">
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Dropdown with Dropup Submenu
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu dropup">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">Separated link</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Dropdown with Pull-left Submenu
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">Separated link</a>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
                <li class="dropdown-submenu pull-left">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">No Dropdown</a>
            </li>
          </ul>
        </div>
      </nav>
      <hr>
      <h2>
        Persistent Secondary and Tertiary Menu
      </h2>
      <nav class="navbar navbar-default navbar-pf" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-11">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
            <img src="../../dist/img/brand.svg" alt="{{ site.title-product }}" />
          </a>
        </div>
        <div class="collapse navbar-collapse navbar-collapse-11">
          <ul class="nav navbar-nav navbar-utility">
            <li class="dropdown">
              <a class="nav-item-iconic" id="dropdownMenu12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span title="Help" class="fa pficon-help"></span>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu12">
                <li><a href="#">Help</a></li>
                <li><a href="#">About</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="pficon pficon-user"></span>
                Brian Johnson
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-primary persistent-secondary">
            <li>
              <a href="#">First Link</a>
            </li>
            <li>
              <a href="#">Another Link</a>
              <ul class="nav navbar-nav navbar-persistent">
                <li class="dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Another Link</a>
                </li>
                <li class="dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Something Else Here</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Remembering to Keep</a>
                </li>
                <li>
                  <a href="#">It Between Five and Seven</a>
                </li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#" class="dropdown-toggle" data-toggle="dropdown">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">And Another</a>
            </li>
            <li>
              <a href="#">As a General Rule</a>
            </li>
            <li>
              <a href="#">Five to Seven Links</a>
            </li>
            <li>
              <a href="#">Is Good</a>
            </li>
          </ul>
        </div>
      </nav>
      <hr>
      <nav class="navbar navbar-default navbar-pf" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse-11">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
            <img src="../../dist/img/brand.svg" alt="{{ site.title-product }}" />
          </a>
        </div>
        <div class="collapse navbar-collapse navbar-collapse-11">
          <ul class="nav navbar-nav navbar-utility">
            <li class="dropdown">
              <a class="nav-item-iconic" id="dropdownMenu13" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span title="Help" class="fa pficon-help"></span>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu13">
                <li><a href="#">Help</a></li>
                <li><a href="#">About</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="pficon pficon-user"></span>
                Brian Johnson
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-primary persistent-secondary">
            <li>
              <a href="#">First Link</a>
            </li>
            <li class="active">
              <a href="#">Another Link</a>
              <ul class="nav navbar-nav navbar-persistent">
                <li class="dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Another Link</a>
                </li>
                <li class="dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Something Else Here</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Remembering to Keep</a>
                </li>
                <li>
                  <a href="#">It Between Five and Seven</a>
                </li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#" class="dropdown-toggle" data-toggle="dropdown">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">And Another</a>
            </li>
            <li>
              <a href="#">As a General Rule</a>
            </li>
            <li>
              <a href="#">Five to Seven Links</a>
            </li>
            <li>
              <a href="#">Is Good</a>
            </li>
          </ul>
        </div>
      </nav>
      <hr>
      {% include widgets/navigation/horizontal-persistent-secondary-tertiary.html %}
      <hr>
      <nav class="navbar navbar-default navbar-pf" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-11">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
            <img src="../../dist/img/brand.svg" alt="{{ site.title-product }}" />
          </a>
        </div>
        <div class="collapse navbar-collapse navbar-collapse-11">
          <ul class="nav navbar-nav navbar-utility">
            <li class="dropdown">
              <a class="nav-item-iconic" id="dropdownMenu14" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span title="Help" class="fa pficon-help"></span>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu14">
                <li><a href="#">Help</a></li>
                <li><a href="#">About</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="pficon pficon-user"></span>
                Brian Johnson
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-primary persistent-secondary">
            <li>
              <a href="#">First Link</a>
            </li>
            <li class="active">
              <a href="#">Another Link</a>
              <ul class="nav navbar-nav navbar-persistent">
                <li class="dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Another Link</a>
                </li>
                <li class="dropdown-submenu active">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Something Else Here</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Remembering to Keep</a>
                </li>
                <li>
                  <a href="#">It Between Five and Seven</a>
                </li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#" class="dropdown-toggle" data-toggle="dropdown">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">And Another</a>
            </li>
            <li>
              <a href="#">As a General Rule</a>
            </li>
            <li>
              <a href="#">Five to Seven Links</a>
            </li>
            <li>
              <a href="#">Is Good</a>
            </li>
          </ul>
        </div>
      </nav>
      <hr>
      <nav class="navbar navbar-default navbar-pf" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-11">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
            <img src="../../dist/img/brand.svg" alt="{{ site.title-product }}" />
          </a>
        </div>
        <div class="collapse navbar-collapse navbar-collapse-11">
          <ul class="nav navbar-nav navbar-utility">
            <li class="dropdown">
              <a class="nav-item-iconic" id="dropdownMenu15" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span title="Help" class="fa pficon-help"></span>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu15">
                <li><a href="#">Help</a></li>
                <li><a href="#">About</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="pficon pficon-user"></span>
                Brian Johnson
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-primary persistent-secondary">
            <li>
              <a href="#">First Link</a>
            </li>
            <li class="active">
              <a href="#">Another Link</a>
              <ul class="nav navbar-nav navbar-persistent">
                <li class="dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Another Link</a>
                </li>
                <li class="dropdown-submenu active">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Something Else Here</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li class="active">
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Remembering to Keep</a>
                </li>
                <li>
                  <a href="#">It Between Five and Seven</a>
                </li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#" class="dropdown-toggle" data-toggle="dropdown">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">And Another</a>
            </li>
            <li>
              <a href="#">As a General Rule</a>
            </li>
            <li>
              <a href="#">Five to Seven Links</a>
            </li>
            <li>
              <a href="#">Is Good</a>
            </li>
          </ul>
        </div>
      </nav>
      <hr>
      <h2>
        Persistent Secondary and Tertiary Menu and Context Selector
      </h2>
      <nav class="navbar navbar-default navbar-pf" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-16">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
            <img src="../../dist/img/brand.svg" alt="{{ site.title-product }}" />
          </a>
        </div>
        <div class="collapse navbar-collapse navbar-collapse-16">
          <ul class="nav navbar-nav navbar-utility">
            <li class="dropdown">
              <a class="nav-item-iconic" id="dropdownMenu16" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span title="Help" class="fa pficon-help"></span>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu16">
                <li><a href="#">Help</a></li>
                <li><a href="#">About</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="pficon pficon-user"></span>
                Brian Johnson
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-primary persistent-secondary">
            <li class="context context-bootstrap-select">
              <select class="selectpicker" data-live-search="true">
                <optgroup label="Context Label">
                  <option>First Option</option>
                  <option>Another Option</option>
                  <option>And Another</option>
                  <option>Fourth Option That Is a Lot Longer And Will Be Too Long At Small Resolutions</option>
                  <option data-divider="true"></option>
                  <option data-subtext="supplemental data">Fifth Option</option>
                  <option disabled>Disabled Option</option>
                  <option data-subtext="end">Final Option</option>
                </optgroup>
              </select>
            </li>
            <li>
              <a href="#">First Link</a>
            </li>
            <li>
              <a href="#">Another Link</a>
              <ul class="nav navbar-nav navbar-persistent">
                <li class="dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Another Link</a>
                </li>
                <li class="dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Something Else Here</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Remembering to Keep</a>
                </li>
                <li>
                  <a href="#">It Between Five and Seven</a>
                </li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#" class="dropdown-toggle" data-toggle="dropdown">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">And Another</a>
            </li>
            <li>
              <a href="#">As a General Rule</a>
            </li>
            <li>
              <a href="#">Five to Seven Links</a>
            </li>
            <li>
              <a href="#">Is Good</a>
            </li>
          </ul>
        </div>
      </nav>
      <hr>
      <nav class="navbar navbar-default navbar-pf" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-16">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
            <img src="../../dist/img/brand.svg" alt="{{ site.title-product }}" />
          </a>
        </div>
        <div class="collapse navbar-collapse navbar-collapse-16">
          <ul class="nav navbar-nav navbar-utility">
            <li class="dropdown">
              <a class="nav-item-iconic" id="dropdownMenu17" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span title="Help" class="fa pficon-help"></span>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu17">
                <li><a href="#">Help</a></li>
                <li><a href="#">About</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="pficon pficon-user"></span>
                Brian Johnson
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-primary persistent-secondary">
            <li class="context context-bootstrap-select">
              <select class="selectpicker" data-live-search="true">
                <optgroup label="Context Label">
                  <option>First Option</option>
                  <option>Another Option</option>
                  <option>And Another</option>
                  <option>Fourth Option That Is a Lot Longer And Will Be Too Long At Small Resolutions</option>
                  <option data-divider="true"></option>
                  <option data-subtext="supplemental data">Fifth Option</option>
                  <option disabled>Disabled Option</option>
                  <option data-subtext="end">Final Option</option>
                </optgroup>
              </select>
            </li>
            <li>
              <a href="#">First Link</a>
            </li>
            <li class="active">
              <a href="#">Another Link</a>
              <ul class="nav navbar-nav navbar-persistent">
                <li class="dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Another Link</a>
                </li>
                <li class="dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Something Else Here</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Remembering to Keep</a>
                </li>
                <li>
                  <a href="#">It Between Five and Seven</a>
                </li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#" class="dropdown-toggle" data-toggle="dropdown">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">And Another</a>
            </li>
            <li>
              <a href="#">As a General Rule</a>
            </li>
            <li>
              <a href="#">Five to Seven Links</a>
            </li>
            <li>
              <a href="#">Is Good</a>
            </li>
          </ul>
        </div>
      </nav>
      <hr>
      <nav class="navbar navbar-default navbar-pf" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-16">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
            <img src="../../dist/img/brand.svg" alt="{{ site.title-product }}" />
          </a>
        </div>
        <div class="collapse navbar-collapse navbar-collapse-16">
          <ul class="nav navbar-nav navbar-utility">
            <li class="dropdown">
              <a class="nav-item-iconic" id="dropdownMenu18" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span title="Help" class="fa pficon-help"></span>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu18">
                <li><a href="#">Help</a></li>
                <li><a href="#">About</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="pficon pficon-user"></span>
                Brian Johnson
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-primary persistent-secondary">
            <li class="context context-bootstrap-select">
              <select class="selectpicker" data-live-search="true">
                <optgroup label="Context Label">
                  <option>First Option</option>
                  <option>Another Option</option>
                  <option>And Another</option>
                  <option>Fourth Option That Is a Lot Longer And Will Be Too Long At Small Resolutions</option>
                  <option data-divider="true"></option>
                  <option data-subtext="supplemental data">Fifth Option</option>
                  <option disabled>Disabled Option</option>
                  <option data-subtext="end">Final Option</option>
                </optgroup>
              </select>
            </li>
            <li>
              <a href="#">First Link</a>
            </li>
            <li class="active">
              <a href="#">Another Link</a>
              <ul class="nav navbar-nav navbar-persistent">
                <li class="dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
                <li class="active">
                  <a href="#">Another Link</a>
                </li>
                <li class="dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Something Else Here</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Remembering to Keep</a>
                </li>
                <li>
                  <a href="#">It Between Five and Seven</a>
                </li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#" class="dropdown-toggle" data-toggle="dropdown">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">And Another</a>
            </li>
            <li>
              <a href="#">As a General Rule</a>
            </li>
            <li>
              <a href="#">Five to Seven Links</a>
            </li>
            <li>
              <a href="#">Is Good</a>
            </li>
          </ul>
        </div>
      </nav>
      <hr>
      <nav class="navbar navbar-default navbar-pf" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-16">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
            <img src="../../dist/img/brand.svg" alt="{{ site.title-product }}" />
          </a>
        </div>
        <div class="collapse navbar-collapse navbar-collapse-16">
          <ul class="nav navbar-nav navbar-utility">
            <li class="dropdown">
              <a class="nav-item-iconic" id="dropdownMenu19" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span title="Help" class="fa pficon-help"></span>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu19">
                <li><a href="#">Help</a></li>
                <li><a href="#">About</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="pficon pficon-user"></span>
                Brian Johnson
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-primary persistent-secondary">
            <li class="context context-bootstrap-select">
              <select class="selectpicker" data-live-search="true">
                <optgroup label="Context Label">
                  <option>First Option</option>
                  <option>Another Option</option>
                  <option>And Another</option>
                  <option>Fourth Option That Is a Lot Longer And Will Be Too Long At Small Resolutions</option>
                  <option data-divider="true"></option>
                  <option data-subtext="supplemental data">Fifth Option</option>
                  <option disabled>Disabled Option</option>
                  <option data-subtext="end">Final Option</option>
                </optgroup>
              </select>
            </li>
            <li>
              <a href="#">First Link</a>
            </li>
            <li class="active">
              <a href="#">Another Link</a>
              <ul class="nav navbar-nav navbar-persistent">
                <li class="dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Another Link</a>
                </li>
                <li class="dropdown-submenu active">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Something Else Here</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Remembering to Keep</a>
                </li>
                <li>
                  <a href="#">It Between Five and Seven</a>
                </li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#" class="dropdown-toggle" data-toggle="dropdown">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">And Another</a>
            </li>
            <li>
              <a href="#">As a General Rule</a>
            </li>
            <li>
              <a href="#">Five to Seven Links</a>
            </li>
            <li>
              <a href="#">Is Good</a>
            </li>
          </ul>
        </div>
      </nav>
      <hr>
      <nav class="navbar navbar-default navbar-pf" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-16">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
            <img src="../../dist/img/brand.svg" alt="{{ site.title-product }}" />
          </a>
        </div>
        <div class="collapse navbar-collapse navbar-collapse-16">
          <ul class="nav navbar-nav navbar-utility">
            <li class="dropdown">
              <a class="nav-item-iconic" id="dropdownMenu20" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span title="Help" class="fa pficon-help"></span>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu20">
                <li><a href="#">Help</a></li>
                <li><a href="#">About</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="pficon pficon-user"></span>
                Brian Johnson
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-primary persistent-secondary">
            <li class="context context-bootstrap-select">
              <select class="selectpicker" data-live-search="true">
                <optgroup label="Context Label">
                  <option>First Option</option>
                  <option>Another Option</option>
                  <option>And Another</option>
                  <option>Fourth Option That Is a Lot Longer And Will Be Too Long At Small Resolutions</option>
                  <option data-divider="true"></option>
                  <option data-subtext="supplemental data">Fifth Option</option>
                  <option disabled>Disabled Option</option>
                  <option data-subtext="end">Final Option</option>
                </optgroup>
              </select>
            </li>
            <li>
              <a href="#">First Link</a>
            </li>
            <li class="active">
              <a href="#">Another Link</a>
              <ul class="nav navbar-nav navbar-persistent">
                <li class="dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Another Link</a>
                </li>
                <li class="dropdown-submenu active">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Something Else Here</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li class="active">
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Remembering to Keep</a>
                </li>
                <li>
                  <a href="#">It Between Five and Seven</a>
                </li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#" class="dropdown-toggle" data-toggle="dropdown">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">And Another</a>
            </li>
            <li>
              <a href="#">As a General Rule</a>
            </li>
            <li>
              <a href="#">Five to Seven Links</a>
            </li>
            <li>
              <a href="#">Is Good</a>
            </li>
          </ul>
        </div>
      </nav>
      <hr>
      <h2>
        Persistent Secondary and Tertiary with Submenu Menu and Context Selector
      </h2>
      <nav class="navbar navbar-default navbar-pf" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-21">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
            <img src="../../dist/img/brand.svg" alt="{{ site.title-product }}" />
          </a>
        </div>
        <div class="collapse navbar-collapse navbar-collapse-21">
          <ul class="nav navbar-nav navbar-utility">
            <li class="dropdown">
              <a class="nav-item-iconic" id="dropdownMenu21" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span title="Help" class="fa pficon-help"></span>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu21">
                <li><a href="#">Help</a></li>
                <li><a href="#">About</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="pficon pficon-user"></span>
                Brian Johnson
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-primary persistent-secondary">
            <li class="context context-bootstrap-select">
              <select class="selectpicker" data-live-search="true">
                <optgroup label="Context Label">
                  <option>First Option</option>
                  <option>Another Option</option>
                  <option>And Another</option>
                  <option>Fourth Option That Is a Lot Longer And Will Be Too Long At Small Resolutions</option>
                  <option data-divider="true"></option>
                  <option data-subtext="supplemental data">Fifth Option</option>
                  <option disabled>Disabled Option</option>
                  <option data-subtext="end">Final Option</option>
                </optgroup>
              </select>
            </li>
            <li>
              <a href="#">First Link</a>
            </li>
            <li>
              <a href="#">Another Link</a>
              <ul class="nav navbar-nav navbar-persistent">
                <li class="dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Another Link</a>
                </li>
                <li class="dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Something Else Here</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Remembering to Keep</a>
                </li>
                <li>
                  <a href="#">It Between Five and Seven</a>
                </li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#" class="dropdown-toggle" data-toggle="dropdown">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">And Another</a>
            </li>
            <li>
              <a href="#">As a General Rule</a>
            </li>
            <li>
              <a href="#">Five to Seven Links</a>
            </li>
            <li>
              <a href="#">Is Good</a>
            </li>
          </ul>
        </div>
      </nav>
      <hr>
      <nav class="navbar navbar-default navbar-pf" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-21">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
            <img src="../../dist/img/brand.svg" alt="{{ site.title-product }}" />
          </a>
        </div>
        <div class="collapse navbar-collapse navbar-collapse-21">
          <ul class="nav navbar-nav navbar-utility">
            <li class="dropdown">
              <a class="nav-item-iconic" id="dropdownMenu22" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span title="Help" class="fa pficon-help"></span>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu22">
                <li><a href="#">Help</a></li>
                <li><a href="#">About</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="pficon pficon-user"></span>
                Brian Johnson
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-primary persistent-secondary">
            <li class="context context-bootstrap-select">
              <select class="selectpicker" data-live-search="true">
                <optgroup label="Context Label">
                  <option>First Option</option>
                  <option>Another Option</option>
                  <option>And Another</option>
                  <option>Fourth Option That Is a Lot Longer And Will Be Too Long At Small Resolutions</option>
                  <option data-divider="true"></option>
                  <option data-subtext="supplemental data">Fifth Option</option>
                  <option disabled>Disabled Option</option>
                  <option data-subtext="end">Final Option</option>
                </optgroup>
              </select>
            </li>
            <li>
              <a href="#">First Link</a>
            </li>
            <li class="active">
              <a href="#">Another Link</a>
              <ul class="nav navbar-nav navbar-persistent">
                <li class="dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                    <li class="dropdown-submenu">
                      <a tabindex="-1" href="#">More options</a>
                      <ul class="dropdown-menu">
                        <li>
                          <a href="#">Link</a>
                        </li>
                        <li>
                          <a href="#">Another link</a>
                        </li>
                        <li>
                          <a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                          <a href="#">Separated link</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                          <a href="#">One more separated link</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Another Link</a>
                </li>
                <li class="dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Something Else Here</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                    <li class="dropdown-submenu dropup">
                      <a tabindex="-1" href="#">More options</a>
                      <ul class="dropdown-menu">
                        <li>
                          <a href="#">Link</a>
                        </li>
                        <li>
                          <a href="#">Another link</a>
                        </li>
                        <li>
                          <a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                          <a href="#">Separated link</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                          <a href="#">One more separated link</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Remembering to Keep</a>
                </li>
                <li>
                  <a href="#">It Between Five and Seven</a>
                </li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#" class="dropdown-toggle" data-toggle="dropdown">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                    <li class="dropdown-submenu pull-left">
                      <a tabindex="-1" href="#">More options</a>
                      <ul class="dropdown-menu">
                        <li>
                          <a href="#">Link</a>
                        </li>
                        <li>
                          <a href="#">Another link</a>
                        </li>
                        <li>
                          <a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                          <a href="#">Separated link</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                          <a href="#">One more separated link</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">And Another</a>
            </li>
            <li>
              <a href="#">As a General Rule</a>
            </li>
            <li>
              <a href="#">Five to Seven Links</a>
            </li>
            <li>
              <a href="#">Is Good</a>
            </li>
          </ul>
        </div>
      </nav>
      <hr>
      <nav class="navbar navbar-default navbar-pf" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-21">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
            <img src="../../dist/img/brand.svg" alt="{{ site.title-product }}" />
          </a>
        </div>
        <div class="collapse navbar-collapse navbar-collapse-21">
          <ul class="nav navbar-nav navbar-utility">
            <li class="dropdown">
              <a class="nav-item-iconic" id="dropdownMenu23" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span title="Help" class="fa pficon-help"></span>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu23">
                <li><a href="#">Help</a></li>
                <li><a href="#">About</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="pficon pficon-user"></span>
                Brian Johnson
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-primary persistent-secondary">
            <li class="context context-bootstrap-select">
              <select class="selectpicker" data-live-search="true">
                <optgroup label="Context Label">
                  <option>First Option</option>
                  <option>Another Option</option>
                  <option>And Another</option>
                  <option>Fourth Option That Is a Lot Longer And Will Be Too Long At Small Resolutions</option>
                  <option data-divider="true"></option>
                  <option data-subtext="supplemental data">Fifth Option</option>
                  <option disabled>Disabled Option</option>
                  <option data-subtext="end">Final Option</option>
                </optgroup>
              </select>
            </li>
            <li>
              <a href="#">First Link</a>
            </li>
            <li class="active">
              <a href="#">Another Link</a>
              <ul class="nav navbar-nav navbar-persistent">
                <li class="dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                    <li class="dropdown-submenu">
                      <a tabindex="-1" href="#">More options</a>
                      <ul class="dropdown-menu">
                        <li>
                          <a href="#">Link</a>
                        </li>
                        <li>
                          <a href="#">Another link</a>
                        </li>
                        <li>
                          <a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                          <a href="#">Separated link</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                          <a href="#">One more separated link</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li class="active">
                  <a href="#">Another Link</a>
                </li>
                <li class="dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Something Else Here</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                    <li class="dropdown-submenu dropup">
                      <a tabindex="-1" href="#">More options</a>
                      <ul class="dropdown-menu">
                        <li>
                          <a href="#">Link</a>
                        </li>
                        <li>
                          <a href="#">Another link</a>
                        </li>
                        <li>
                          <a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                          <a href="#">Separated link</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                          <a href="#">One more separated link</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Remembering to Keep</a>
                </li>
                <li>
                  <a href="#">It Between Five and Seven</a>
                </li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#" class="dropdown-toggle" data-toggle="dropdown">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                    <li class="dropdown-submenu pull-left">
                      <a tabindex="-1" href="#">More options</a>
                      <ul class="dropdown-menu">
                        <li>
                          <a href="#">Link</a>
                        </li>
                        <li>
                          <a href="#">Another link</a>
                        </li>
                        <li>
                          <a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                          <a href="#">Separated link</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                          <a href="#">One more separated link</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">And Another</a>
            </li>
            <li>
              <a href="#">As a General Rule</a>
            </li>
            <li>
              <a href="#">Five to Seven Links</a>
            </li>
            <li>
              <a href="#">Is Good</a>
            </li>
          </ul>
        </div>
      </nav>
      <hr>
      <nav class="navbar navbar-default navbar-pf" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-21">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
            <img src="../../dist/img/brand.svg" alt="{{ site.title-product }}" />
          </a>
        </div>
        <div class="collapse navbar-collapse navbar-collapse-21">
          <ul class="nav navbar-nav navbar-utility">
            <li class="dropdown">
              <a class="nav-item-iconic" id="dropdownMenu24" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span title="Help" class="fa pficon-help"></span>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" aria-labelledby="dropdownMen24">
                <li><a href="#">Help</a></li>
                <li><a href="#">About</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="pficon pficon-user"></span>
                Brian Johnson
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-primary persistent-secondary">
            <li class="context context-bootstrap-select">
              <select class="selectpicker" data-live-search="true">
                <optgroup label="Context Label">
                  <option>First Option</option>
                  <option>Another Option</option>
                  <option>And Another</option>
                  <option>Fourth Option That Is a Lot Longer And Will Be Too Long At Small Resolutions</option>
                  <option data-divider="true"></option>
                  <option data-subtext="supplemental data">Fifth Option</option>
                  <option disabled>Disabled Option</option>
                  <option data-subtext="end">Final Option</option>
                </optgroup>
              </select>
            </li>
            <li>
              <a href="#">First Link</a>
            </li>
            <li class="active">
              <a href="#">Another Link</a>
              <ul class="nav navbar-nav navbar-persistent">
                <li class="dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                    <li class="dropdown-submenu">
                      <a tabindex="-1" href="#">More options</a>
                      <ul class="dropdown-menu">
                        <li>
                          <a href="#">Link</a>
                        </li>
                        <li>
                          <a href="#">Another link</a>
                        </li>
                        <li>
                          <a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                          <a href="#">Separated link</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                          <a href="#">One more separated link</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Another Link</a>
                </li>
                <li class="dropdown-submenu active">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Something Else Here</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                    <li class="dropdown-submenu dropup">
                      <a tabindex="-1" href="#">More options</a>
                      <ul class="dropdown-menu">
                        <li>
                          <a href="#">Link</a>
                        </li>
                        <li>
                          <a href="#">Another link</a>
                        </li>
                        <li>
                          <a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                          <a href="#">Separated link</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                          <a href="#">One more separated link</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Remembering to Keep</a>
                </li>
                <li>
                  <a href="#">It Between Five and Seven</a>
                </li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#" class="dropdown-toggle" data-toggle="dropdown">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                    <li class="dropdown-submenu pull-left">
                      <a tabindex="-1" href="#">More options</a>
                      <ul class="dropdown-menu">
                        <li>
                          <a href="#">Link</a>
                        </li>
                        <li>
                          <a href="#">Another link</a>
                        </li>
                        <li>
                          <a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                          <a href="#">Separated link</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                          <a href="#">One more separated link</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">And Another</a>
            </li>
            <li>
              <a href="#">As a General Rule</a>
            </li>
            <li>
              <a href="#">Five to Seven Links</a>
            </li>
            <li>
              <a href="#">Is Good</a>
            </li>
          </ul>
        </div>
      </nav>
      <hr>
      <nav class="navbar navbar-default navbar-pf" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-21">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
            <img src="../../dist/img/brand.svg" alt="{{ site.title-product }}" />
          </a>
        </div>
        <div class="collapse navbar-collapse navbar-collapse-21">
          <ul class="nav navbar-nav navbar-utility">
            <li class="dropdown">
              <a class="nav-item-iconic" id="dropdownMenu25" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                <span title="Help" class="fa pficon-help"></span>
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu25">
                <li><a href="#">Help</a></li>
                <li><a href="#">About</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                <span class="pficon pficon-user"></span>
                Brian Johnson
                <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#">Link</a>
                </li>
                <li>
                  <a href="#">Another link</a>
                </li>
                <li>
                  <a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li>
                      <a href="#">Separated link</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                      <a href="#">One more separated link</a>
                    </li>
                  </ul>
                </li>
                <li class="divider"></li>
                <li>
                  <a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-primary persistent-secondary">
            <li class="context context-bootstrap-select">
              <select class="selectpicker" data-live-search="true">
                <optgroup label="Context Label">
                  <option>First Option</option>
                  <option>Another Option</option>
                  <option>And Another</option>
                  <option>Fourth Option That Is a Lot Longer And Will Be Too Long At Small Resolutions</option>
                  <option data-divider="true"></option>
                  <option data-subtext="supplemental data">Fifth Option</option>
                  <option disabled>Disabled Option</option>
                  <option data-subtext="end">Final Option</option>
                </optgroup>
              </select>
            </li>
            <li>
              <a href="#">First Link</a>
            </li>
            <li class="active">
              <a href="#">Another Link</a>
              <ul class="nav navbar-nav navbar-persistent">
                <li class="dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                    <li class="dropdown-submenu">
                      <a tabindex="-1" href="#">More options</a>
                      <ul class="dropdown-menu">
                        <li>
                          <a href="#">Link</a>
                        </li>
                        <li>
                          <a href="#">Another link</a>
                        </li>
                        <li>
                          <a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                          <a href="#">Separated link</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                          <a href="#">One more separated link</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Another Link</a>
                </li>
                <li class="dropdown-submenu active">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Something Else Here</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                    <li class="dropdown-submenu dropup active">
                      <a tabindex="-1" href="#">More options</a>
                      <ul class="dropdown-menu">
                        <li class="active">
                          <a href="#">Link</a>
                        </li>
                        <li>
                          <a href="#">Another link</a>
                        </li>
                        <li>
                          <a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                          <a href="#">Separated link</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                          <a href="#">One more separated link</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Remembering to Keep</a>
                </li>
                <li>
                  <a href="#">It Between Five and Seven</a>
                </li>
                <li class="dropdown-submenu">
                  <a tabindex="-1" href="#" class="dropdown-toggle" data-toggle="dropdown">More options</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link</a>
                    </li>
                    <li>
                      <a href="#">Another link</a>
                    </li>
                    <li>
                      <a href="#">Something else here</a>
                    </li>
                    <li>
                      <a href="#">Remembering to keep</a>
                    </li>
                    <li>
                      <a href="#">It between five and seven</a>
                    </li>
                    <li class="dropdown-submenu pull-left">
                      <a tabindex="-1" href="#">More options</a>
                      <ul class="dropdown-menu">
                        <li>
                          <a href="#">Link</a>
                        </li>
                        <li>
                          <a href="#">Another link</a>
                        </li>
                        <li>
                          <a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                          <a href="#">Separated link</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                          <a href="#">One more separated link</a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">And Another</a>
            </li>
            <li>
              <a href="#">As a General Rule</a>
            </li>
            <li>
              <a href="#">Five to Seven Links</a>
            </li>
            <li>
              <a href="#">Is Good</a>
            </li>
          </ul>
        </div>
      </nav>