Mobile Website Menus: 6 Practical Navigation Checks

The six points in the video

This is a silent video. The headings, explanations and labels below reproduce the information on screen.

1. 1

   Step 1: Label the menu opener

   0:18

   Use a clear menu button with an understandable label.

   On-screen labels: Menu control; Accessible name; Visible state.

2. 2

   Step 2: Check open and close behaviour

   0:30

   The visitor needs a reliable way to reveal and dismiss the menu.

   On-screen labels: Open the menu; Close the menu; Return to the page.

3. 3

   Step 3: Use clear destination labels

   0:42

   Name pages in words your customers recognise.

   On-screen labels: Service names; About the business; Contact details.

4. 4

   Step 4: Try the menu with a keyboard

   0:54

   Hidden navigation should become usable when it is opened.

   On-screen labels: Keyboard access; Visible focus; Logical order.

5. 5

   Step 5: Check small screens

   1:06

   Important options must remain reachable when space is limited.

   On-screen labels: Small screen; Long labels; Reachable destinations.

6. 6

   Step 6: Follow important routes

   1:18

   Opening the menu is only the start of a working journey.

   On-screen labels: Correct page; Expected destination; Useful next action.

Common questions

Go further