<div class="bs-docs-section"> <h1 id="nav" class="page-header">Navs</h1> <p class="lead">Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p> <h2 id="nav-tabs">Tabs</h2> <p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p> <div class="bs-example"> <ul class="nav nav-tabs" role="tablist"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> </div> {% highlight html %} <ul class="nav nav-tabs" role="tablist"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> {% endhighlight %} <div class="bs-callout bs-callout-info"> <h4>Requires JavaScript tabs plugin</h4> <p>For tabs with tabbable areas, you must use the <a href="../javascript/#tabs">tabs JavaScript plugin</a>.</p> </div> <h2 id="nav-pills">Pills</h2> <p>Take that same HTML, but use <code>.nav-pills</code> instead:</p> <div class="bs-example"> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> </div> {% highlight html %} <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> {% endhighlight %} <p>Pills are also vertically stackable. Just add <code>.nav-stacked</code>.</p> <div class="bs-example"> <ul class="nav nav-pills nav-stacked" style="max-width: 300px;"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> </div> {% highlight html %} <ul class="nav nav-pills nav-stacked"> ... </ul> {% endhighlight %} <h2 id="nav-justified">Justified</h2> <p>Easily make tabs or pills equal widths of their parent at screens wider than 768px with <code>.nav-justified</code>. On smaller screens, the nav links are stacked.</p> <div class="bs-callout bs-callout-warning"> <h4>Safari and responsive justified navs</h4> <p>As of v7.0.1, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing. This bug is also shown in the <a href="../examples/justified-nav/">justified nav example</a>.</p> </div> <div class="bs-example"> <ul class="nav nav-tabs nav-justified" role="tablist"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> <br> <ul class="nav nav-pills nav-justified"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> </div> {% highlight html %} <ul class="nav nav-tabs nav-justified" role="tablist"> ... </ul> <ul class="nav nav-pills nav-justified"> ... </ul> {% endhighlight %} <h2 id="nav-disabled-links">Disabled links</h2> <p>For any nav component (tabs or pills), add <code>.disabled</code> for <strong>gray links and no hover effects</strong>.</p> <div class="bs-callout bs-callout-warning"> <h4>Link functionality not impacted</h4> <p>This class will only change the <code><a></code>'s appearance, not its functionality. Use custom JavaScript to disable links here.</p> </div> <div class="bs-example"> <ul class="nav nav-pills"> <li><a href="#">Clickable link</a></li> <li><a href="#">Clickable link</a></li> <li class="disabled"><a href="#">Disabled link</a></li> </ul> </div> {% highlight html %} <ul class="nav nav-pills"> ... <li class="disabled"><a href="#">Disabled link</a></li> ... </ul> {% endhighlight %} <h2 id="nav-dropdowns">Using dropdowns</h2> <p>Add dropdown menus with a little extra HTML and the <a href="../javascript/#dropdowns">dropdowns JavaScript plugin</a>.</p> <h3>Tabs with dropdowns</h3> <div class="bs-example"> <ul class="nav nav-tabs" role="tablist"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Help</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div> {% highlight html %} <ul class="nav nav-tabs" role="tablist"> ... <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> ... </ul> </li> ... </ul> {% endhighlight %} <h3>Pills with dropdowns</h3> <div class="bs-example"> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Help</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /example --> {% highlight html %} <ul class="nav nav-pills"> ... <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> ... </ul> </li> ... </ul> {% endhighlight %} </div>