Px-app-nav is a Predix UI component which can be used as a navigation bar or as a drawer for applications.

Use px-app-nav to cleanly navigate portions or pages of a application. The navigation can be minimized or expanded to reveal the navigation items, which can have sub-items. The navigation can host other web components or authentication such as the px-login web component. Navigation items can use icons to better communicate with the user.

1. node.js
2. npm
3. bower
4. Install the webcomponents-lite.js polyfill to add support for web components and custom elements to your application.

First, install the component via bower on the command line.

bower install px-app-nav --save

Second, import the component to your application with the following tag in your head.

<link rel="import" href="/bower_components/px-app-nav/px-app-nav.html"/>

Finally, use the component in your application:

<px-app-nav></px-app-nav>

Read the full API and view the demo here.

Events follow the Polymer data-binding standards.

You can can attach listeners by using one of the methods below:

1. Polymer Event listener
2. on- annotated event listener
3. addEventListener vanila Javascript method

From the component's directory...

$ npm install
$ bower install
$ gulp sass

From the component's directory, to start a local server run:

$ gulp serve

Navigate to the root of that server (e.g. http://localhost:8080/) in a browser to open the API documentation page, with link to the "Demo" / working examples.

By default gulp serve is configured to enable LiveReload and will be watching for modifications in your root directory as well as /css.

GE JS Developer's Guide

Please use Github Issues to submit any bugs you might find.