Primary and secondary navigation interfaces are key elements of site navigation, providing website visitors with links to the content they’re looking for that will enable them to easily achieve their goals. With seamless site navigation increasingly recognized as a key differentiator between good and bad user experiences — which in turn can seriously impact business success — knowing how to categorize content is no longer considered simply a “nice to have” but a critical part of good business practice.
If you’re new to site navigation and unsure which content links belong in your primary navigation menu and which belongs in your secondary navigation menu, don’t worry. In this article, we’re going to explain the difference between the two and how each can be used to benefit your users and improve their overall experience interacting with your website.
Here’s a list of what we’ll be covering so you can jump straight to the content which interests you the most:
- The importance of site navigation
- What is primary navigation?
- What is secondary navigation?
- What are the primary similarities and differences between primary and secondary navigation?
- How to apply secondary navigation
- Types of menus
- Tools for navigation design
- Examples of when designers have used secondary navigation
Let’s dive in!
The importance of site navigation
Site navigation plays a key role in how usable and user-friendly your website is to visitors and potential customers, but, even more importantly, the experience of navigating your site will likely determine if visitors return to your website, buy your products or services, or recommend your site positively to others.
A positive site navigation experience will leave visitors able to reach their goals and find what they’re looking for quickly and easily. When a website fails to enable this experience, not only do users feel like they have wasted their time, they are unlikely to return or recommend your site to others. Furthermore, a bad experience will not only lead to a loss of custom (both now and in the future) but could potentially lead to a negative review on a social media platform or reviews site, further detrimentally impacting your business.
For these reasons alone, when it comes to site navigation and content categorization, it’s crucial to think of your customer’s needs, wants, and goals first. You’ll need to put aside what your own preferences are and organize your site content to enable the most positive navigational experience for the website visitor in a way that is both delightful and logical to them.
What is primary navigation?
On a website, the primary navigation is the interface or menu that links to the content that the user is most interested in, with each linked descriptor leading users to an entire section within the website dedicated to that particular topic.
The primary navigation interface is usually placed at the top of each page of a website, including the homepage, enabling users to find the content they’re looking for with the fewest clicks and giving brands and businesses the opportunity to promote their most valuable content in a prominent location.
Content that a user considers to be the most important will vary from site to site. For example, an About Us page is unlikely to be considered primary content by a retail site and is therefore typically linked to under the secondary navigation interface. However, a charity or a school might consider its About Us page to be of great interest to those who want to donate money to its cause or attend the school, as this information will likely inform those decisions.
Check the example below of a vertical primary navigation menu, beginning with Home.
What is secondary navigation?
Larger websites or more complex digital experiences require both primary and secondary navigation to assist users in finding what they’re looking for and reaching their goals. Similarly to primary navigation interfaces, secondary navigation menus are made up of links to webpages, sections, and content. However, secondary navigation menus take users to content that is considered to be of lesser importance or interest to the user than what is listed in the primary navigation interface.
Learn more →Content that frequently (though not always) falls under secondary navigation include FAQs, contact pages, and jobs or careers pages. The example below is a good example of how to use a secondary navigation menu. The secondary navigation begins with ends with Search at the top of the page.
What are the differences between primary and secondary navigation?
The main difference between the two types of navigation is that primary navigation leads users to content that is of most interest to the user and secondary navigation leads users to content that is of lesser interest. There are some other differentiators, too. The primary navigation design element is also frequently used to lead website visitors to entire site sections and main pages of the site. Secondary navigation labels, on the other hand, direct website visitors to supplementary or supporting pages, which, although providing value to the user, are probably not the chief action the business is hoping the user will take.
How to apply secondary navigation
Your first step when applying secondary navigation to your website is to determine the importance to the user of each page of your website and each piece of content. There are numerous methods you can use to determine the importance of a page or section of a website, but it’s important that these decisions are not based on assumptions of what you personally think your users want.
As we have seen, a link to an About page will be, for one type of organization, an element that fits clearly into the secondary navigation menu or interface. However, this is not true for every type of company, and making assumptions will never lead to the most optimal outcome. Instead, you should focus on conducting thorough research and testing to find out what’s valuable to your specific target user groups.
Once your content has been organized, you’re in a much stronger position to decide what belongs under “primary” and what belongs under “secondary” navigation. From there, you have the information you need to optimally place your content.
The following steps will guide you as you apply secondary navigation to your website.
1. Perform a content inventory
A content inventory is a list of all the content you’ve got on your website. The inventory is a useful starting point when establishing exactly what you’re currently offering visitors to your site, how that content could be improved, and which pages might no longer be relevant to what your users’ needs and preferences are.
Although you won’t know what your users intentions are at this stage, having a compilation of everything you currently have on the site will make it easier later on when changes, additions, or deletions need to be made.
2. Study traffic and engagement
For each piece of content or page of your website, you’ll want to analyze its popularity with users. You can do this by looking at stats such as traffic, click-through rates, bounce rates, and time spent on page.
3. Speak to and observe users
Speaking directly to visitors of your website will help you determine which pages are valued most highly by your target audience. There are numerous methods out there for getting direct user feedback, including:
- User interviews
- Surveys
- Usability testing
4. Perform card sorting
Organizing the content of your site should always be done with your users’ preferences in mind. Card sorting is a technique used by UX designers that helps them segment information and content on a website in a way that makes sense to users. During a card sorting session, users are asked to categorize cards that have labels on them into groups that make the most sense to them.
By asking users to card sort, a business can better understand how easy or difficult their site is to comprehend and navigate. The UX team can then take steps to improve the structure of the site and its navigation to enable visitors to more easily find what they’re looking for.
5. Review your findings
Once you’ve completed data gathering, it’s time to review what your users have to say about the content on your site. Which content do they consider to be of high value and which is less important as they navigate your website? Which content helps them to achieve their goals and which is simply additional, or supporting, material?
Taking the data you’ve gathered via interviews, surveys, usability testing, and card sorting, you and your team should be able to draw conclusions about which links should be included in the primary navigation interface and which links are better placed in the secondary navigation menu.
Types of menus
Once you’ve identified the content which users value most highly and which is more supplementary, it’s time to decide how you want the links to this content to be displayed — via menus — on the page.
The most common ways of displaying primary and secondary menus are as separate menus and combined menus. Let’s take a closer look at each.
Separate menus
Separate menus are when a website designer decides to implement the primary and secondary navigation interfaces separately from one another, typically with the primary navigation menu horizontally or vertically placed, and the secondary navigation menu given its own placement at the discretion of the designer somewhere else on the page.
The primary navigation should be visually distinct from the secondary navigation menu and prominent to users landing on the website. This can be achieved with bold typography, large print sizes, and contrasting colors.
Combined menus
Combined menus are when the primary navigation and secondary navigation menus are part of the same interface. An example of this is when an online retailer shows Clothing in the primary navigation menu, and, when a user hovers over the link, the secondary navigation menu appears, displaying the types of clothing a user can choose from. From here, a user can click on a link labeled with a type of clothing that leads to a separate page.
Tools for navigation design
When designing the navigation of your website, there are a number of both information architecture and site mapping tools that you can take advantage of. They’ll help you with the layout of the elements on each page as well as how to organize information in such a way that enables users to find what they’re looking for and achieve their goals as seamlessly as possible.
From content organization and hierarchy through to navigation design and content audits, here’s a list of some of our favorite tools for nailing navigation design:
- DYNO Mapper: This tool will create a website inventory and build interactive sitemaps incorporating the visual hierarchy of your website.
- Lucidchart: A diagramming application, Lucidchart facilitates visual collaboration on diagrams, charts, and drawings, helping teams to improve processes and organize website content.
- OmniGraffle: A tool for creating diagrams, rapid prototypes, and assisting with the design and navigation of your website.
- StickySorter: StickySorter is a tool for helping teams to organize and categorize virtual sticky notes as part of affinity diagramming sessions. This tool is also useful for organizing and prioritizing information or website content.
- Treejack: A popular tool with UX designers for navigation design assistance, Treejack helps teams to identify and solve user challenges through the evaluation of the findability and hierarchy of a website’s content. The tool also facilitates testing, iteration, and design validation.
Examples of when designers have applied secondary navigation
Now that we’ve covered exactly how you can categorize your content and the tools that can help you do that, let’s take a look at how different designers have applied secondary navigation to their websites.
Mockplus
Mockplus has its primary navigation at the top of the page, starting with Products.
Its secondary navigation bar drops down from the primary navigation bar to show links to more content. The site is using a combined menu approach, incorporating both primary and secondary menus in the same space.
The WWF
The WWF organizes its content slightly differently. It has its primary and secondary navigation menus visible at the top of the page, with the typography and colors indicating which content takes priority. The menu beginning Our Work is the primary navigation, while the menu beginning Donate is the secondary navigation.
Haywood Golf
Haywood Golf has gone for one of the simplest approaches to primary and secondary navigation. Both menus are clearly visible on the homepage, but the primary navigation is much more prominent, indicating to the user that this is most likely where they’ll find the content they’re looking for.
Our Story, written in bold, large, dark print at the top of the page is the first link in the primary navigation menu, while Gift Cards, written in a smaller, soft gray print, is the first link in the secondary navigation menu.
Final thoughts
Although frequently neglected, site navigation is actually one of the most important factors to consider when designing and developing your site as it significantly reduces user hurdles and friction, creating a much more positive user experience.
When this is the case, users are significantly more likely to return to your site and recommend it to others. Through the implementation of primary and secondary navigation menus to organize and display links to your content, your site navigation — and therefore your users’ experiences — will be significantly improved: website visitors will be able to find what they’re looking for faster and achieve their goals with ease.
Header image source: IconScout
LogRocket: Analytics that give you UX insights without the need for interviews
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — try LogRocket today.
