Menus and navigation

Module 4: Creating content · Reading time: 7 minutes

Learning objective: After this lesson you can build a clear menu, both in a block theme and in a classic theme, and you know what makes a good menu.

Key concepts: navigation block, Site Editor, Appearance > Menu's, menu location, submenu, custom link, mobile menu, footer menu, link text, accessibility

Two ways, depending on your theme

Where you create the menu depends on your theme (lesson 5.1):

• Block theme: the menu is a navigation block in the header of the website. You edit it in the Site Editor (Appearance > Editor > Navigation, or in the Header template part).
• Classic theme: you create the menu under Appearance > Menu's and choose a menu location that the theme offers, such as "Main menu" or "Footer".

Don't see Menu's under Appearance, only Editor? Then you're using a block theme. That's a common source of confusion after switching themes: "my menu is gone". The old menu still exists (it's stored in the database as a list of menu items), but the new theme looks in a different place. In the Site Editor you can import an existing classic menu into the navigation block.

What you can add

A menu item can be:

• a Page or Post on your website;
• a category (it then links to the archive for that category);
• a custom link: any address, including to another website, or an anchor within a page (/diensten/#prijzen);
• in a block theme, also other blocks within the navigation, such as a search field, social media icons or an "Afspraak maken" button.

You can nest menu items as a submenu: in a classic theme by dragging them slightly to the right, in the navigation block with "Add submenu" or by dragging one item onto another.

A menu item links to a page, but has its own label. If you later change the page's title, the label in the menu doesn't automatically update (not in a classic menu; in the navigation block it depends on how you added the item). So after changing a title, check the menu as well.

A good menu

A menu isn't a table of contents for your entire website. It's a signpost to the few places most visitors want to go. A few guidelines:

• Few main items: around five to seven. More doesn't fit on a phone anyway, and visitors won't read it.
• At most one level of submenu. A submenu within a submenu is hard to use on a phone and confusing for screen readers.
• A submenu heading is also a link. In many themes, clicking "Diensten" opens the submenu, but "Diensten" is itself also a page. Make sure that page exists and shows something sensible, or make it clear that the item is only a heading.
• Ordinary words that visitors would actually use: "Prijzen", not "Onze investeringsmogelijkheden".
• Contact and the main call to action (book an appointment, order) always reachable, often on the right of the menu or as a button.
• Legal links (Privacy Policy, terms and conditions, cookie settings) belong in a footer menu, not in the main menu. But always findable, on every page (lesson 9.3).

Mobile and accessible

On a phone, the menu usually collapses into a button with three lines (the "hamburger menu"). With the navigation block you set when that happens (always, or only on small screens). Always test it on a real phone:

• Can you tap every item with your thumb, without accidentally hitting the item next to it?
• Do submenus open with a tap, and close again?
• Does the menu close once you pick an item?

For accessibility (visitors using a screen reader or only the keyboard), pay attention to:

• Clear link text. "Read More" or "Click here" says nothing if a screen reader reads out all the links in a row. "Read more about our opening hours" does.
• Keyboard operation: tabbing through the menu, pressing Enter to open an item. Most themes and the navigation block do this well; custom menus built with scripts often don't.
• A link to another website should preferably open in the same window. If it must open in a new window, say so.

Other navigation

Besides the main menu, these elements help visitors find their way:

• a search field (the search block), especially on a website with many posts;
• breadcrumbs ("Home > Diensten > Webdesign"), often provided by an SEO plugin or the theme;
• internal links in your text to other pages (also good for search visibility, lesson 9.2);
• a helpful 404 page: with a search field and links to the most important pages instead of just "not found". With a block theme you edit this as the "404" template in the Site Editor.

In practice: what it looks like in a panel

In the WordPress Dashboard:

• Block theme: Appearance > Editor > Navigation. Choose the menu, add items with the plus icon, drag them into the right order, and in the navigation block's settings choose when the mobile menu appears.
• Classic theme: Appearance > Menu's. Create a menu, tick pages on the left and click Add to menu, drag to reorder, and tick the menu location at the bottom. Save.

Summary

• In a block theme you build the menu with the navigation block in the Site Editor; in a classic theme under Appearance > Menu's with a menu location.
• A menu points the way to a few important places: few items, at most one level of submenu.
• Legal links belong in a footer menu, always findable.
• Test the mobile menu on a real phone and use link text that makes sense on its own.
• A search field, internal links and a helpful 404 page complete the menu.

Quiz

Exercise

Exercise D4.3: A menu that works. Create (or improve) your website's main menu with at most seven main items, one submenu and one custom link, plus a footer menu with your Privacy Policy. Test the mobile menu on your phone and using only the keyboard (Tab and Enter). Tick off what works and note: what type of theme you have (block or classic), where you built the menu, and which link text you improved and how?

Further reading

We don't yet have our own articles on working within WordPress itself; the official WordPress documentation is extensive.

• Navigation block (wordpress.org, English): https://wordpress.org/documentation/article/navigation-block/
• Menus in classic themes (wordpress.org, English): https://wordpress.org/documentation/article/appearance-menus-screen/
• Site Editor (wordpress.org, English): https://wordpress.org/documentation/article/site-editor/