patternfly
Version:
This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.
1,390 lines (1,389 loc) • 172 kB
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: '!URL_COMPONENTS!bootstrap-select/dist/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>
<a href="#">Status</a>
</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="../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>
<a href="#">Status</a>
</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>
<a href="#">Status</a>
</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>
<a href="#">Status</a>
</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>
<a href="#">Status</a>
</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>
<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>
<a href="#">Status</a>
</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">
<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-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>
<a href="#">Status</a>
</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>
<a href="#">Status</a>
</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>
<a href="#">Status</a>
</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">