Nord Design System Drawer
Documents drawers for context-sensitive actions and information, explicitly distinguishing them from modals by saying they should not block users from completing their task.
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. | Nord positions drawers as context-sensitive action and information surfaces that do not block task completion like modals. |
| 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. | Supports the boundary that drawers should not block users from completing their task. |
| 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. | Distinguishes drawers from modals by emphasizing contextual content that should not block task completion. |
Comparisons supported by this source
- Drawer vs modal dialog vs navigation drawer vs filter panel
Nord frames drawers as context-sensitive information and action surfaces that should not block task completion like modals.
- Drawer with no close or return path vs drawer vs modal dialog vs navigation drawer vs details panel
Supports context-sensitive drawers that should not block task completion, making missing close and return paths a task-blocking failure.
- Modal for nonblocking content vs modal dialog vs popover vs drawer vs inline message
Supports drawers for context-sensitive information and distinguishes them from modals that block task completion.
Evidence Role
This source is treated as pattern-library evidence. Its value comes from the specific claims and setting described above.
Publisher: Nord Design System. Last checked: .