#  Clear and Consistent Navigation 

 



 ##  

  expand\_more  

 
  

 

Navigation of a website or app is critically important for all users, so designs should be clear and consistent across all pages and views. Organize menu items in a logical way with succinct labels. Before you start the visual design of the menu, it can be helpful to draft a sitemap to build a structured overview of all content.



 

---

 

##  Multiple Ways to Navigate 

To accommodate a wide variety of users, be thoughtful in creating designs that provide multiple ways to locate pages. These may include:

- Search
- Menu
- Breadcrumb
- Sitemap

Providing multiple means of navigation ensures that no matter what the user’s approach, they’ll find the experience to be seamless and intuitive.



 

    ![A page titled Group Walks has a small breadcrumb above it that reads Events and then Group Walks. An overlay covers half the screen and contains a search field and a vertically-stacked menu. Green checkmarks indicate each of the three navigation elements.](/sites/g/files/omnuum12446/files/styles/hwp_1_1__960x960_scale/public/2025-10/designers-navigation-multipleways.png?itok=dwLLqCBA) 

 



 

 This website offers three ways to navigate: breadcrumb, search, and menu.



   

---

 

##  Dropdowns and Other Hidden Panels 

In interactive design, important content and functionality are often contained in panels that are visually hidden. Examples of these panels include:

- Dropdowns
- Drawers
- Modals
- Accordions
- Tabs

Ensure any user interaction required to access hidden content is clearly labeled. Buttons to toggle visibility should be [keyboard accessible](https://accessibility.huit.harvard.edu/support-keyboard-interaction), and should not require hovering with a mouse.



 

    ![An accordion-style menu, each collapsed segment has an arrow icon pointing down. One segment that says Classes is expanded, and the arrow is pointing up.](/sites/g/files/omnuum12446/files/styles/hwp_1_1__960x960_scale/public/2025-08/designers-navigation-accordion.png?itok=j1mwyR0V) 

 



 

 The top-level items in this menu each have a visible label along with an icon to indicate they are expandable.



   

People use a variety of methods to interact with an interface, including:

- Mouse
- Keyboard
- Voice activation
- Sip and puff

Ensure interactions don’t involve complex or precise gestures that can be a barrier for users with motor or cognitive disabilities.



 

    ![Two examples of a site menu with a dropdown. The first is annotated with arrows indicating the path to navigate from one submenu to the next, involving two 90-degree turns. The second is simplified, with only one submenu in a dropdown, with a sidebar visible on the page behind it.](/sites/g/files/omnuum12446/files/styles/hwp_1_1__960x960_scale/public/2025-10/designers-navigation-panels_0.png?itok=gQwAAG1r) 

 



 

 The nested sub-menus in the first example can be quite difficult to navigate if hovering outside collapses them. Instead, the sub-menu can be activated on click instead of hover, and the second nested menu can be placed in a static sidebar.



   

---

 

##  WCAG 2.1 AA Success Criteria 

- [2.4.5 Multiple Ways](https://www.w3.org/WAI/WCAG21/Understanding/multiple-ways.html)
- [3.2.3 Consistent Navigation](https://www.w3.org/WAI/WCAG21/Understanding/consistent-navigation.html)