| UI or UX | UI + UX - Persistent composite command bar with menus and submenus | UI + UX - Button-controlled popup menu of actions or links | UI + UX - Large grouped disclosure panel under top-level navigation | UI + UX - Persistent top-level navigation shell |
| UI guidance | Render a labelled command menubar with stable top-level command groups, visible focused item, open submenu, menu items, checked items, disabled items, separators, shortcut hints, and nested submenu indicators. | Render a named button trigger, visible opened state, controlled popup, menu items, active item styling, disabled item state, separator or section grouping, and a safe way to distinguish destructive commands. | 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. |
| UX guidance | Use a menu or menubar when users benefit from a stable command system that organizes many related functions into predictable groups such as File, Edit, View, Insert, and Format. | Use a menu button when users need to reveal a short contextual set of commands or links from a single trigger without leaving the current object or toolbar context. | 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. |
| Good UI | A document editor exposes File, Edit, View, and Insert as a persistent menubar, with Save, Rename, Export, Undo, Paste unavailable, Show comments checked, and Theme as a nested submenu. | A table row has a Report actions button that opens a compact menu with Open, Rename, Duplicate, Archive, and an unavailable Export item. | 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. |
| Bad UI | A marketing site header marks Home, Products, Blog, Pricing, and Sign out as a menubar but behaves like normal links. | An unlabeled ellipsis opens a loose panel of buttons, inputs, links, toggles, and destructive commands with no active item. | 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. |
| Good UX | A user tabs into File, presses Right Arrow to Edit, Down Arrow to open Edit commands, arrows to Undo, activates it, and focus returns to the editor canvas. | A user opens Report actions, arrows to Duplicate report, activates it, and focus returns to the Report actions trigger with a status update. | 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. |
| Bad UX | A user expects Right Arrow to move from File to Edit, but the page scrolls because focus is not managed as a composite widget. | A user tabs into a menu and lands in a text input because the menu contains unrelated form controls. | 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. |
| Best fit | A complex application or editor has many stable commands organized into known groups. | A local object or toolbar has three to eight secondary commands. | A top-level navigation section has many related child destinations. | Users revisit several top-level product or service areas. |
| Avoid when | The interface is ordinary site or product navigation. | The job is choosing a form value, selecting several values, or browsing a long list. | The section has only a few child links. | The flow has a single ordered transaction where navigation would distract or cause abandonment. |
| Required state | Persistent closed menubar state with labelled top-level command groups. | Closed trigger state with visible or accessible name. | Closed state with a clear top-level trigger and visible submenu indicator. | Default state with product or service identity and top-level links. |
| Accessibility burden | Use role menubar for a persistent application command bar and role menu for submenus. | Use an actual button for the trigger when possible. | Use a labeled navigation landmark and disclosure buttons for triggers that open panels. | Use a labeled navigation landmark for primary navigation. |
| Common misuse | Using role menubar for a normal website header or product navigation row. | Using a menu button for long value selection that should be a select, listbox, combobox, or multi-select. | Using a mega menu as a complete site map. | Listing every page or admin object in the global nav. |