| 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. | Use a navigation drawer for destinations that need to be available but not constantly visible, especially on constrained screens or complex apps with secondary sections. | 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 panel slides over the table with the title Details, no close control, and no selected record name. | A vague popup titled Popup floats over active page controls and offers only OK. | A hamburger opens a full-height list with no scrim, no close control, and no visible selected destination. | A filter drawer closes with no active count, leaving users unaware that filters are still hiding records. |
| 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 content is only informational and does not require blocking the page. | 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. | Default state with no user-applied filters and an explicit result count. |
| 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. | Hiding active filters inside a closed panel with no count, chips, or result-state summary. |