Menus and Navigation Done Properly
· 4 min read
You've learned how to create content with Posts, Pages, and the block editor.
You've learned how to create content with Posts, Pages, and the block editor. But content is only useful if visitors can find it, which brings us to navigation menus, one of the most under-thought parts of many beginner WordPress sites.
What A Navigation Menu Is
A navigation menu in WordPress is a named list of links, usually pointing to Pages, Posts, custom URLs, or categories, that you build in Appearance > Menus (classic themes) or directly within the Site Editor (block themes). Importantly, a menu is not automatically generated from your content; you build it deliberately, choosing exactly what appears and in what order.
This is a key point beginners miss: creating a Page does not automatically add it to your navigation. You have to go create or edit a menu and add that Page to it yourself. It's common for a new site to have a polished "Services" page that nobody can actually find, because it was never added to any menu, only ever linked from the homepage by accident.
When building a menu, WordPress organizes items by "locations," defined by your theme: things like "Primary Menu," "Footer Menu," or "Mobile Menu." A single menu you create can be assigned to one or more locations, but different themes support different location names and different numbers of locations, which is why switching themes sometimes seems to "lose" your menu, when really it's just not assigned to any location the new theme recognizes.
Menu Locations And Dropdown Items
Inside the menu editor, you can nest items to create dropdown submenus, by dragging a menu item slightly to the right underneath a parent item. This is where Pages' parent-child structure (mentioned back in the Pages vs Posts lesson) often gets mirrored in the menu: a "Services" top-level item with "Consulting" and "Workshops" nested beneath it as a dropdown.
A practical example: Tony Stark Consulting might have a Primary Menu with Home, About, Services (with a dropdown for Consulting and Workshops), Blog, and Contact. Each of those menu items points to a Page, except Blog, which typically points to your designated posts page, a setting found under Settings > Reading.
Common Menu Mistakes
Beginners often make menus too long, cramming every page they've ever created into the main navigation. A long menu overwhelms visitors and makes the important pages harder to spot. A better approach: keep the primary menu to the handful of pages that matter most for a first-time visitor, and put secondary links (like a detailed Privacy Policy) in a footer menu instead, where they're available but not competing for attention.
Another common mistake: using "Custom Links" in the menu pointing to a full absolute URL like https://yoursite.com/about, instead of selecting the actual About page from the Pages tab in the menu editor. This works, technically, but it breaks if you ever move the site to a new domain, whereas linking the actual Page object updates automatically no matter what domain the site lives on.
If your theme is a block theme, menus often live inside a Navigation block, edited directly in the Site Editor rather than a separate Menus screen. The underlying concept, a deliberately chosen list of links, stays the same; only where you edit it changes.
Primary Menu
├── Home
├── About
├── Services
│ ├── Consulting
│ └── Workshops
├── Blog
└── Contact
Breadcrumbs And Mobile Navigation
One more thing worth noting: WordPress also supports a "breadcrumb" style of navigation on some themes and SEO plugins, showing a trail like Home > Services > Consulting near the top of a page. This is separate from your main menu, and it's generated automatically from a Page's parent-child relationships rather than being built by hand, which is yet another reason that hierarchy, set up properly back in the Pages lesson, pays off in places you might not expect.
It's also worth checking your menu on an actual phone, not just by shrinking a browser window, before calling navigation "done." Many themes swap the full menu for a hamburger icon on small screens, and dropdown submenus sometimes behave differently with touch taps than with a mouse hover. A menu that looks perfect on desktop but requires three confused taps to reach "Contact" on a phone is a common, entirely avoidable mistake, especially since a large share of visitors to a small business site like Tony Stark Consulting's will likely arrive on mobile first.
Try It Yourself
Try it yourself: build a primary menu with no more than five or six top-level items for your own site, using actual Pages rather than typed-in URLs, and assign it to your theme's primary menu location. Then check your site on a phone-sized screen; many themes collapse menus into a hamburger icon, and it's worth confirming yours still works correctly there.
KEEP READING