UX Patterns Guide
UI + UX Navigation And Wayfinding established

Navigation drawer

Provide a controlled navigation drawer that slides in as a sheet, presents grouped destinations with current state, blocks or shares space appropriately, and closes predictably after navigation or dismissal.

Open in lab Compare alternatives
Decision first

Choose this pattern when the problem matches

Use when

  • A constrained app needs access to more destinations than fit in the visible navigation surface.
  • Destinations are useful but not frequent enough to justify bottom navigation slots.
  • Account switching, labels, settings, or secondary app sections need a stable menu location.

Avoid when

  • Users need constant visibility of the local hierarchy while working in a section.
  • The app has three to five primary mobile destinations that should be bottom navigation.
  • The drawer would hide the only way to recover, save, or complete the current task.
  • The navigation content is actually a contextual action menu, filter panel, or settings drawer.

Problem it prevents

Users need access to app destinations or account sections, but the screen cannot or should not keep every navigation option visible all the time.

Pattern anatomy

What a strong implementation has to make clear

User need

A mobile or constrained layout has more destinations than can fit in bottom navigation or a top app bar.

Pattern promise

Provide a controlled navigation drawer that slides in as a sheet, presents grouped destinations with current state, blocks or shares space appropriately, and closes predictably after navigation or dismissal.

Required state

Closed state with a clear opener such as a menu button.

Recovery path

Drawer opens but underlying content remains interactive.

Access contract

Give the opener an accessible name such as Open navigation menu.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A mobile app bar menu button opens a left modal drawer with Inbox selected, grouped labels, account switcher, and a visible scrim behind it.
  • The drawer has a clear title, short destination labels, selected item styling, dividers between groups, and a close route.
  • Users open the drawer, select Sent, the drawer closes, and Sent becomes the visible destination while Inbox scroll state is preserved.
  • Tapping the scrim or pressing Escape dismisses the drawer and returns focus to the menu button.
Weak implementation

Vague, hidden, hard to recover from

  • A hamburger opens a full-height list with no scrim, no close control, and no visible selected destination.
  • The drawer mixes folders, account settings, delete account, help, and sign out without grouping or hierarchy.
  • Selecting a drawer item changes the destination behind the sheet but leaves the drawer covering the new page.
  • The drawer steals focus while hidden or leaves keyboard users behind the modal scrim.
UI guidance
  • Render a navigation sheet that enters from the start edge or bottom, is opened by an explicit control, and presents grouped destination items with selected state.
  • For modal drawers, dim or block the underlying content with a scrim and provide clear dismissal through item selection, scrim click, Escape, close control, or platform gesture.
UX guidance
  • Use a navigation drawer for destinations that need to be available but not constantly visible, especially on constrained screens or complex apps with secondary sections.
  • After a drawer item is chosen, close the drawer, update the active destination, and return focus or reading position predictably so users see the result of navigation.
Implementation contract

What the implementation must handle

States

  • Closed state with a clear opener such as a menu button.
  • Opening or open state with drawer sheet, selected destination, and grouped items.
  • Modal scrim state that communicates the underlying content is blocked.
  • Dismissed state from scrim, Escape, close button, item selection, or platform gesture.

Interaction

  • The opener toggles or opens the drawer and exposes expanded or modal state as appropriate.
  • A modal drawer prevents interaction with content behind it until dismissed.
  • Selecting a drawer destination closes the drawer and updates the active destination.
  • Scrim click, Escape, close controls, or platform gestures dismiss the drawer without changing destination.

Accessibility

  • Give the opener an accessible name such as Open navigation menu.
  • Expose the selected drawer item programmatically.
  • Trap or contain focus only while a modal drawer is open, then restore focus on close.
  • Ensure scrim, close, Escape, and item-selection dismissal are keyboard operable.

Review

  • Which destinations are frequent enough to stay visible, and which belong in the drawer?
  • Can users dismiss the drawer without changing destination?
  • Does selecting an item close the drawer and reveal the new destination?
  • Does keyboard focus move into and out of the modal drawer predictably?
Interactive lab

Inspect the states before you copy the pattern

Open and dismiss the drawer

Open the drawer, choose a destination, dismiss it with the scrim, and check whether focus and selected state recover.

Navigation drawer
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

Closed state with a clear opener such as a menu button.

Keyboard / Access

Enter or Space on the opener opens the drawer.

Avoid Generating

Hiding the app's most important destinations in a drawer on mobile.
Evidence trail

Source-backed claims behind this guidance

Material Design Navigation drawer

Material Design - checked

