Menu Design
Checklist
Make Navigation Visible Clear Text Labels
Use visible navigation menus on Use clear, specific, and familiar
larger screens to avoid hiding them wording for link labels to enhance
under a hamburger menu. understanding and relevance.
Place primary navigation menus in Avoid Internal Jargon: Use terminology
the header on websites and on the that is common and understandable to
left side in applications. the general user, not just to insiders
within the organization or industry.
Include utility navigation above
primary navigation and search areas. Use Descriptive Labels: Choose
menu labels that clearly describe
Locate local navigation along the the content or destination, helping
left-hand side on desktop websites. users to anticipate what they will
find upon clicking.
Ensure footer menus are positioned at
the bottom of the screen and include Keep Labels Concise: Aim for brevity
categories for secondary personas. to enhance scanability, using the
fewest possible words to convey
the necessary information.
Contrast and Visibility
Standardize Terms Across the Site:
Use link text colors that contrast Ensure consistency in terminology
highly with the background across all navigation elements to avoid
to ensure visibility and legibility. confusing users with different labels
for the same content or function.
Avoid covering the screen with menus
when megamenus or submenus are
open on larger screens. Make link labels easy to scan by
left-justifying text in vertical menus
and front-loading key terms.
Communicate the Current Location
Indicate the user’s current location
within the menu using visual cues
like breadcrumbs, H1/H2s, and
underlining or highlighting the
current navigation category.
Provide local navigation menus for
closely related content to facilitate
easy browsing of related sections.
Menu Design
Checklist
Menu Design and Interaction Accessibility and Usability
For large websites, display several Consider sticky menus for long
navigation tiers in submenus to pages to maintain accessibility
simplify deep navigation. without excessive scrolling.
Use Visual Cues: such as images, Optimize the placement of
icons, or formatting differences frequently used commands to
to increase information scent and reduce physical effort in navigation.
aid in menu navigation. To increase information scent and
aid in menu navigation.
Make menu links large enough
to be easily tapped or clicked. Use Descriptive Labels: Choose
menu labels that clearly describe
Clearly signify submenus with the content or destination, helping
a caret or arrow icon to indicate users to anticipate what they will
expandability. find upon clicking.
Use click-activated rather than
hover-activated submenus to
improve accessibility across devices.
Avoid multi-level cascading menus;
use mega menus or landing pages
instead.