Warning: We no longer develop features for this version of SKY UX, and we recommend that you use the latest version instead. This site describes the AngularJS (1.x) implementation of the SKY UX framework. We still support this version, but it is in maintenance mode. For more information, see developer.blackbaud.com/skyux.

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);