Bootstrap Navbar Toggle

Did you know that hamburger menu is not very user friendly? Improve your mobile experience with Navbar Toggle component.

Bootstrap Navbar component is designed for mobile first approach. Therefore, the navbar renders as collapsed on mobile devices. It can be toggled by a hamburger button. Unfortunately, hamburger icons are proved to be less efficient and not very usable.

Navbar Toggle component extends the default .navbar-toggle element and adds label to increase usability. You can also leave out .navbar-toggle-icon completely.

<nav class="navbar navbar-default">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" data-label-expanded="Close" aria-expanded="false">
    <span class="navbar-toggle-label">Menu</span>
    <span class="sr-only">(toggle)</span>

    <span class="navbar-toggle-icon">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </span>
  </button>
</nav>

You don’t always want to have the toggle button on the right side. Add .navbar-toggle-left to the navbar-toggle element to change its position on mobile devices.

<nav class="navbar navbar-default">
  <button type="button" class="navbar-toggle navbar-toggle-left collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" data-label-expanded="Close" aria-expanded="false">
    <span class="navbar-toggle-label">Menu</span>
    <span class="sr-only">(toggle)</span>

    <span class="navbar-toggle-icon">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </span>
  </button>
</nav>

Inversed Theme

Bootstrap navbar component comes in two color variants. Navbar toggle can be used with both of them.

<nav class="navbar navbar-inverse">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sw-example-navbar-collapse-3" data-label-expanded="Close" aria-expanded="false">
    <span class="navbar-toggle-label">Menu</span>
    <span class="sr-only">(toggle)</span>

    <span class="navbar-toggle-icon">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </span>
  </button>

  <div class="collapse navbar-collapse" id="sw-example-navbar-collapse-3">
  </div>
</nav>

This table gives you a quick overview of elements and variables.

Name Class Usage

Name	Class	Usage
Toggle Button	`.navbar-toggle`	Default Bootstrap toggle button. Variables: `@navbar-toggle-uppercase: true;` If set to TRUE, navbar toggle label will be uppercase `@navbar-toggle-font-size: @font-size-base;` Option to override default font-size `@navbar-toggle-default-border: @navbar-default-border;` Option to change default border color `@navbar-toggle-inverse-border: @navbar-inverse-border;` Option to change inverse border color
Toggle Label	`.navbar-toggle-label`	Wrapper for the button label.
Toggle Icon	`.navbar-toggle-icon`	Wrapper for the hamburger icon.

Toggle Button

.navbar-toggle

Default Bootstrap toggle button.

Variables:

@navbar-toggle-uppercase: true;
If set to TRUE, navbar toggle label will be uppercase
@navbar-toggle-font-size: @font-size-base;
Option to override default font-size
@navbar-toggle-default-border: @navbar-default-border;
Option to change default border color
@navbar-toggle-inverse-border: @navbar-inverse-border;
Option to change inverse border color

Toggle Label .navbar-toggle-label Wrapper for the button label.

Toggle Icon .navbar-toggle-icon Wrapper for the hamburger icon.

Navbar Toggle Label

Inversed Theme

Navbar Toggle Overview

Module: Navbar Toggle