The m3e-drawer-container is a responsive layout container that manages collapsible left and right drawers alongside main content.

npm i @m3e/drawer-container

This section outlines usage examples and configuration guidance for the components in this package.

The m3e-drawer-container provides the start and end slots for specifying drawer elements. The default slot presents the content between drawers. The start and end attributes control whether the corresponding drawer is open.

<m3e-drawer-container start end>
  <div slot="start">Start drawer</div>
  <div>Main content</div>
  <div slot="end">End drawer</div>
</m3e-drawer-container>

You can control the drawer widths using the --m3e-drawer-container-width CSS custom property or by explicitly setting the width of a drawer.

<m3e-drawer-container start>
  <div slot="start" style="width: 200px;">Start drawer</div>
  <div>Main content</div>
</m3e-drawer-container>

The <m3e-drawer-container> supports four expressive drawer modes:

• side (default): Drawers remain visible alongside content.
• push: Drawers shift main content when opened.
• over: Drawers overlay content without displacement.
• auto: Mode adapts responsively based on viewport size.

The push and over modes present a scrim overlaying main content, a focus trap keeps focus in drawers, and main content becomes inert. Clicking the scrim will automatically close drawers.

Use the start-mode attribute to control the behavior of the start drawer, and end-mode to configure the end drawer independently.

<m3e-drawer-container start start-mode="push">
  <div slot="start">Start drawer</div>
  <div>Main content</div>
</m3e-drawer-container>

<m3e-drawer-container start start-mode="over">
  <div slot="start">Start drawer</div>
  <div>Main content</div>
</m3e-drawer-container>

Use the m3e-drawer-toggle to toggle the opened state of a drawer. This component should be nested inside a clickable element and be associated with a slotted drawer by setting the for attribute to the id of a drawer.

The following example illustrates use of a m3e-icon-button to toggle a drawer. See Icon Button for more information.

<m3e-icon-button slot="leading-icon" aria-label="Menu" toggle>
  <m3e-icon name="menu"></m3e-icon>
  <m3e-icon slot="selected" name="menu_open"></m3e-icon>
  <m3e-drawer-toggle for="nav-drawer"></m3e-drawer-toggle>
</m3e-icon-button>
<m3e-drawer-container start-mode="over">
  <div slot="start" id="nav-drawer">Start drawer</div>
  <div>Main content</div>
</m3e-drawer-container>

The m3e-drawer-container is not given an ARIA role, indicating that it is treated as a neutral, non-semantic element in the accessibility tree.

Drawers should each be given an appropriate ARIA role. Consider using a nav element or ARIA role="navigation" for start drawers that present links used to navigate an application. An end drawer may use a aside element or be given the ARIA role="complementary" when its content is related to the main content, but not essential to understanding it. Otherwise, role="region" is a good fallback.

Consider nesting a main element inside a m3e-drawer-container's default slot when its used as the primary drawer container for an application. Otherwise, consider using a single div with ARIA role="region".

<m3e-drawer-container>
  <nav slot="start"></nav>
  <main></main>
  <aside slot="end"></aside>
</m3e-drawer-container>

Drawer toggles use aria-controls to associate its parenting element with the drawer, and dynamically update aria-expanded to indicate whether the drawer is open.

This package uses JavaScript Modules. To use it directly in a browser without a bundler, use a module script similar to the following.

<script type="module" src="/node_modules/@m3e/drawer-container/dist/index.js"></script>

In addition, you must use an import map to include dependencies.

<script type="importmap">
  {
    "imports": {
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "@m3e/core": "/node_modules/@m3e/core/dist/index.js",
      "@m3e/core/a11y": "/node_modules/@m3e/core/dist/a11y.js",
      "@m3e/core/layout": "/node_modules/@m3e/core/dist/layout.js"
    }
  }
</script>

For production, use index.min.js, a11y.min.js, and layout.min.js for faster load times.

This package includes a Custom Elements Manifest (custom-elements.json), which documents the properties, attributes, slots, events and CSS custom properties of each component.

You can explore the API below, or integrate the manifest into your own tooling.