pattern-library 3 linked patterns checked
Fluent 2 Drawer
Defines drawers as secondary content surfaces sliding in from an edge for supplemental information and simple actions related to main content, with guidance to use popovers for shorter contextual information and dialogs for confirmations.
Read with a purpose
What this source can teach
Use this source to compare a documented solution with the task and states in your own product.
- Start with the original. Open the source and find the guidance or example relevant to your task.
- Trace the connection. Use the claim notes below to see how this site applies the source to specific patterns.
- Check the setting. Compare the source's platform, people, and constraints with your own decision.
Pattern Decisions This Source Supports
| Pattern | Supported decision | Required contract | Claim note |
|---|---|---|---|
| Drawer | Choose drawer when users need page-adjacent detail, preview, metadata, comments, simple actions, or object inspection without leaving the current page. | The opener names or is adjacent to the object whose detail will appear in the drawer. | Fluent defines drawers as secondary content surfaces that slide in from an edge for supplemental information and simple actions related to main content. |
| Drawer with no close or return path | Flag this anti-pattern when a temporary drawer has no visible close control, no Escape path, no back-route dismissal, no equivalent for gesture-only close, or no predictable focus return. | Opening the drawer records the opener or selected object as the return target. | Defines drawers as edge surfaces for secondary content related to main content. |
| Modal for nonblocking content | Flag this anti-pattern when content can be read later, ignored safely, dismissed without consequence, or shown near its object without blocking the rest of the page. | Users can continue the primary task while reading or ignoring nonblocking information. | Supports drawers for secondary content and simple actions, with dialogs reserved for confirmations. |
Evidence Role
This source is treated as pattern-library evidence. Its value comes from the specific claims and setting described above.
Publisher: Microsoft Fluent 2 Design System. Last checked: .