NavigationDrawer

The navigation drawer provides side navigation between pages on a website.

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:

By default, this component uses position: fixed.

When modal is false and the breakpoint is at least --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 the component is used inside the <mdui-layout></mdui-layout> component. In this case, padding-left or padding-right is not added.

By default, the navigation drawer appears on the left or right side of the viewport. To place it inside a container, add the contained attribute. This makes the navigation drawer position itself relative to the parent element (you need to 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>

Source

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 lets the navigation drawer close when the ESC key is pressed.

The close-on-overlay-click attribute lets the navigation drawer 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>

Source

Right Placement

Use the placement attribute to place 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>

Source

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 is always displayed.
`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 position. Possible values: `left`: Displays on the left side. `right`: Displays on the right side.
`contained`	`contained`	`boolean`	`false`
By default, the navigation drawer is positioned relative to the `body` element. If set, it is positioned relative to its parent element. Note: You must manually set `position: relative; overflow: hidden;` on 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 corner radius of the component. You can use a specific pixel value, but it is recommended to reference design tokens.
`--z-index`
The CSS `z-index` value of the component.

NavigationBar

NavigationRail

NavigationDrawer

Usage

Examples

In Container

Right Placement

API

Properties

Events

Slots

CSS Parts

CSS Custom Properties