Navigation Drawer

navigation

Navigation drawers let people switch between UI views on larger devices. They are permanent, standard, or modal surfaces containing navigation destinations.

Variants

Standard

Default

Drawer that coexists with content

Modal

Drawer that overlays content with scrim

Properties

Name Type Required Default Description
variant enum - standard Type of drawer
open boolean - - Whether the modal drawer is open
pivot enum - start Side the drawer opens from

States

closed

Drawer is not visible (modal only)

open

Drawer is visible

opening

Drawer is animating open

closing

Drawer is animating closed

Accessibility

Role: navigation
Keyboard Support:
  • Tab - Move between drawer items
  • ArrowUp/Down - Navigate items
  • Enter/Space - Activate item
  • Escape - Close modal drawer
Screen Reader Notes: Drawer should have aria-label describing its purpose. Items should indicate current selection with aria-current.

LLM Context

Intent: Provide primary navigation for apps with many destinations
Anti-Patterns:
  • Drawer without aria-label
  • Too many items without grouping
  • Modal drawer on large screens
  • Standard drawer on mobile
Example Usage: 
<md-navigation-drawer><md-navigation-drawer-item active>Home</md-navigation-drawer-item><md-navigation-drawer-item>Settings</md-navigation-drawer-item></md-navigation-drawer>
<md-navigation-drawer variant="modal" open><md-navigation-drawer-item>Profile</md-navigation-drawer-item></md-navigation-drawer>