Mobile Drawer
Mobile navigation drawer wrapper with trigger, sheet content, and title.
When To Use
- Use Mobile Drawer when content needs to appear in context without forcing a full page transition.
- Match the overlay type to the weight of the task: lightweight guidance for hints, stronger containment for focused tasks.
- Review the examples below to compare trigger styles, content density, and dismissal expectations.
When Not To Use
- Do not move a full workflow into an overlay if the user needs persistent navigation, rich context, or deep editing space.
- Do not rely on an overlay for critical messaging when it can be missed, dismissed accidentally, or blocked by focus issues.
Accessibility Notes
- Move focus into the overlay when it opens and return focus to the trigger when it closes.
- Support Escape to dismiss non-destructive overlays and ensure the trigger communicates expanded state where appropriate.
- Do not hide critical actions behind hover-only disclosure; keyboard and touch users need equivalent access.
Key Props / API
Props
title, description, triggerLabel, children
Default
Off-canvas mobile menu