A repository of over 1000 quality jQuery plugins

jQuery JQuery MobileNav

JQuery MobileNav is a jQuery Responsive & Drawer plugin.

Created by Vejersele

Not what you're looking for? Click here to view more Responsive & Drawer jQuery plugins


Build Status


Create an easy to use, responsive navigation for your website.


<nav id="primaryNav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Work</a></li>
    <li class="active"><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>


$(function () {


  // css classes
  css: {
    triggerClass: "mobileNavTrigger",
    pluginActiveClass: "mobileNavActive",
    isOpenClass: "mobileNavOpen",
    labelClass: "mobileNavLabel",

  // text settings
  text: {
    openText: "Open menu",
    closeText: "Close menu",
    noActiveItemText: "Menu"

  // available callbacks
  callbacks: {
    afterOpen: undefined, 
    afterClose: undefined,
    afterConstruct: undefined,
    afterDestruct: undefined,

  breakpoint: 500, // $(window).width() value
  showLabel: false, // show a label with the active menu item
  activeItemSelector: "ul > li.active > a" // selector to get the active menu item


$('#primaryNav').mobileNav('updateLabel'); // updates the label. Can be useful when using ajax ...

$('#primaryNav').mobileNav('open'); // open menu

$('#primaryNav').mobileNav('close'); // close menu

You might also like these other Responsive & Drawer jQuery Plugins

  • hiraku

    “hiraku” means “open” in Japanese. As you can imagine, “offcanvas-menu” is like a drawer and it is of...

  • jQuery Mobile Date Nav...

    This plugin provides a navigation between date range, either by a defined range (week, month and year). Ideal for querying information ac...

  • JqmNavigator

    This is an extension library for jQuery Mobile and Backbone.js frameworks