A jQuery plugin that makes mobile navigation easy.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
examples/barebones Update index.html Dec 10, 2013
lib Update modernizer.min.js Sep 4, 2013
script hammerOptions and test fix Aug 7, 2013
src Fix showOnRight on master Sep 19, 2016
test Event newness Jul 3, 2014
.editorconfig adds some basic Jasmine tests May 10, 2013
.gitignore updates ready for travis May 13, 2013
.travis.yml install coffee May 13, 2013
AUTHORS.txt adds jQuery Plugin repo json Jan 17, 2013
BSD-LICENSE.txt adds jQuery Plugin repo json Jan 17, 2013
README.md Update Organisation Jun 19, 2015
navobile.jquery.json Update Organisation Jun 19, 2015


#jQuery navobile

For full documentation please see the demo page.

Build Status


View live demo



The css required for the plugin is here because its always better to control styling in CSS where possible.


There are a few parameters for the plugin, they are mostly optional.

  • cta - the element that will open the navigation on click (default: '#show-navigation')
  • content - the selector that wraps the content that will slide out (default: '#content')
  • direction - the direction and therefore side that the content slides (default: 'ltr')
  • easing - jQuery easing function to use in $.animate fallback (default: 'linear') for more easing options you will require jQuery.easing
  • changeDOM - Boolean, whether the plugin needs to move the navigation in the DOM structure (default: false)
  • copyBoundEvents - Boolean, if changeDOM is true, whether to or not to copy across any bound events (default: false)
  • openOffsetLeft - String, the percentage you want navobile to open (default: '80%') N.B. If you alter this you will also need to change the width of .navobile-navigation
  • hammerOptions - a Javascript object containing the options detailed here: https://github.com/EightMedia/hammer.js/wiki/Getting-Started#gesture-options. Only needed if you are using bindSwipe/bindDrag (default: {})


There are a handful of useful events fired by navobile.

  • navobile:open - fired when the navigation cta is tapped and navobile is hidden
  • navobile:opened - fired when the navobile is fully open
  • navobile:close - fired when the navigation cta is tapped and navobile is visible
  • navobile:closed - fired when the navobile is fully closed

All of these are triggered on the document, below is a jQuery example:

$(document).bind('navobile:open', function() {alert('navobile is opening')});


Developed and maintained by Made.


Key contributions:


Licensed under New BSD License