Comparison file · menus
Dropdown Menu vs Context Menu vs Navigation Menu vs Tabs vs Breadcrumbs vs Pagination vs Scrollspy vs Steps
Distinguish commands, object-context actions, and persistent navigation.
Run the diagnosisFast decision
Start with the behavior that changes the build
Dropdown Menu
Do not use a menu to collect a form value when Select or Combobox semantics are expected.
Open field note ↗Context Menu
Provide an equivalent visible and keyboard-accessible path; pointer context cannot be the only route.
Open field note ↗Navigation Menu
A navigation menu is not automatically an ARIA menu. Native links and disclosures are often simpler.
Open field note ↗Tabs
A tab panel is a container for content, not the content itself. Separate navigation from content switching and ensure only one panel is visible.
Open field note ↗Breadcrumbs
A breadcrumb trail is navigation, not a progress indicator. Use a Stepper or Progress Bar for a sequential task flow.
Open field note ↗Pagination
Pagination divides a single long list into pages. Do not confuse it with a step indicator for a multi-step process.
Open field note ↗Scrollspy
Scrollspy reflects document position; Tabs activate one panel and should not be used for a page whose sections all remain in the document.
Open field note ↗Steps
Steps represent named stages in one task; use Pagination for collection pages, Breadcrumbs for hierarchy, and Progress Bar for an unnamed percentage.
Open field note ↗Behavior matrix
Compare contracts, not silhouettes
| Decision | Dropdown Menu | Context Menu | Navigation Menu | Tabs | Breadcrumbs | Pagination | Scrollspy | Steps |
|---|---|---|---|---|---|---|---|---|
| Primary purpose | Provide a compact set of actions from an explicit trigger. | Expose commands that apply to a specific object without occupying persistent space. | Help users understand and move through the product information architecture. | Let users switch between related views or content sections without navigating to another page. | Help users understand their position in a site structure and navigate to ancestor levels without using the back button. | Let users navigate a large collection one page at a time without overwhelming the viewport. | Help readers understand their position in a long page and jump directly to another section. | Show where users are in a multi-stage workflow and what stages are complete or still ahead. |
| Trigger | A menu button activated by click, Enter, Space, or arrow key. | Right-click, context-menu key, Shift and F10, long press, or an equivalent visible button. | Persistent links or disclosure controls for nested destinations. | Click or keyboard selection of a tab label. | Always visible as secondary navigation; no interaction required to reveal. | Always visible below or above a paginated list; links are always present. | Scrolling or following a same-page fragment link changes the current section. | The current stage changes when the user completes, revisits, or is allowed to navigate to another task step. |
| Value contract | May be constrained or free-form; specify the policy. | May be constrained or free-form; specify the policy. | May be constrained or free-form; specify the policy. | May be constrained or free-form; specify the policy. | May be constrained or free-form; specify the policy. | May be constrained or free-form; specify the policy. | May be constrained or free-form; specify the policy. | May be constrained or free-form; specify the policy. |
| Keyboard | Arrow keys navigate, Enter or Space activates, Escape returns to the trigger. | Must have a keyboard trigger and standard menu navigation. | Every destination and disclosure control is keyboard reachable. | Tab enters the list; Left/Right or Up/Down arrows move between tabs; Enter or Space activates; Home and End move to first and last tabs. | Each link is a standard keyboard-operable anchor; the trail itself has no composite keyboard model. | Every page link is keyboard operable; no custom key model beyond normal link behavior. | Links work as ordinary same-document navigation, and programmatic scrolling preserves visible focus and reduced-motion preferences. | Interactive step labels follow normal keyboard order and expose the controlled step content; the current item is programmatically identified. |
| Persistence | Temporary while choosing a command. | Temporary while selecting a command. | Primary structure remains available across pages. | Selected tab state should persist during the page session when useful. | Always visible while on the page; normally not collapsible. | Persists while browsing the paginated content. | Remains available while reading the document and tracks one current section. | Reflects one source of truth for completed, current, and upcoming stages. |
Discriminating questions
Ask only what changes the result
- Do the items navigate to places or execute commands?Navigate to places / Execute commands
- Is the menu opened from right-click, long press, or a specific object?Yes / No
Implementation consequences
Turn the comparison into a build decision
The final choice must explain both the selected contract and the alternatives it excludes.
Name the task
Distinguish commands, object-context actions, and persistent navigation. Write the user goal before choosing any component from a library.
Freeze the decisive dimensions
For this group, compare Primary purpose, Trigger, Value contract, Keyboard, Persistence. Do not allow visual similarity to replace those requirements.
State the exclusion
Record why the closest rejected pattern fails. That reason helps a coding agent avoid silently substituting a familiar but incompatible component.
Verify the behavior
Open the selected pattern reference, copy its acceptance checks, and test focus, keyboard, dismissal, placement, content, and mobile behavior in the real interface.
Frequently asked questions
Dropdown Menu vs Context Menu vs Navigation Menu vs Tabs vs Breadcrumbs vs Pagination vs Scrollspy vs Steps questions
Direct answers based on the reviewed behavior contract above.
What is the main difference between Dropdown Menu, Context Menu, Navigation Menu, Tabs, Breadcrumbs, Pagination, Scrollspy, Steps?
Distinguish commands, object-context actions, and persistent navigation. The decisive dimensions on this page are Primary purpose, Trigger, Value contract, Keyboard, Persistence. Read each column as a behavior contract, not as a visual style recommendation.
How do I choose among Dropdown Menu, Context Menu, Navigation Menu, Tabs, Breadcrumbs, Pagination, Scrollspy, Steps?
Begin with the required user task, then answer the discriminating questions above. Choose the pattern whose purpose and behavior match the evidence, and explicitly reject alternatives whose focus, input, modality, persistence, or structural contract would break the task.
Can two of these terms apply to the same interface?
Sometimes. This taxonomy includes semantic patterns, composite patterns, presentation forms, behavior variants, message channels, and generic behavior labels. A presentation term and a semantic contract can coexist, so specify each required property instead of forcing every term into a flat either-or choice.
How should I verify the final implementation?
Open the selected pattern reference and run its observable checks. At minimum, confirm the configured trigger, dismissal, focus, keyboard behavior, interactive content, placement, and mobile adaptation. Also verify the linked official or first-party source against the library you ship.