Use a navigation drawer for a dismissible destination sheet, side navigation for persistent local hierarchy, and bottom navigation for a small mobile set of primary destinations.
Use a navigation drawer for a dismissible destination sheet, side navigation for persistent local hierarchy, and bottom navigation for a small mobile set of primary destinations.
Practice the judgment: Imagine this situation: The menu icon opens a drawer on some screens and unrelated actions on others. 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 | Navigation drawer | Side navigation | Bottom navigation |
|---|---|---|---|
| UI or UX | UI + UX - Dismissible slide-in navigation sheet | UI + UX - Persistent local hierarchy at the side of content | UI + UX - Persistent mobile primary navigation |
| UI guidance | 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 a vertical navigation region beside the main content that exposes the current area's parent, child, and optional grandchild pages with a clear active indicator. | Render three to five bottom destinations with stable touch targets, labels or accessible names, reinforcing icons, selected state, optional badges, and safe-area spacing. |
| UX guidance | 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. | Help the person reach a clear task outcome. | Support rapid switching between top-level mobile sections while preserving each section's local navigation, scroll, filters, and drafts. |
| Good UI | 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 settings page shows Account, Billing, Team, and Security in a left rail with Security expanded and Audit log marked as current. | Selected state uses shape, weight, and text color instead of relying on color alone. |
| Bad UI | A drawer overlays desktop content even though users need to switch between sibling pages repeatedly. | The side navigation highlights Settings while the page heading is Audit log. | Six tiny icon-only items and a center plus button compete for space. |
| Good UX | Users open the drawer, select Sent, the drawer closes, and Sent becomes the visible destination while Inbox scroll state is preserved. | Users open Billing, switch to Invoices, then return to Security and see the Security group still expanded. | Switching from Home to Saved and back preserves each section's scroll count and draft state. |
| Bad UX | Selecting a drawer item changes the destination behind the sheet but leaves the drawer covering the new page. | Users must reopen a drawer every time they move between sibling pages in the same desktop section. | Tapping Search clears the Home feed position and opens a one-off command instead of a destination. |
| Best fit | A constrained app needs access to more destinations than fit in the visible navigation surface. | A product area has several related pages arranged in a visible hierarchy. | A compact mobile app has three to five high-frequency top-level destinations. |
| Avoid when | Users need constant visibility of the local hierarchy while working in a section. | The destinations are top-level product areas that belong in global navigation. | There are fewer than three or more than five primary destinations. |
| Required state | Closed state with a clear opener such as a menu button. | Default state with the local section hierarchy visible beside content. | Default state with all primary destinations visible. |
| Accessibility burden | Give the opener an accessible name such as Open navigation menu. | Use a labeled navigation landmark that distinguishes local side navigation from primary navigation. | Every icon must have a visible label or accessible name. |
| Common misuse | Hiding the app's most important destinations in a drawer on mobile. | Duplicating global navigation links in the side navigation. | Putting too many destinations into the bar. |