April 15, 2022 | Web Design
Website menus can make it easy (or hard) for people to find what they are looking for on your site. If they can’t find what they came for, they may bounce to a competitor instead. To create the best experience for your visitors, make sure they can navigate your site in a way that makes sense.
Your menus should be thoughtful and standardized.
A good menu starts with a sitemap
Organizing your site’s content should be one of the first things to consider when planning a website design. Start by listing out all the planned pages on your site. Then review the list to determine what pages can be grouped based on the content.
The relationship between pages looks like a family tree or an org chart. The top-level pages are parents, the pages under that are children, next are grandchildren, and so on. You can also call these top-level , second-level, third-level pages, etc.
You can use sitemap software or even just a spreadsheet to help you visualize the groupings and rankings.
Then decide what pages need the most visibility. These will appear in your main top-level menu.
That navigational menu should not have too many items, or it will be overwhelming. Depending on your website design, the number of items in this menu may be limited by the space available. Ensure you are only listing the most important pages. Sometimes less important top-level pages can be put into a menu that isn’t as prominent in the design, such as in the footer.
Seven is probably the most top-level pages you’ll want visible in your main menu, and fewer than that are better.
Next, you’ll organize your sub-pages underneath your top-level pages. When planning this structure, you’ll need to balance how deep you want people to dig against having too many top-level items.
Try to minimize the levels within your sitemap, so users don’t have to go digging and find what they need in minimum clicks. Unless you have a tremendous amount of content, you don’t want to go beyond third-level pages, and having only second-level pages is ideal for most business websites.
Menus should match the sitemap
Once you have organized your pages into a sitemap, your menus should match that. When menus stray from the organizational structure of your website, users end up confused.
The top-level pages will be in your main navigation bar. The lower-level pages will be accessible by dropdown menus, or other sub-navigation menus like you typically see in a sidebar.
People expect that if they click on a link in a sidebar (which shows your second-level pages), they will navigate to a page related to the one they are on. It’s off-putting to click a link in a sub-navigation that brings you to a completely different part of the site. It can be hard to figure out how you got there or get back to where you had been.
What if a user decides to come back later to complete a purchase and can’t find the page?
Website menu dos and don’ts
- Do start by organizing your content with a sitemap
- Do make the menus match the organization of your pages
- Do use expected logic like left to right, and top to bottom, when organizing menus. (Put your most important items to the left or at the top of your menu list.)
- Don’t link to pages outside your site without having them open in a new tab (and do open internal pages within the same tab)
- Don’t link to files like PDFs or images in your menu. A menu item should bring you to a web page.
- Don’t make users guess what part of the site a navigation item will bring them to.
WordPress can generate menus automatically for you, or you can create them manually.
The WordPress ‘menu’ function makes it easy to create and modify multiple menus on a site.
The advantage of these menus is that a WordPress admin has more customization options control, and can decide what’s included, the order, and create links to non-pages and external links. Another advantage is it’s easy to exclude pages; for example, landing pages you don’t want to include in your nav, you don’t add.
However, it’s easy for these menus to get out of sync with the content on your site. For example, when new pages are added to your site, you may forget to add them to the appropriate menu. And you’ll also need to remove them or update them later as content changes.
The alternative is to generate a dynamic menu based on your site structure automatically. This is done programmatically by building it into your site theme. If a new page or subpage is added, it is automatically added to your menu, dropdown, or sub-navigation with no action from the admin other than publishing the page.
Our approach to website menus and design
When deciding which type of menu to use, our most significant considerations are the menus’ complexity and how frequently changes are made.
If you have a site with a clear hierarchy that is not likely to change, then a dynamic menu automated through the theme is most manageable since the user will not need any maintenance if changes are made.
If the menu needs specialized links such as styled buttons, outbound links, a mix of pages or post types, or will frequently be changing and excluding pages, using the WordPress menus is best because it offers more versatility.