menu MDUI Documentation
color_lens
near_me
Start
keyboard_arrow_down
Instalation Compatibility JavaScript tool library JavaScript global methods
layers
Style
keyboard_arrow_down
Colors and themes Font Grid layout Typography Icon Media Helper class Shadow
widgets
Component
keyboard_arrow_down
Ripple animation effect Button Floating operation button Drop-down selection Divider Expandable panel Text box Select control Slider List List control Grid list Tab Tab toolbar App bar Navigation drawer Bottom navigation bar Card Scrap of paper Tooltip Snackbar Table Dialog box Menu Progress indicator
view_carousel
JavaScript Plug-in
keyboard_arrow_down
Collapse Headroom
local_mall
Resources
keyboard_arrow_down
Material icon

Navigation drawer

The navigation drawer in MDUI (hereafter referred to as drawer) can slide out from the left or right side of the page, and a page can have multiple drawers.

The performance of the drawer bar on mobile phones, tablets, and desktop devices is somewhat different. You can observe the changes of the drawer bar on the left side of this page by changing the width of the browser:

  1. height
    • On mobile phones and tablets, the height of the drawer bar is always 100%.
    • On desktop devices, the drawer bar does not cover the application bar by default, and is the height of the application bar from the top of the page. Add class .mdui-drawer-full-height You can make the height of the drawer bar 100%. At this time, the drawer bar may cover the top of the app bar. You can add a class to the app bar. .mdui-appbar-inset Make the app bar not covered by the drawer bar.
  2. Background color and shadow
    • On mobile phones and tablets, the drawer bar defaults to a white background with shadows.
    • On desktop devices, the drawer bar defaults to a transparent background without shadows. Add class .mdui-color-[color] You can set the background color of the drawer bar and add shadows.
  3. Display state
    • On mobile phones and tablets, the drawer bar is hidden by default.
    • On desktop devices, the drawer bar is displayed by default.
    • Add class .mdui-drawer-open The drawer bar can be displayed by default on all devices; add class .mdui-drawer-close The drawer bar can be hidden by default on all devices.
  4. Mask
    • On mobile phones and tablets, when the drawer bar is opened, the mask layer is always displayed.
    • On desktop devices, when the drawer bar is opened, the mask layer is not displayed by default. Set up overlay The parameters are true, The mask layer can be displayed when the drawer is opened. If it is set to display the mask layer, then you should add .mdui-drawer-close The class makes the drawer bar hidden by default.

Call method

  1. Call through custom attributes (if the component is dynamically generated, you need to call mdui.mutation() Initialize）
  2. Call via JavaScript

Related Reading

Material Design Guidelines: Pattern-Navigation Drawer

Call method

HTML structure 

<!-- mdui-drawer-body-left Add padding-left to the class body, as long as there is a drawer bar opened by default on the left, add this class. -->
<!-- mdui-drawer-body-right Add padding-right to the class body, as long as there is a drawer on the right side that is opened by default, add this class. -->
<body class="mdui-drawer-body-left mdui-drawer-body-right">

  <!-- The default drawer bar is on the left -->
  <div class="mdui-drawer">
    ... drawer content ...
  </div>

  <!-- If you want to make the drawer bar on the right, you need to add a class mdui-drawer-right -->
  <div class="mdui-drawer mdui-drawer-right">
    ... drawer content ...
  </div>

</body>

Called by custom attributes

There is no need to write JavaScript code to use this method. Just in a controlling element（For example: button）Add on mdui-drawer="options" Attributes. When calling through custom attributes, you need to add an additionaltarget The parameter is used to specify the drawer to be controlled, and its value is the CSS selector of the drawer to be controlled.

<body class="mdui-drawer-body-right">

  <button class="mdui-btn" mdui-drawer="{target: '#left-drawer'}">open left drawer</button>

  <div class="mdui-drawer" id="left-drawer">
    ... left drawer content ...
    <button class="mdui-btn" mdui-drawer-close>close</button>
  </div>

</body>

Some attributes can be added to the elements in the drawer bar to bind events, and these attributes can also be used when using JavaScript invocation methods.

Attributes Description
mdui-drawer-close Clicking on the element will trigger close.mdui.drawer Event and close the drawer.

Call via JavaScript 

// selector is the CSS selector or DOM element of the drawer bar
// options are configuration parameters, see the parameter list below
var inst = new mdui.Drawer(selector, options);
run

parameter

parameter name Types of Defaults description
overlay boolean false Whether to show the mask layer when the drawer is opened. This parameter is only valid for devices with medium screens and above, and the mask layer will always be displayed on ultra-small screens and small screen devices.
swipe boolean false Whether to enable swipe gestures.

method

Method name description
open Show the drawer bar.
close Hide the drawer bar.
toggle Switch the display status of the drawer bar.
getState Returns the state of the current drawer bar. Contains four states（opening、opened、closing、closed）。

event

event description the goal parameter
open.mdui.drawer The event will be triggered when the drawer bar starts to open the animation. <div class="mdui-drawer"></div> event._detail.inst: Examples
opened.mdui.drawer The event will be triggered when the drawer bar completes the opening animation.
close.mdui.drawer The event will be triggered when the drawer bar starts to close the animation.
closed.mdui.drawer The event will be triggered when the drawer bar finishes closing animation.

List of CSS class names

Class name effect
.mdui-drawer Define a drawer bar.
.mdui-drawer-right On the drawer bar on the right side of the page.
.mdui-drawer-full-height Make the drawer bar occupy 100% of the height.
.mdui-drawer-open Make the drawer bar display by default.
.mdui-drawer-close Make the drawer bar hidden by default.
.mdui-drawer-body-left for body Add to padding-left
.mdui-drawer-body-right for body Add to padding-right
arrow_back Previous
App bar
arrow_forward Next
Bottom navigation bar
Set document theme

Theme color

Main color

Accent color