UI-NAVIGATION

MOBILE FRIENDLY

Examples

ui-navigation is a set of responsive navigation polymer web components: ui-topbar, ui-topbar and ui-drawer-panel.

Demos

ui-topbar
ui-navbar
ui-drawer-panel

Installation

```bash bower install ui-navigation ``` ```html <link rel="import" href="bower_components/ui-navigation/ui-navigation.html"> ```

Documentation

UI-TOPBAR

UI-TOPBAR is a reponsive bar component that relies on modern css flexbox for positioning of branding and menu elements within a top bar on desktop systems. On touch devices, it behaves as a drawer menu.
IMPORTANT:
both ui-topbar and ui-navbar must be wrapped by a ui-container element for the touch drawer to work correctly.
```html <body> <ui-container> <ui-topbar></ui-topbar> </ui-container> </body> ```

Markup

```html <!-- base markup --> <ui-topbar> <touch-bar> <ui-toggle></ui-toggle> </touch-bar> <ui-brand> <h5>My Brand</h5> </ui-brand> <section> <!-- menu container --> </section> </ui-topbar> <!--extended markup --> <ui-topbar> <touch-drawer><!--is placed within touch-ui-drawer--> <touch-header></touch-header> <touch-section header></touch-section> <touch-section footer></touch-section> </touch-drawer> <touch-bar> <ui-toggle></ui-toggle> <touch-icons> <touch-icon> <span class="icon-content-more-vert gray"></span> </touch-icon> </touch-icons> </touch-bar> <ui-brand> <h5>My Brand</h5> </ui-brand> <section> <ui-menu></ui-menu> </section> </ui-topbar> <!--section flex markup --> <!--section tag width==grid width--> <!-- space-between for ui-menu css components--> <ui-topbar> <section class="space-between"> <ui-menu></ui-menu> <ui-menu></ui-menu> </section> </ui-topbar> <!-- center for ui-menu--> <ui-topbar> <section class="center"> <ui-menu></ui-menu> </section> </ui-topbar> <!-- position an additional menu to the far right-end --> <ui-topbar> <section></section> <ui-menu class="right"></ui-menu> </ui-topbar> ```
SEARCH
UI-SEARCH elements in touch-header or input elements with the attribute [role="search"] generate automatic listeners
TOUCH SEARCH
touch-header>ui-search

DESKTOP SEARCH
input with role attribute=search

SEARCH EVENT FIRED
ui.[topbar].search
```html <ui-topbar> <touch-drawer> <touch-header> <ui-search> <input type="text" placeholder="search"> </ui-search> </touch-header> </touch-drawer> <section></section> <ui-menu class="right"> <menu-item><input placeholder="Search" role="search"></menu-item> </ui-menu> </ui-topbar> ```

UI-NAVBAR

UI-NAVBAR is a reponsive, composite navigation component. On touch devices, it behaves as a drawer menu.

Markup

```html <!-- Base Markup --> <ui-navbar> <touch-bar> <ui-toggle></ui-toggle> <touch-ui-brand> </touch-ui-brand> <touch-icons> <touch-icon> <span class="icon-content-more-vert gray"></span> </touch-icon> </touch-icons> </touch-bar> <nav> </nav> </ui-navbar> <!-- extended markup--> <ui-navbar> <ui-topbar></ui-topbar> <touch-drawer><!--is placed within touch-ui-drawer--> <touch-header></touch-header> <touch-section header></touch-section> <touch-section footer></touch-section> </touch-drawer> <touch-bar> <ui-toggle></ui-toggle> <touch-ui-brand> </touch-ui-brand> <touch-icons> <touch-icon> <span class="icon-content-more-vert gray"></span> </touch-icon> </touch-icons> </touch-bar> <nav> <header></header> <section></section> <!-- menu container --> </nav> </ui-navbar> <!-- nav menu flex positioning --> <!-- center --> <nav> <section> <ui-menu class="auto"></ui-menu> </section> </nav> <!-- left --> <nav> <section> <ui-menu></ui-menu> </section> </nav> <!--space-between --> <nav> <section> <div> <ui-menu></ui-menu> <ui-menu></ui-menu> </div> </section> </nav> ```

TOUCH-UI-DRAWER

TOUCH-UI-DRAWER is dynamically added to the DOM by the navigation components...it is not created from markup. The component will clone touch-drawer markup to the drawer. ```html <ui-navbar> <touch-drawer> <touch-header></touch-header> <!--header component of drawer, inserted at the top of the drawer--> <touch-section header></touch-section> <!--header section of menu body, inserted before menu--> <touch-section footer></touch-section> <!--footer section of menu body, inserted after menu--> </touch-drawer> </ui-navbar> ```

TOUCH-UI-DRAWER populates the drawer by cloning UI-MENU items to TOUCH-UI-MENU.

MENUS AND DROPDOWNS

