| 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 | 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 side navigation to help users move within a complex section without losing the current page's position in that section. | 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. | Five labeled destinations stay fixed at the bottom with Home selected, Alerts showing a small badge, and no action button mixed into the bar. |
| Bad UI | A hamburger opens a full-height list with no scrim, no close control, and no visible selected destination. | A sidebar mixes Dashboard, Reports, Sign out, Help, Team, API, Billing, and Marketing with no section grouping. | 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 product only has a few pages and does not need a hierarchy. | 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. |