A layout controller for implementing a Navigation Drawer. Swipe from left edge or tap the menu button to open the drawer.

The navigation drawer is a UI panel that shows your app's main navigation menu. It is hidden when not in use, but appears when the user swipes a finger from the left edge of the screen or, when at the top level of the app, the user touches the drawer icon in the app bar.

The drawer is currently displaying as fixed since page is wider than 960 pixels. Reduce the window size to switch to auto-hide mode and try gesture control.


1. Include zUIx library

Add the following line, preferably inside the head section of the HTML document:

<script src="//zuixjs.github.io/zuix/js/zuix.min.js"></script>

2. Load the drawer layout

Add the data-ui-load attribute to the container of your navigation drawer

<div data-ui-load="@lib/controllers/drawer_layout"

Set the options object

var drawer_options = {
  on: {
    'drawer:open': function(e) {
      // things to do when drawer is open
    'drawer:close': function(e) {
      // things to do when drawer is closed
    'layout:change': function(e, status) {
        // where `status` object has two fields
        // {
        //    smallScreen, (boolean)
        //    drawerLocked (boolean)
        // }
  autoHideWidth: 960,
  drawerWidth: 280

Option attributes


Event listeners

var menuDrawer;
// since the component loads asynchronously
// a callback is required to ensure the component is ready
zuix.context('menu-drawer', function() {
  // add event listeners
    .on('drawer:open', function(e) { /* ... */})
    .on('drawer:close', function(e) { /* ... */});
    .on('layout:change', function(e, d) { /* ... */});
  // store a global reference of
  // the component for later use
  menuDrawer = this;


// open the drawer
// close the drawer
// toggle open/close drawer
// enable/disable control by gesture

You can try these command in the console now.

Source code

Source code is available in the lib/controllers folder of zKit repository.

Example Drawer