UI-MENUs are used to present navigation menu options. MENU-ITEM-DROPDOWN presents a menu dropdown on css hover. User UI-DRODOWN for a simple dropdown list. Use UI-MEGA-DROPDOWN for a custom dropdown presentation.
UI-MENUs are automatically cloned to the mobile drawer.
```html <ui-topbar> <section class="center"> <ui-menu> <menu-item><a>Link One</a></menu-item> <menu-item><a>Link Two</a></menu-item> <menu-item-dropdown> <a>Link Three</a> <ui-dropdown> <menu-item><a>Sublink One</a></menu-item> <menu-item><a>Sublink Two</a></menu-item> <menu-item><a>Sublink Three</a></menu-item> </ui-dropdown> </menu-item-dropdown> <menu-item-dropdown> <a>Link Four</a> <ui-mega-dropdown> <!--custom html/css formatted content goes here--> </ui-mega-dropdown> </menu-item-dropdown> </ui-menu> </section> </ui-topbar> ```
EXCLUDING MENUS
a UI-MENU with attribute [touch-menu="false"] will not be added to the drawer.
a MENU-ITEM, MENU-ITEM-DROPDOWN with attribute [touch-menu-item="false"] will not be added to the drawer. ```html <ui-navbar> <nav> <section> <ui-menu touch-menu="false"></ui-menu> </section> </nav> </ui-navbar> <ui-navbar> <nav> <section> <ui-menu> <menu-item-dropdown touch-menu-item="false"></menu-item-dropdown> </ui-menu> </section> </nav> </ui-navbar> ```
TOUCH EVENTS

By default, UI-TOPBAR and UI-NAVBAR components will handle touch menu links. This is done to deliver the effect of closing the drawer before the http resource request is made. This however can introduce issues for single page applications where delegated get requests are handled by an external routing framework. You can keep this behavior and yet handle routing requests by setting window._location to your own service/singleton that implements an 'href' setter.

IMPLEMENT TOUCH MENU HREF
window._location=MyService;

where MyService.href implements an href setter

Alternatively, you can simply disable the behavior by setting the attribute disableTouchEvents="true". You then will need to manually handle closing the drawer.

```html <ui-topbar disable-touch-events="true"> </ui-topbar> ```
DISABLE TOUCH MENU EVENTS
disableTouchEvents=true
SELECTIVELY DISABLING TOUCH EVENTS

You can also selectively disable touch events by setting a data-ignore attribute on the "a" tag. For example, this might be done for external linking in a new window

```html <ui-topbar> <ui-menu> <menu-item><a data-ignore></a></menu-item> </ui-menu> </ui-topbar> ```
SELECTIVE DISABLING TOUCH MENU EVENTS
a[data-ignore]
BRAND HOME LINK

Setting a [home] attribute on the navigation brand/logo will trigger an automatic listener to for the home link specified in the homeUrl property

```html <ui-topbar home-url="/"> <ui-brand> <h5 home>My Brand</h5> </ui-brand> </ui-topbar> ```
BRAND HOME LINK
set homeUrl attribute on the component
place a [home] attribute on any child element to trigger the listener

UI-DRAWER-PANEL

UI-DRAWER-PANEL is a mobile-first composite navigation component. This component however does not clone menu elements to the drawer. Additionally, the drawer toggle is visible on desktop screen and devices.

Markup

```html <ui-drawer-panel home-url="/"> <ui-topbar> <ui-toggle></ui-toggle> <section class="space-between"> <h3 home>My Brand</h3> <ui-menu> </ui-menu> </section> <ui-brand class="show-for-medium-down"> <h4 home>My Brand</h4> </ui-brand> </ui-topbar> <ui-sidebar drawer> <header> <h4>Menu</h4> <span class="icon-content-close" close></span> </header> <ui-menu class="column"> <menu-item> <span class="icon-info-outline"></span> <a>About</a> </menu-item> <ui-button-dropdown disable-blur="true"> <span class="icon-android"></span> <a>Devices</a> <ui-dropdown> <menu-item><a>Sublink One</a></menu-item> <menu-item><a>Sublink Two</a></menu-item> <menu-item><a>Sublink Three</a></menu-item> <menu-item><a>Sublink Four</a></menu-item> <menu-item><a>Sublink Five</a></menu-item> </ui-dropdown> </ui-button-dropdown> </ui-menu> </ui-sidebar> </ui-drawer-panel> ```
DRAWER
The drawer panel must be marked with a [drawer] attribute.

 

PROPERTIES

Public Properties

transformDuration {Numeric} touch menu slide duration(ms) default: 250
transformDelay {Numeric} activation delay when pressing ui-toggle default: 0
translateX {String} drawer translation distance default: 260px
overlayOpacity {Number} opacity of overlay when showing drawer default: .5
overlayBackground {String} overlay background default: #000
overlayOpenDuration {Number} overlay show duration default: 0
overlayCloseDuration {Number} overlay hide duration default: 150
includeHome {Boolean} adds a home link to the top of the drawer menu default: true
homeUrl {String} home url default: true
homeIcon {String} home menu icon default: null
disableTouchEvents {Boolean} disable touch menu href handled by the component default: false
menu {Array} menu items model added to the drawer Model [{ {String}icon, {String}label, {String}url, {Array}dropdown }] dropdown [{ {String}label, {String}url }] default: []
easing {String} drawer easing animation default: ease-in-out
cloneDelay {Number} delay touch drawer is cloned from the DOM default: 750
touchDelay {Number} delay tap triggers drawer panel default: 50

METHODS

Public Methods

show {void} show the drawer params: none
hide {void} hide the drawer params: none
addMenuModel {void} add menu items to the drawer params: {Array} model

EVENTS

Public Events

ui.[navbar].hide thrown when drawer is hidden
ui.[navbar].show thrown when drawer is shown
ui.[navbar].search thrown when search is submitted