NavigationDrawer

The navigation drawer provides a side-access method to different pages on a webpage. Typically, the <mdui-list> component is used within the navigation drawer to add navigation items.

Usage

Import the component:

import 'mdui/components/navigation-drawer.js';

Import the TypeScript type:

import type { NavigationDrawer } from 'mdui/components/navigation-drawer.js';

Example:

Close Navigation Drawer Open Navigation Drawer
<mdui-navigation-drawer close-on-overlay-click class="example-drawer">
  <mdui-button>Close Navigation Drawer</mdui-button>
</mdui-navigation-drawer>

<mdui-button>Open Navigation Drawer</mdui-button>

<script>
  const navigationDrawer = document.querySelector(".example-drawer");
  const openButton = navigationDrawer.nextElementSibling;
  const closeButton = navigationDrawer.querySelector("mdui-button");

  openButton.addEventListener("click", () => navigationDrawer.open = true);
  closeButton.addEventListener("click", () => navigationDrawer.open = false);
</script>

Notes:

This component defaults to a position: fixed style.

When the modal attribute is set to false and the breakpoint is equal to or greater than --mdui-breakpoint-md, it automatically adds padding-left or padding-right to the body to prevent content from being obscured.

However, it uses a position: absolute style in the following cases:

  1. When the contained property is true.
  2. When it's within the <mdui-layout></mdui-layout> component. In this case, it doesn't add padding-left or padding-right.

Examples

In Container

By default, the navigation drawer displays on the left or right side of the current window. To place it inside a container, add the contained attribute. This positions the navigation drawer relative to the parent element (you need to manually add position: relative; overflow: hidden; styles to the parent element).

Modal

The modal attribute displays a modal overlay when the navigation drawer is open. Note that if the window or parent element width is less than --mdui-breakpoint-md, this attribute is ignored and the modal overlay is always displayed.

The close-on-esc attribute allows the navigation drawer to close when the ESC key is pressed.

The close-on-overlay-click attribute allows the navigation drawer to close when the modal overlay is clicked.

Right Placement

Set the placement attribute to right to display the navigation drawer on the right side.

API

Properties

AttributePropertyReflectTypeDefault
openopenbooleanfalse

Opens the navigation drawer.

modalmodalbooleanfalse

Displays an overlay when open.

On narrow devices (screen width < --mdui-breakpoint-md), the overlay always displays.

close-on-esccloseOnEscbooleanfalse

Closes the drawer when the ESC key is pressed and an overlay is present.

close-on-overlay-clickcloseOnOverlayClickbooleanfalse

Closes the drawer when the overlay is clicked.

placementplacement'left' | 'right''left'

Sets the drawer's display position. Possible values:

  • left: Display on the left side.
  • right: Display on the right side.
containedcontainedbooleanfalse

By default, the navigation drawer displays relative to the body element. When set, it displays relative to its parent element.

Note: You must add position: relative; overflow: hidden; style to the parent element when this attribute is set.

orderordernumber-

Specifies the layout order within the <mdui-layout> component. Items are sorted in ascending order. The default value is 0.

Events

Name
open

Emitted when the navigation drawer starts to open. Can be prevented with event.preventDefault().

opened

Emitted after the navigation drawer has opened and the animations are completed.

close

Emitted when the navigation drawer starts to close. Can be prevented with event.preventDefault().

closed

Emitted after the navigation drawer has closed and the animations are completed.

overlay-click

Emitted when the overlay is clicked.

Slots

Name
(default)

Contents of the navigation drawer.

CSS Parts

Name
overlay

Overlay element.

panel

Container for the navigation drawer.

CSS Custom Properties

Name
--shape-corner

The size of the component corner. You can use a specific pixel value, but it's recommended to reference design tokens.

--z-index

The CSS z-index value of the component.

MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Styles
Dark Theme Dynamic Theme Typography Design Tokens
Frameworks
React Vue Angular
Components
Button ButtonIcon Fab SegmentedButton Chip Card Checkbox Radio Switch Slider RangeSlider List Collapse Tabs Dropdown Menu Select TextField LinearProgress CircularProgress Dialog Divider Avatar Badge Icon Tooltip Snackbar NavigationBar NavigationDrawer NavigationRail BottomAppBar TopAppBar Layout
Functions
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
Libraries
@mdui/icons