Navigation drawer

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?