NavBar Demo | <uif-nav-bar>

In order for this demo to work you must first build the library in debug mode.

Simple NavBar:

Code:


Advanced NavBar (search, item icons, sub menu):

Code:


Mobile version:

Need some animation? Here you go:

  1. Include angular-animate.js using script tag (<script src="https://code.angularjs.org/1.4.8/angular-animate.min.js"></script>) or include it into your package
  2. Add dependency on `ngAnimate` in your module, angular.module('demoApp', ['ngAnimate','officeuifabric.core','officeuifabric.components']);
  3. Now is-open-add, is-open-add-active, is-open-remove, is-open-remove-active css classes are availiable for you to use. They are automatically added by ngAnimate. You can use Office UI Fabric animation or external libraries like animate.css or even create your own animations.
  4. Here is an example of using Office UI Fabric animations:

Code: