near_me
Getting Started
keyboard_arrow_downlayers
Style
keyboard_arrow_downwidgets
Components
keyboard_arrow_downlocal_mall
Resources
keyboard_arrow_downThe new mdui 2 based on Material Design 3 and Web Components is now available. Check out the mdui 2 documentation.
Navigation Drawer
Navigation drawers in mdui can slide out from the left or right side of the page. A page can have multiple navigation drawers.
The behavior of navigation drawers varies slightly on mobile, tablet, and desktop devices. You can observe the changes in the left navigation drawer on this page by adjusting the browser width:
- Height
- On mobile and tablet devices, the navigation drawer height is always 100%.
- On desktop devices, navigation drawers do not cover the app bar by default and are positioned one app bar height below the top of the page. Adding the class
.mdui-drawer-full-heightmakes the navigation drawer full-height, which may cause it to cover the app bar. You can add.mdui-appbar-insetto the app bar to prevent it from being covered by the navigation drawer.
- Background Color and Shadow
- On mobile and tablet devices, navigation drawers have a white background and a shadow by default.
- On desktop devices, navigation drawers have a transparent background and no shadow by default. Adding the class
.mdui-color-[color]allows you to set the background color and add a shadow.
- Visibility
- On mobile and tablet devices, navigation drawers are hidden by default.
- On desktop devices, navigation drawers are visible by default.
- Adding the class
.mdui-drawer-openmakes the navigation drawer always visible by default; adding.mdui-drawer-closemakes it always hidden by default.
- Overlay
- On mobile and tablet devices, an overlay is always displayed when the navigation drawer is opened.
- On desktop devices, an overlay is not displayed by default when the navigation drawer is opened. Setting the
overlayparameter totrueshows the overlay when opened. If it is set to show an overlay, you should add the.mdui-drawer-closeclass to ensure the navigation drawer is hidden by default.
Usage
- (If the component is dynamically generated,
mdui.mutation()needs to be called for initialization) - Call via JavaScript
Related Reading
Usage
HTML Structure
<!-- The mdui-drawer-body-left class adds padding-left to the body; add this class whenever there is a navigation drawer on the left that is open by default. -->
<!-- The mdui-drawer-body-right class adds padding-right to the body; add this class whenever there is a navigation drawer on the right that is open by default. -->
<body class="mdui-drawer-body-left mdui-drawer-body-right">
<!-- Default navigation drawer on the left -->
<div class="mdui-drawer">
... drawer content ...
</div>
<!-- To position the navigation drawer on the right, add the class mdui-drawer-right -->
<div class="mdui-drawer mdui-drawer-right">
... drawer content ...
</div>
</body>Call via Attributes
This method does not require writing JavaScript code. Simply add the mdui-drawer="options" attribute to a trigger element (e.g., a button). When calling via custom attributes, an additional target parameter is needed to specify the controlled navigation drawer, where the value is the CSS selector of the navigation drawer.
<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>Attributes can be added to elements within the navigation drawer to bind events, which are also applicable when using the JavaScript call method.
| Attribute | Description |
|---|---|
mdui-drawer-close | Clicking this element triggers the close.mdui.drawer event and closes the navigation drawer. |
Call via JavaScript
// selector is the CSS selector or DOM element of the navigation drawer
// options are configuration parameters, see the parameter list below
var inst = new mdui.Drawer(selector, options);Param
| Param Name | Type | Default | Description |
|---|---|---|---|
overlay | boolean | false | Whether to display an overlay when opening the navigation drawer. This parameter only applies to medium screens and above; an overlay is always shown on extra-small and small screens. |
swipe | boolean | false | Whether to enable swipe gestures. |
Method
| Method Name | Description |
|---|---|
open | Show the navigation drawer. |
close | Hide the navigation drawer. |
toggle | Toggle the visibility of the navigation drawer. |
getState | Returns the current state of the navigation drawer (one of: opening, opened, closing, closed). |
Event
| Event Name | Description | Target | Params |
|---|---|---|---|
open.mdui.drawer | Triggered when the navigation drawer starts its opening animation. | <div class="mdui-drawer"></div> | event._detail.inst: Instance |
opened.mdui.drawer | Triggered when the navigation drawer completes its opening animation. | ||
close.mdui.drawer | Triggered when the navigation drawer starts its closing animation. | ||
closed.mdui.drawer | Triggered when the navigation drawer completes its closing animation. |
CSS Classes
| Class Name | Description |
|---|---|
.mdui-drawer | Defines a navigation drawer. |
.mdui-drawer-right | A navigation drawer on the right side of the page. |
.mdui-drawer-full-height | Makes the navigation drawer full-height. |
.mdui-drawer-open | Makes the navigation drawer visible by default. |
.mdui-drawer-close | Makes the navigation drawer hidden by default. |
.mdui-drawer-body-left | Adds padding-left to body. |
.mdui-drawer-body-right | Adds padding-right to body. |