Components
Sheet
A slide-out panel that complements the main content of the screen and provides additional context or actions.
Sheets are slide-out panels that extend from the edges of the screen to display supplementary content or actions. They provide additional context without navigating away from the current page, making them ideal for secondary tasks, detailed views, or configuration panels.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use sheets for secondary content, detailed views, or actions that support the main workflow without replacing it. |
| Content | Organize content hierarchically with clear headers, sections, and actions. Keep the most important information visible without scrolling. |
| Behavior | Sheets slide in from screen edges (top, right, bottom, left) and can be dismissed by clicking outside, using escape key, or explicit close actions. |
| Positioning | Choose the appropriate edge based on content type and user flow. Right-side sheets are common for details, left-side for navigation. |
| Hierarchy | Use overlay to indicate the sheet is above the main content while maintaining context of the underlying page. |
| Examples | Settings panels, detailed item views, filters, navigation menus, or form wizards. |
Best Practices
- Positioning: Choose the appropriate edge based on content and user expectations. Right-side sheets work well for details, left-side for navigation.
- Dismissal: Provide multiple dismissal methods (overlay click, escape key, close button) to accommodate different user preferences.
- Responsive Design: Consider how sheets behave on different screen sizes and adjust accordingly.
Do’s and Don’ts
Do
- Use sheets for supplementary content that supports the main workflow.
- Choose the appropriate edge based on content type and user flow.
- Provide clear navigation and actions within the sheet.
Don't
- Use sheets for critical actions that must be completed.
- Overcrowd sheets with too much content or complex layouts.
- Use sheets as the primary navigation method.
Additional Guidance
- Accessibility: Ensure proper focus management when sheets open and close. The sheet should trap focus when open and return focus to the trigger when closed.
-
Psychological Impact:
- Contextual Continuity: Sheets maintain visual connection to the main content, reducing cognitive load.
- Progressive Disclosure: They reveal additional information on demand without overwhelming the primary interface.
- Spatial Awareness: The slide-in animation helps users understand the relationship between the sheet and the main content.