| UI or UX | UI + UX - Large grouped disclosure panel under top-level navigation | UI + UX - Persistent top-level navigation shell | UI + UX - Dismissible slide-in navigation sheet |
| UI guidance | Use a mega menu as a wide disclosure panel attached to a top-level navigation item, with grouped headings, scannable link columns, and a clear relationship to the trigger that opened it. | Render product or service identity, a compact set of top-level destination links, current-section state, separate utility controls, and responsive overflow behavior. | 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. |
| UX guidance | Use mega menus to expose a deep hierarchy before users commit to a destination, reducing drill-down when a section has many related pages. | Help users move between major product or service areas while preserving orientation, local state, and confidence that they are in the right service. | 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. |
| Good UI | A Products trigger opens a full-width panel with grouped columns for Build, Operate, Analyze, and Govern, each with concise links and one highlighted featured destination. | A header shows the product name, Dashboard, Projects, Reports, Billing, a More overflow, and separate Help and account controls. | A mobile app bar menu button opens a left modal drawer with Inbox selected, grouped labels, account switcher, and a visible scrim behind it. |
| Bad UI | A mega menu opens for a section that only has three links, adding a large empty panel instead of a simple dropdown. | A crowded row mixes every page, account action, language selector, and sign-out link. | A hamburger opens a full-height list with no scrim, no close control, and no visible selected destination. |
| Good UX | A user opens Products, scans grouped links, selects Data pipeline, and the panel closes while the destination becomes the current section. | Users switch from Projects to Reports, return to Projects, and find their project draft count preserved. | Users open the drawer, select Sent, the drawer closes, and Sent becomes the visible destination while Inbox scroll state is preserved. |
| Bad UX | The panel appears only on hover, closes while the pointer crosses a gap, and forces the user to restart navigation. | Switching top-level sections clears filters or drafts without notice. | Selecting a drawer item changes the destination behind the sheet but leaves the drawer covering the new page. |
| Best fit | A top-level navigation section has many related child destinations. | Users revisit several top-level product or service areas. | A constrained app needs access to more destinations than fit in the visible navigation surface. |
| Avoid when | The section has only a few child links. | The flow has a single ordered transaction where navigation would distract or cause abandonment. | Users need constant visibility of the local hierarchy while working in a section. |
| Required state | Closed state with a clear top-level trigger and visible submenu indicator. | Default state with product or service identity and top-level links. | Closed state with a clear opener such as a menu button. |
| Accessibility burden | Use a labeled navigation landmark and disclosure buttons for triggers that open panels. | Use a labeled navigation landmark for primary navigation. | Give the opener an accessible name such as Open navigation menu. |
| Common misuse | Using a mega menu as a complete site map. | Listing every page or admin object in the global nav. | Hiding the app's most important destinations in a drawer on mobile. |