node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


Sioux UINavigation

npm install sioux-ui-navigation

Navigation (similar to the iOS one) for sioux. demo (on desktop in Chrome use emulate touch events in devtools)

Inherits from


var UINavigation = require('sioux-ui-navigation');
// the first argument is in which the navigation will be appended 
var nav = new UINavigation(document.querySelector('.screen'), {
  isToolbarHidden: true
  , isBarHidden: false
  , initWith: navElem

The navigation elem

The stack contains and at the creation the initWith property and .push() method take an object, which has to contain:

  • title: the title in the bar, String
  • content: the HTML what will be inserted into the content part, DOM
  • complete: this function will be executed when the eleme will be loaded, Function


  • stack: the stack of the windows in the navigation, the last elem of the stack is the one active on the screen
  • isToolbarHidden: Boolean
  • isBarHidden: Boolean
  • bar: the top bar element
  • toolbar: the bottom toolbar element not so useable right now
  • content: the content element
  • segue: the UISegue object (in the content element)


  • .push(navElem): A new elem will be added to the stack and it will be displayed on screen.
  • .pop(): The last elem of the stack will be popped and then the previous elemnt will be displayed.
  • .hideBar(): Hides the top bar.
  • .showBar(): Shows it.
  • .hideToolbar(): Hides the toolbar.
  • .showToolbar(): Shows it.
  • .then(callback): Chain it to the push or pop or any other method above, and when they finish the callback argument will be executed.
var navObj = {
  title: 'Test Title'
  , content: someHTML
  , complete: function (content) {
  .then(function () {
  .then(function () {