Navbar

The navbar component creates a Bootstrap nav element and applies the appropriate SKY UX classes to it and its children. It also adds behavior such as displaying sub-navigation items when users hover over a dropdown. If you do not want to collapse the navbar into a mobile menu on small screens, then place the bb-navbar-showmobile class on the bb-navbar component.

  • bb-navbar — Creates a Bootstrap nav element and applies SKY UX classes.
    • bb-navbar-showmobile — Indicates not to collapse the navbar into a mobile menu for small screen sizes. Within the bb-navbar element, you add a class attribute and set its value to bb-navbar-showmobile.
    • bb-navbar-active — Indicates the active navigation item in the navbar. Within the li element for that item, you add a class attribute and set its value to bb-navbar-active.

Markup

<bb-navbar class="bb-navbar-showmobile">
  <div class="container-fluid">
    <ul class="nav navbar-nav navbar-left">
      <li class="bb-navbar-active"><a href="">Selected item</a></li>
      <li class="dropdown">
        <a href="" class="dropdown-toggle" role="button">Child items <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">

          <li role="menuitem">
            <a href="">Child item 1</a>
          </li>

          <li role="menuitem">
            <a href="">Child item 2</a>
          </li>

          <li role="menuitem">
            <a href="">Child item 3</a>
          </li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="" class="dropdown-toggle" role="button">Child items 2 <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">

          <li role="menuitem">
            <a href="">Child item 1</a>
          </li>

          <li role="menuitem">
            <a href="">Child item 2</a>
          </li>

          <li role="menuitem">
            <a href="">Child item 3</a>
          </li>
        </ul>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="">Right item</a></li>
    </ul>
  </div>
</bb-navbar>

JavaScript

angular.module('stache')
    .controller('NavbarTestController', angular.noop);