Material defines navigation drawer variants, destination list anatomy, scrim behavior, and modal dismissal routes.

Android Developers: Navigation drawer

Google Android Developers - checked

Android Compose documents slide-in drawer activation, ModalNavigationDrawer, DrawerState, grouped content, and top-app-bar integration.

USWDS Side navigation component

U.S. Web Design System - checked

USWDS side navigation guidance supports the distinction between persistent side hierarchy and drawer-style temporary navigation.

Full agent/debug reference

Problem Context

  • A mobile or constrained layout has more destinations than can fit in bottom navigation or a top app bar.
  • Some destinations are secondary, account-related, or less frequent but still need a stable access point.
  • The same navigation structure may be modal on phones and persistent or standard on wider screens.

Selection Rules

  • Choose a navigation drawer when destinations need occasional access from a constrained layout and can tolerate one extra open step.
  • Use a modal drawer when the navigation sheet should temporarily block interaction with the content behind it.
  • Use a standard, dismissible, or permanent drawer only when the drawer's relationship to content and layout width is clear.
  • Group drawer items by destination type, account, labels, or settings so long lists do not become undifferentiated menus.
  • Keep bottom navigation for the most frequent three to five mobile destinations and put overflow or secondary destinations in the drawer only when needed.
  • Use persistent side navigation instead of a drawer when desktop users repeatedly navigate within one local section.

Required States

  • Closed state with a clear opener such as a menu button.
  • Opening or open state with drawer sheet, selected destination, and grouped items.
  • Modal scrim state that communicates the underlying content is blocked.
  • Dismissed state from scrim, Escape, close button, item selection, or platform gesture.
  • Selected destination state after the drawer closes.
  • Responsive state that changes between modal, dismissible, standard, or permanent behavior without changing labels unexpectedly.

Interaction Contract

  • The opener toggles or opens the drawer and exposes expanded or modal state as appropriate.
  • A modal drawer prevents interaction with content behind it until dismissed.
  • Selecting a drawer destination closes the drawer and updates the active destination.
  • Scrim click, Escape, close controls, or platform gestures dismiss the drawer without changing destination.
  • Focus moves into the modal drawer when it opens and returns to the opener or new page heading when it closes.
  • The selected drawer item must match the current destination when the drawer is opened after a route change.

Implementation Checklist

  • Define which destinations belong in the drawer and which deserve persistent bottom, global, or side navigation.
  • Provide an explicit opener with an accessible name and consistent placement.
  • Render modal drawers with a scrim and dismissal behavior that matches the platform.
  • Group long drawer lists with headings or dividers and keep labels short.
  • Mark the current destination programmatically and visually.
  • Close the drawer after destination activation and verify focus movement.
  • Test responsive breakpoints so drawer, side navigation, and bottom navigation do not duplicate the same primary destination set.

Common Generated-UI Mistakes

  • Hiding the app's most important destinations in a drawer on mobile.
  • Leaving a modal drawer open after a destination is selected.
  • Providing no scrim, Escape, close control, or outside-dismiss behavior for a modal drawer.
  • Using the menu icon for unrelated actions on different screens.
  • Mixing destructive account actions with normal destinations without grouping or confirmation.
  • Duplicating the same destinations in bottom navigation and a drawer without clear overflow logic.

Critique Questions

  • Which destinations are frequent enough to stay visible, and which belong in the drawer?
  • Can users dismiss the drawer without changing destination?
  • Does selecting an item close the drawer and reveal the new destination?
  • Does keyboard focus move into and out of the modal drawer predictably?
  • Will this drawer become persistent side navigation on larger screens, and are labels consistent across variants?
Accessibility
  • Give the opener an accessible name such as Open navigation menu.
  • Expose the selected drawer item programmatically.
  • Trap or contain focus only while a modal drawer is open, then restore focus on close.
  • Ensure scrim, close, Escape, and item-selection dismissal are keyboard operable.
  • Do not allow focus to move to obscured content behind a modal drawer.
Keyboard Behavior
  • Enter or Space on the opener opens the drawer.
  • Tab moves through drawer items and controls while the modal drawer is open.
  • Escape closes a modal drawer and returns focus to the opener.
  • Enter activates a drawer item, closes the drawer, and moves focus according to route-change conventions.
  • Keyboard users can dismiss the drawer without activating a destination.
Variants
  • Modal navigation drawer
  • Dismissible navigation drawer
  • Standard navigation drawer
  • Permanent navigation drawer
  • Bottom navigation drawer
  • Drawer with account switcher
  • Drawer with grouped destinations

Verification

Last verified: