Use a drawer for supplemental side content tied to the current page, modal dialog for a blocking contained task, navigation drawer for destinations, and filter panel for narrowing the current result set.
Use a drawer for supplemental side content tied to the current page, modal dialog for a blocking contained task, navigation drawer for destinations, and filter panel for narrowing the current result set.
Practice the judgment: Imagine this situation: A navigation menu is labelled as a drawer but lacks selected destination state, grouping, and route-change behavior. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Drawer | Modal dialog | Navigation drawer | Filter panel |
|---|---|---|---|---|
| UI or UX | UI + UX - Supplemental edge panel for current-context detail or light actions | UI + UX - Focused modal task layer | UI + UX - Dismissible slide-in navigation sheet | UI + UX - Grouped filter control panel for narrowing a current result set |
| UI guidance | Render a drawer as an edge-aligned panel with a visible heading, selected-object identity, close control, stable width, and clear relationship to the page content it supplements. | Render a titled layer above a dimmed or otherwise unavailable page, with clear task content, named actions, visible close or cancel affordance, and stable scroll boundaries. | Render a navigation sheet that enters from the start edge or bottom, is opened by an explicit control, and presents grouped destination items with selected state. | Render filter categories as labelled form controls in a panel adjacent to the result set on wide layouts, with a visible result count and active-filter summary near the results. |
| UX guidance | Use drawers to preserve parent-page context while users inspect supplemental detail or perform simple adjacent actions. | Use the modal interruption only for compact tasks that genuinely need temporary focus before the user returns to the page. | After a drawer item is chosen, close the drawer, update the active destination, and return focus or reading position predictably so users see the result of navigation. | Use a filter panel to help users narrow the current list or search result set while preserving orientation, search query, sort order, pagination context, and selected values. |
| Good UI | A right-side case details drawer opens from a table row, names Claim C-1042, shows status, owner, activity, and a close button while the table remains visible. | Account settings opens in a titled dialog with one display-name field, Save, Cancel, close control, and dimmed inactive page context. | A mobile app bar menu button opens a left modal drawer with Inbox selected, grouped labels, account switcher, and a visible scrim behind it. | A desktop search page shows a left filter panel with Status, Type, and Date groups, while active chips and the result count sit above the results. |
| Bad UI | A drawer contains navigation links, filters, account settings, and destructive commands under one unlabeled heading. | A vague popup titled Popup floats over active page controls and offers only OK. | A drawer overlays desktop content even though users need to switch between sibling pages repeatedly. | A panel mixes filter options, navigation links, sort controls, and saved views under one Filters heading. |
| Good UX | Opening the drawer preserves the table filter and selected row, Next item updates the drawer title, Escape closes it, and focus returns to the selected row. | Opening moves focus to the display-name field, Tab remains inside the layer, Escape cancels, and closing returns focus to Open dialog. | Users open the drawer, select Sent, the drawer closes, and Sent becomes the visible destination while Inbox scroll state is preserved. | A user selects Status: Open and Type: Appeal, applies the batch, lands back at the result summary, and sees 12 records with both criteria removable. |
| Bad UX | The drawer keeps showing Claim C-1042 after the user selects Claim C-1043 in the table. | Users can click background Delete or Navigate controls while the modal is still open. | Selecting a drawer item changes the destination behind the sheet but leaves the drawer covering the new page. | Applying a filter silently resets the query, sort order, current page, and view density. |
| Best fit | Users need to inspect object detail, metadata, comments, history, or light actions while staying on the current page. | A short task must interrupt normal page interaction but should return users to the same context afterward. | A constrained app needs access to more destinations than fit in the visible navigation surface. | Users need to narrow the current search results, browse results, table, card grid, or list by multiple criteria. |
| Avoid when | The surface is mainly app navigation or destination switching. | The workflow is long, multi-step, shareable, or needs browser navigation. | Users need constant visibility of the local hierarchy while working in a section. | The result set is small enough that scanning is faster than filtering. |
| Required state | Closed state with a clear opener tied to a specific object or page section. | Closed page state with an obvious invoking control. | Closed state with a clear opener such as a menu button. | Applied state with active-filter count, result count, and removable applied criteria near the results. |
| Accessibility burden | Give the drawer a visible heading and expose it as the accessible name for the region or dialog-like surface. | Use dialog semantics with an accessible name from the visible title. | Give the opener an accessible name such as Open navigation menu. | Use semantic form controls with fieldsets, legends, labels, and accessible names for filter categories and values. |
| Common misuse | Using a drawer as an unlabeled junk panel for unrelated commands, navigation, filters, and help. | Using a modal as a generic container for routine information that could stay inline. | Hiding the app's most important destinations in a drawer on mobile. | Using a filter panel as a navigation drawer that sends users to different pages instead of narrowing the current data set. |