Navbars

Light navbar .navbar-light 


<nav class="navbar navbar-light navbar-toggleable-md" role="navigation">
  <button class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target="#navbar-collapse">
    <span class="navbar-toggler-icon"></span>
  </button>

  <a class="navbar-brand" href="#">Spacial</a>

  <div class="collapse navbar-collapse justify-content-end" id="navbar-collapse">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Nav link</a>
      </li>
      <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
          Dropdown
          <i class="ion-chevron-down"></i>
        </a>
        <div class="dropdown-menu" role="menu">
          <a class="dropdown-item" href="#">Item 1</a>
          <a class="dropdown-item" href="#">Item 2</a>
          <a class="dropdown-item" href="#">Item 3</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link nav-link--rounded" href="#">
          Rounded link
        </a>
      </li>
    </ul>
  </div>
</nav>

Inverse navbar .navbar-inverse 


<nav class="navbar navbar-inverse navbar-toggleable-md" role="navigation">
  <button class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target="#navbar-collapse">
    <span class="navbar-toggler-icon"></span>
  </button>

  <a class="navbar-brand" href="#">Spacial</a>

  ... omitted for brevity ...
</nav>

Transparent Navbar

Use the new utility .bg-transparent in combination with .navbar-inverse or .navbar-light for placing navbars over backgrounds and interactive content.


In combination with .navbar-inverse 

<nav class="navbar navbar-inverse bg-transparent navbar-toggleable-md" role="navigation">
  <button class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target="#navbar-collapse">
    <span class="navbar-toggler-icon"></span>
  </button>

  <a class="navbar-brand" href="#">Spacial</a>

  ... omitted for brevity ...
</nav>

<div class="transparent-navbar-header" style="background-image: linear-gradient(-45deg, #5F6190 0%, #525480 20%, #131b2e 100%);">
</div>

In combination with .navbar-light 

<nav class="navbar navbar-light bg-transparent navbar-toggleable-md" role="navigation">
  <button class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target="#navbar-collapse">
    <span class="navbar-toggler-icon"></span>
  </button>

  <a class="navbar-brand" href="#">Spacial</a>

  ... omitted for brevity ...
</nav>

<div class="transparent-navbar-header" style="background: #f5f7f9;">
</div>

Dropdown nested menus

You can add nested submenus by inserting a .dropdown.dropdown-submenu as an item inside a .dropdown-menu, because we're just reusing the same classes to create each nested submenu, there's no limit to how many steps you can get, and it comes optimized for mobile devices too :D 


<nav class="navbar navbar-light bg-transparent navbar-toggleable-md" role="navigation">
  <ul class="navbar-nav">
    <li class="nav-item dropdown">
      <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
        Dropdown
        <i class="ion-chevron-down"></i>
      </a>
      <div class="dropdown-menu" role="menu">
        <a class="dropdown-item" href="#">Item 1</a>
        <div class="dropdown dropdown-submenu">
          <a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">
            Item 2 submenu
          </a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Submenu item 1</a>
            <div class="dropdown dropdown-submenu">
              <a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">
                Submenu item 2
              </a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Nested item 1</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Normal link</a>
    </li>
  </ul>
</nav>

Dropdown inverse with .dropdown-menu-inverse

You can change the style of one or all dropdown menus to a dark version. 


<nav class="navbar navbar-light bg-transparent navbar-toggleable-md" role="navigation">
  <ul class="navbar-nav">
    <li class="nav-item dropdown">
      <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
        Dropdown
        <i class="ion-chevron-down"></i>
      </a>
      <div class="dropdown-menu dropdown-menu-inverse" role="menu">
        <a class="dropdown-item" href="#">Item 1</a>
        <div class="dropdown dropdown-submenu">
          <a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">
            Item 2 submenu
          </a>
          <div class="dropdown-menu dropdown-menu-inverse">
            <a class="dropdown-item" href="#">Submenu item 1</a>
            <div class="dropdown dropdown-submenu">
              <a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">
                Submenu item 2
              </a>
              <div class="dropdown-menu dropdown-menu-inverse">
                <a class="dropdown-item" href="#">Nested item 1</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Normal link</a>
    </li>
  </ul>
</nav>