- Guidelines
- React API Reference
- Blazor API Reference
Drawers provide a temporary surface that slides in from the bottom of the screen to reveal additional content, actions, or navigation options without leaving the current context.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use drawers for secondary actions, forms, or content that doesn’t require full page navigation. |
| Content | Keep content focused and actionable. Avoid overwhelming users with too many options or dense information. |
| Behavior | Provide clear entry and exit animations. Allow dismissal via swipe down, tap outside, or explicit close action. |
| States | Clearly indicate when drawer is opening, open, or closing. Provide visual feedback for interactive elements within. |
| Feedback | Use a drag handle at the top and smooth animation transitions for a polished experience. |
| Examples | Action sheets, share menus, filter panels, quick forms, or supplementary navigation. |
Best Practices
- Clear Purpose: Each drawer should have a single, well-defined purpose.
- Dismissible Design: Always provide multiple ways to close the drawer (swipe, tap outside, close button).
- Appropriate Content: Use for content that supplements the main interface without replacing it.
- Touch-Friendly: Ensure interactive elements are appropriately sized for touch interaction.
- Logical Height: Size the drawer appropriately for its content—avoid making it unnecessarily tall.
Do’s and Don’ts
Do
- Use for temporary, contextual content and actions.
- Provide clear visual cues for interaction (drag handle, close button).
- Support multiple dismissal methods (swipe, tap outside, ESC key).
- Keep content focused and scannable.
Don't
- Use for primary navigation or critical workflows.
- Make drawers too tall or overwhelm with content.
- Forget to provide clear exit paths.
- Use for content that requires frequent access.
Additional Guidance
- Psychological Impact:
- Contextual Continuity: Drawers maintain the user’s sense of place while providing additional functionality.
- Reduced Cognitive Load: By appearing on demand, drawers keep the main interface clean and focused.
- Natural Interaction: The slide-up gesture feels intuitive on mobile devices and translates well to desktop.