Navigation for sioux.
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

sioux Navigation

More info from sioux:

npm install sioux-navigation

Navigation (similar to the iOS one) for sioux.


var Navigation = require('sioux-navigation');

// the first argument is in which the navigation will be inserted into
var nav = new Navigation(document.querySelector('.screen'), {
  isBarHidden: false
  , initWith: navElem

The navigation object

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

  • title: the title in the bar, String
  • contentFn: a function that returns DOM what will be inserted into the content part, Function
  • complete: this function will be executed when the content 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
  • isBarHidden: Boolean
  • bar: the top bar element
  • content: the content element
  • segue: the Segue object (in the content element)


  • .push(navElem): A new elem will be added to the stack and it will be displayed on screen.
  • .pop(callback): The last elem of the stack will be popped and then the previous elem will be displayed. The callback will be executed when the animation finished.
  • .hideBar(callback): Hides the top bar.
  • .showBar(callback): Shows it.
var navObj = {
  title: 'Test Title'
  , content: function () {
    var div = document.createElement('div');
    div.innerText = 'Foo';
    return div;
  , complete: function (content) {