Skocz do: Nawigacja, szukaj

Navbar

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.

Justified navbar nav links are currently not supported.

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:

  1. Reduce the amount or width of navbar items.
  2. Hide certain navbar items at certain screen sizes using responsive utility classes.
  3. 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.

Requires JavaScript plugin

If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.

The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.

Changing the collapsed mobile navbar breakpoint

The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).

Make navbars accessible

    <div class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <div class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-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>
          </div>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" role="navigation">
          <ul class="nav navbar-nav">
            <li class="active">[[Link]] <span class="sr-only">(current)</span></li>
            <li>[[Link]]</li>
            <li class="dropdown dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">[[Dropdown]]</li>
              <ul class="dropdown-menu" role="menu">
                <li>[[Action]]</li>
                <li>[[Another action]]</li>
                <li>[[Something else here]]</li>
                <li class="divider"></li>
                <li>[[Separated link]]</li>
                <li class="divider"></li>
                <li>[[One more separated link]]</li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </div>

Mobile device caveats

There are some caveats regarding using form controls within fixed elements on mobile devices.

Context-specific usage

Like the standard button classes, .navbar-btn can be used on <a> However, neither .navbar-btn nor the standard button classes should be used on <a> elements within .navbar-nav.

Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.