UI Toolkit

Navigation

Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.

If you are using navs to provide a navigation bar, be sure to add a role="navigation" to the most logical parent container of the <ul>, or wrap a <nav> element around the whole navigation. Do not add the role to the <ul> itself, as this would prevent it from being announced as an actual list by assistive technologies.

More Information in the WCAG 2.0 Guidelines

G125: Providing links to navigate to related Web pages

G128: Indicating current location within navigation bars

H59: Using the link element and navigation tools

Tabs Requires MAX Custom Bootstrap Stylesheet Requires MAX Custom Bootstrap JavaScript

Note the .nav-tabs class requires the .nav base class.

<ul class="nav nav-tabs">
  <li role="presentation" class="active" aria-controls="home" role="tab" data-toggle="tab"><a href="#home">Home</a></li>
  <li role="presentation" aria-controls="profile" role="tab" data-toggle="tab"><a href="#profile">Profile</a></li>
  <li role="presentation" aria-controls="messages" role="tab" data-toggle="tab"><a href="#messages">Messages</a></li>
</ul>
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home"></div>
  <div role="tabpanel" class="tab-pane" id="profile"></div>
  <div role="tabpanel" class="tab-pane" id="messages"></div>
</div>

Back to Top

Header Tags Requires MAX Custom Bootstrap Stylesheet Requires MAX Custom Bootstrap JavaScript

Take that same HTML, but use .nav-pills instead.

Header Tags are also vertically stackable. Just add .nav-stacked.

<ul class="nav nav-pills">
  <li role="presentation" class="active" aria-controls="home" role="tab" data-toggle="tab"><a href="#home">Home</a></li>
  <li role="presentation" aria-controls="profile" role="tab" data-toggle="tab"><a href="#profile">Profile</a></li>
  <li role="presentation" aria-controls="messages" role="tab" data-toggle="tab"><a href="#messages">Messages</a></li>
</ul>
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home"></div>
  <div role="tabpanel" class="tab-pane" id="profile"></div>
  <div role="tabpanel" class="tab-pane" id="messages"></div>
</div>

<ul class="nav nav-pills nav-stacked">
  <li role="presentation" class="active" aria-controls="home" role="tab" data-toggle="tab"><a href="#home">Home</a></li>
  <li role="presentation" aria-controls="profile" role="tab" data-toggle="tab"><a href="#profile">Profile</a></li>
  <li role="presentation" aria-controls="messages" role="tab" data-toggle="tab"><a href="#messages">Messages</a></li>
</ul>
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home"></div>
  <div role="tabpanel" class="tab-pane" id="profile"></div>
  <div role="tabpanel" class="tab-pane" id="messages"></div>
</div>

Back to Top

Navbar Requires MAX Custom Bootstrap Stylesheet Requires MAX Custom Bootstrap JavaScript

Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.

Overflowing content

Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:

Reduce the amount or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Back to Top