Menu and Navigation design examples

What navigation menu design patterns work across different devices and contexts?

Navigation menus are the most frequently used element in website and app design — and the most penalized for poor design. A confusing navigation pattern forces users to make exploratory clicks rather than direct paths, adding friction to every task in the product. The best navigation design is the one that requires the least thought: users should arrive at their destination without awareness of the navigation structure itself. This requires deep understanding of the user's mental model, not just the site's information architecture.

When should mobile navigation use a hamburger menu vs. a persistent tab bar?

Tab bars (bottom navigation showing 3–5 primary destinations with icons and labels) outperform hamburger menus on mobile for high-frequency navigation — research consistently shows higher engagement and task completion rates when destinations are visible rather than hidden. Use hamburger menus only when: the primary content is the focus (reading, video, games) and navigation is occasional, or when the navigation structure has more than 7 top-level destinations that don't group into 3–5 meaningful tabs.

What are the accessibility requirements for navigation menu design?

Navigation menus have specific WCAG 2.1 AA requirements: keyboard navigation must work fully without a mouse (Tab key for focus, Enter/Space to activate, Escape to close dropdowns). Dropdown menus must remain open when the mouse moves from the trigger to the menu — a tiny gap in the hover zone causes dropdowns to close in transit. Focus indicators must be clearly visible (3:1 minimum contrast ratio). Skip navigation links are required for screen reader and keyboard users.