The best websites are navigable websites.
While we can’t know exactly what every visitor is looking for, we do know that the majority prefer click navigation. Clicking links is faster and requires less effort than performing a site search, which means users will look to your menus for guidance in order to find what they need.
We also know that not all website content is made equal. In your navigation, you’ll want to highlight pages that users want most, though this doesn’t necessarily mean obscuring your less-frequented pages either.
So, if your site hosts a healthy amount of content of varying importance, it’s useful to divide your navigation interface into primary navigation and secondary navigation. What do these terms mean, and how do they apply to your website?
In this post, we’ll learn the purpose of and difference between primary and secondary navigation on websites, then finish by reviewing two common ways to implement them.
Primary navigation is the principal navigation interface on a website. It links to the most important website pages and appears prominently at the top of the homepage and other pages. Primary navigation helps users to quickly find what they’re most likely to want, with minimal searching and clicks.
Though most multi-page websites have primary navigation built into the user interface, the linked pages will vary. For instance, the primary navigation of an ecommerce website could link to different product sections, a pricing page, and/or a support page. Take Apple’s homepage — users could land here in search of any Apple product, so the primary navigation links to their product category pages:
On the other hand, a nonprofit might feature the “About Us” and “Donate” sections in its primary navigation. It’s about providing a gateway to in-demand pages.
Secondary navigation appears in conjunction with primary navigation, often on larger, more complex websites. Secondary navigation comprises the links to content that is less important than primary pages, but should still be easily accessible from any location on the site.
Secondary navigation lets users access this niche content without digging too deep — you might place “About Us”, “Frequently Asked Questions”, contact information, and/or policy pages in this category.
For example, the World Wildlife Fund incorporates both primary and secondary navigation interfaces into its website header. Notice how the primary and secondary menus are separate, and the primary menu is signaled by its placement next to the logo and all-caps typography:
If you’re in the process of structuring your website’s navigation and believe you’ll need both primary and secondary navigation, first is to determine whether each link is of primary or secondary importance.
This step should be informed by metrics and your user base, rather than your own opinions. You can sort your site’s content by importance with a few methods, including:
After reviewing your content, you should have a better sense of where users tend to go from the homepage. You might also realize that some pages can be merged or removed, making for a simpler, tidier site.
To implement primary and secondary navigation in your website’s front end, you can try a combined or separated menu approach.
In a combined menu, users access the secondary navigation through the primary navigation, in a single dynamic menu display. On page load, only primary navigation is visible within the menu. When a user interacts with a primary menu — through a mouse hover-over or button click/press — secondary links appear in a vertical drop-down or horizontal pop-out display.
Clothing retailer Madewell structures their navigation interface this way. Each primary link reveals a menu of secondary options:
A mouseover trigger works well for opening dropdowns on desktop, but not so much on touchscreen devices or assistive devices. The best way to accommodate for this is by setting your dropdowns to also expand on touch events, click events, and hitting the “enter”/”return” key.
This dynamic menu technique is common because it helps users access hierarchical content. By design, it shows where each page belongs within your site structure, and which categories contain which subcategories. A combined menu also frees up page space by hiding secondary links, though this may be an obstacle for users who prefer to view all of their options at once.
If you can spare the space, consider separating your primary and secondary navigation into two static menus instead. In this approach, the primary navigation menu is arranged horizontally at the top of the page or vertically on one side. Secondary navigation has its own menu, with placement and layout up to you.
Separated primary and secondary navigation menus should be visually distinct from each other, the primary menu sized larger and placed more prominently on the page.
This Canadian golf retailer implements the dual-menu approach nicely, and combines it with a vertical menu layout:
With both approaches, make sure to keep the format across your entire website. Inconsistent navigational elements make for an unintuitive experience. It will disorient and frustrate visitors if they can’t find their desired page.
Navigation is one of the most significant factors to consider in any website design. Unfortunately, it’s also one of the most challenging to pull off successfully — there are no clear-cut guidelines and a lot of considerations. Every site’s navigation methods will differ by content type, visitor base, and personal taste.
But, with some trial, error, and testing, you may find that a combination of primary and secondary navigation is the perfect compromise to streamline and enhance the user experience, reduce browsing friction, and drive conversions and sales.