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:

When the contained property is true.
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).

Close Navigation Drawer

Open Navigation Drawer

<div class="example-contained" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer contained>
    <mdui-button class="close">Close Navigation Drawer</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Open Navigation Drawer</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-contained");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

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

Code

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.

<div class="example-modal" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer modal close-on-esc close-on-overlay-click contained>
    <mdui-button class="close">Close Navigation Drawer</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Open Navigation Drawer</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-modal");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

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

Code

Right Placement

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

Close Navigation Drawer

Open Navigation Drawer

<div class="example-placement" style="position: relative; overflow: hidden">
  <mdui-navigation-drawer placement="right" modal close-on-esc close-on-overlay-click contained>
    <mdui-button class="close">Close Navigation Drawer</mdui-button>
  </mdui-navigation-drawer>

  <div style="height: 160px;">
    <mdui-button class="open">Open Navigation Drawer</mdui-button>
  </div>
</div>

<script>
  const example = document.querySelector(".example-placement");
  const navigationDrawer = example.querySelector("mdui-navigation-drawer");
  const openButton = example.querySelector(".open");
  const closeButton = example.querySelector(".close");

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

Code

API

Properties

Attribute	Property	Type	Default
`open`	`open`	`boolean`	`false`
Opens the navigation drawer.
`modal`	`modal`	`boolean`	`false`
Displays an overlay when open. On narrow devices (screen width < `--mdui-breakpoint-md`), the overlay always displays.
`close-on-esc`	`closeOnEsc`	`boolean`	`false`
Closes the drawer when the ESC key is pressed and an overlay is present.
`close-on-overlay-click`	`closeOnOverlayClick`	`boolean`	`false`
Closes the drawer when the overlay is clicked.
`placement`	`placement`	`'left' \| 'right'`	`'left'`
Sets the drawer's display position. Possible values: `left`: Display on the left side. `right`: Display on the right side.
`contained`	`contained`	`boolean`	`false`
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.
`order`	`order`	`number`	-
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.

NavigationBar

Up Next

NavigationRail