Drawer Layout

This is a responsive implementation of a navigation drawer that will also work on wide screens where the drawer will stay open on the left side.

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.


1. Import drawer-layout module

<script type="module">
import "https://zuixjs.github.io/zkit/lib/1.2/controllers/drawer-layout.module.js";

2. Add component to the page

<drawer-layout z-context="menu-drawer">

<!-- Add Navigation Drawer menu and content here -->


1. Include zuix.js library

If not already included, add the following line right before the end of the head section in the HTML document:

<script src="https://cdn.jsdelivr.net/npm/zuix-dist@1.1.13/js/zuix.min.js"></script>

2. Load the drawer layout

Add the ctrl z-load attributes to the container of your navigation drawer

<div ctrl z-load="https://zuixjs.github.io/zkit/lib/1.2/controllers/drawer-layout"

<!-- Add Navigation Drawer menu and content here -->


Option attributes

  • z-context="<context_id>" optional
    identifier name to be used to access this component from JavaScript.
  • :on:<event_name>="<handler>" optional
    set handler function for event <event_name>
  • :drawer-width="<width_px>" optional
    panel width. Default value is 280 pixels.
  • :auto-hide-width="<width_px>" optional
    auto-hide panel if available width is less than specified value, otherwise show as fixed. Set to -1 to always auto-hide. Default value is 960 pixels.
  • :main-content optional element hosting the main page content. The drawer will automatically resize the content when open and page width is greater than :auto-hide-width


  • drawer:open - occurs when the drawer opens
  • drawer:close - occurs when the drawer is closed
  • layout:change - occurs when the page layout changed.
    The second argument of the callback is a status object with two fields:
    {smallScreen: boolean, drawerLocked: boolean}


Get a reference to the component instance:

zuix.context('menu-drawer', (md) => {
// store a global reference for later use
self.menuDrawer = md;


// open the drawer
// close the drawer
// toggle open/close drawer
// enable/disable control by gesture
arrow_left  Previous
Next arrow_right 
Support this work
zKit components v1.2.1
web enhancing bits