Px-app-nav is a navigation bar or drawer for applications.
Use the 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 font-awesome icons to better communicate with the user.
- node.js
- npm
- bower
- 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 https://github.com/PredixDev/px-app-nav.git --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>
Type: Boolean - (Optional) - Default: "true"
Whether the navigation is expanded. Reflected to an attribute (reflectToAttribute: true) so the application can bind to it and maintain state as needed.
<px-app-nav
...
nav-expanded="true">
</px-app-nav>
#### nav-items
Type: Array - (Optional) - Default: [{}] notify
Object array of items and sub-items in the nav. Each object in the Array can specify '[path-key]', 'label', 'icon' 'l10nId', 'eventName', and 'subitems', which is another Array.
<px-app-nav
...
nav-items='[{"path": "", "icon": "fa-warning",
"label":"Alerts","subitems": [{"label": "Sub
Category 1"}, {"label": "Sub Category 2"}]},
{"path":"tab2", "icon": "fa-briefcase", "label":
"Cases"}]'>
</px-app-nav>
#### path-key
Type: String - (Optional) - Default: "path"
Allows a level of indirection in the Array of navItems passed in to resolve paths.
<px-app-nav
...
path-key="path">
</px-app-nav>
Type: String - (Optional) - Default: "#"
When navigating, this prefix is appended to the relative URL. Defaults to '#', indicating paths are routed via the hash part of the URL. To make them relative to current directory, use '/'.
<px-app-nav
...
path-prefix="/">
</px-app-nav>
Type: Boolean - (Optional) - Default: false
If true, nav drawer appears on the right to accommodate RTL languages. Set automatically if Mozilla's L20N framework is loaded on the document.
<px-app-nav
...
rtl="false">
</px-app-nav>
##Events ####nav-items-changed
Fired when any of the navigation items are modified.
Events follow the Polymer data-binding standards.
You can can attach listeners by using one of the methods below:
- Polymer Event listener
- on- annotated event listener
- addEventListener vanila Javascript method
Marks the nav item with the given path as selected, and all others as unselected.
From the component's directory...
$ npm install
$ bower install
$ grunt sass
From the component's directory, to start a local server run:
$ grunt depserve
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 grunt watch is configured to enable LiveReload and will be watching for modifications in your root directory as well as /css.
Your browser will also need to have the LiveReload extension installed and enabled. For instructions on how to do this please refer to: livereload.com/extensions/.
Disable LiveReload by removing the livereload key from the configuration object or explicitly setting it to false.
Devmode runs grunt depserve and grunt watch concurrently so that when you make a change to your source files and save them, your preview will be updated in any browsers you have opened and turned on LiveReload.
From the component's directory run:
$ grunt devmode
Please use Github Issues to submit any bugs you might find.