Navigation Drawer

Material Design 3 navigation drawer for app navigation. Provides modal and standard variants supporting mobile and desktop experiences with smooth animations and accessibility features. Not intended for contextual menus or settings panels — use ds-menu for action menus and ds-side-sheet for supplemental content.

Basic Usage

A simple modal drawer with navigation items. The modal variant overlays content with a scrim and traps focus until the user selects a destination or dismisses it — ideal for infrequent navigation on mobile.

Open Drawer

Menu

Home Search Settings 
<ds-button id="open-drawer" variant="filled">
  Open Drawer
</ds-button>

<ds-navigation-drawer id="drawer" variant="modal">
  <div slot="header">
    <h3>Menu</h3>
  </div>
  <ds-nav-item icon="home" active>Home</ds-nav-item>
  <ds-nav-item icon="search">Search</ds-nav-item>
</ds-navigation-drawer>

Variants

Navigation drawers support two main variants for different layouts

Modal Variant

Overlay drawer with semi-transparent scrim background. Recommended for mobile and tablet layouts.

  • Use when: the app is mobile or tablet-first and navigation is accessed infrequently through a hamburger or menu button.
  • Avoid when: users navigate destinations frequently — the repeated open/close overhead degrades the experience; use the Standard variant on wider layouts instead.
Open Modal Drawer

Menu

Home Search Settings Favorites 
<ds-navigation-drawer variant="modal">
  <ds-nav-item icon="home" active>Home</ds-nav-item>
  <ds-nav-item icon="search">Search</ds-nav-item>
</ds-navigation-drawer>

Standard Variant

Persistent side drawer that remains visible. Recommended for desktop layouts.

  • Use when: the layout has enough horizontal space for a side panel and users switch destinations frequently.
  • Avoid when: screen real estate is limited — the persistent drawer crowds mobile viewports.

Navigation

Dashboard Analytics Reports Team

Main Content Area

The standard drawer variant is persistent and doesn't have a scrim overlay. It's ideal for desktop layouts where the drawer remains visible. 

<ds-navigation-drawer variant="standard" open>
  <ds-nav-item icon="dashboard" active>Dashboard</ds-nav-item>
  <ds-nav-item icon="analytics">Analytics</ds-nav-item>
</ds-navigation-drawer>

Position

Drawers can be positioned on the left or right side of the screen

Open Left Drawer Open Right Drawer

Left Menu

Home Search Settings

Right Menu

Notifications Profile Sign Out 
<ds-navigation-drawer position="left">...</ds-navigation-drawer>
<ds-navigation-drawer position="right">...</ds-navigation-drawer>

Custom Width

Customize drawer width with CSS custom property

Open Custom Width Drawer

Compact Menu

Dashboard Analytics Reports 
<ds-navigation-drawer style="--ds-navigation-drawer-width: 280px">
  ...
</ds-navigation-drawer>

API

Navigation Drawer Attributes

Attribute Type Default Description
variant string 'modal' Drawer type: 'modal' (overlay) or 'standard' (persistent)
position string 'left' Drawer position: 'left' or 'right'
open boolean false Opens/closes the drawer

Navigation Drawer Methods

Method Description
show() Opens the drawer
close() Closes the drawer
toggle() Toggles drawer open/closed

Navigation Drawer Events

Event Description
ds-navigation-drawer:open Fired when drawer opens
ds-navigation-drawer:close Fired when drawer closes

Navigation Item Attributes

Attribute Type Default Description
href string '' Link destination
icon string '' Material Symbol icon name
active boolean false Highlights as current page
disabled boolean false Disables the item

Navigation Item Events

Event Description
ds-nav-item:click Fired when item is clicked

CSS Custom Properties

Property Default Description
--ds-navigation-drawer-width 360px Drawer width

CSS Parts

Part Description
container Main drawer container
scrim Overlay/scrim (modal variant only)
header Header slot area
content Content area for navigation items

Slots

Slot Description
(default) Main content area (typically navigation items)
header Optional header content above navigation items

Browser Support

Browser Minimum Version Notes
Chrome 90+ Full support
Firefox 88+ Full support
Safari 14+ Full support
Edge 90+ Full support

Accessibility

Keyboard Interaction

Key Context Expected Result
Tab Drawer open Moves focus to the next focusable element within the drawer
Shift+Tab Drawer open Moves focus to the previous focusable element
Escape Modal drawer open Closes the drawer and restores focus to the trigger element
Enter / Space Focus on a nav item Activates the focused navigation item

ARIA Attributes

  • role="dialog" + aria-modal="true" (modal variant) - The drawer is announced as a dialog, and a screen reader's virtual cursor stays inside it, matching the Tab trap. The links sit in a navigation landmark inside it.
  • role="navigation" (standard variant) - The drawer is a navigation region alongside the page, not a dialog
  • inert while closed - Removes the off-screen drawer from the accessibility tree and from the Tab order
  • aria-current="page" - Marks active navigation item
  • aria-disabled="true" - Marks disabled items

Focus Management

  • ✅ Focus trap in modal variant keeps focus within drawer
  • ✅ Focus restored to trigger button when modal closes
  • ✅ First focusable element receives focus when drawer opens
  • ✅ Focus indicators meet WCAG 2.2 standards

Screen Reader Support

  • ✅ Announces drawer open/close events
  • ✅ Announces navigation item labels and icon names
  • ✅ Announces active state with aria-current
  • ✅ Announces disabled state with aria-disabled

Usage Guidelines

  • When to use: Choose the navigation drawer for apps with five or more primary destinations, hierarchical navigation structures, or when destination labels are long and need full visibility in a side panel.
  • When not to use: Avoid for fewer than five destinations — a navigation bar or rail provides faster access. Do not use a drawer as a context menu, settings panel, or filter surface.
  • Composition: Use the Modal variant on mobile and Standard on desktop. Provide a slot="header" for branding or account details. Group related items with visual separators.
  • Common mistakes: Forgetting to restore focus when the modal drawer closes. Using a drawer for non-navigational content like filters — use ds-side-sheet for that purpose.

MD3 Specification

For complete Material Design 3 guidelines and specifications, visit: Navigation Drawer - Material Design 3