Overview

Overview

The main navigation component is intended to be used as the primary means of navigation around the website. It typically accommodates the top level of the information architecture.

Most sites will require some form of navigation to help users find the information they’re looking for. While a horizontal navigation bar is just one option for navigation design, it's one of the most visible and familiar ways of helping users navigate a site.

The main navigation component is designed to work closely with the header component and collapses down to a conventional open/close menu button on smaller devices.

Another important aspect of the primary navigation is the mega-menu. The mega-menu is an optional addition to the primary navigation. It offers a curated list of level 2 child pages for any of the links in the primary navigation bar.

Horizontal navigation is limited to two colours either light or dark.

Default example

Please note the horizontal navigation component is best previewed in a new window. The live example is a replication of this site's current IA in the horizontal navigation format.

Mega-menu

Sites with large IA structure can opt to use the mega-menu. The mega-menu is an optional addition to the primary navigation. It offers a curated list of level 2 child pages for any of the links in the primary navigation bar.  Mega-menus are great choice for accommodating a large number of options or for revealing lower-level site pages at a glance.

On Desktop the mega-menus only has two colour options a light or a dark theme.

Level 2 Descriptions

Description text is an optional element that can turned on and off for all level 2 links.  It is limited to 130 characters so that it spans no more then 4 lines at its minimum width. If the text exceeds this length then the it will default to using ...  at the end of the sentence.  If descriptions are enabled there should only be a maximum of 9 level 2 links to avoid the design becoming to overwhelming.

Please note the the mega menu component is best previewed in a new window.

Usage guidelines for primary navigation

When to use

• When you have a limited number of top-level menu items: Horizontal menus are most effective when there are only a few main categories or sections (typically between 5-7). This keeps the menu clean, simple, and easy to navigate for users
• Corporate, news, or campaign sites: Horizontal navigation is particularly suitable for corporate websites, news portals, and campaign sites, as these typically have well-structured content and require easy access to the most important sections
• Sites that prioritise discoverability: Websites that want to prioritise discoverability and help users easily find important sections or pages can benefit from horizontal navigation, as it prominently displays the main categories at the top of the page

When not to use

• When you have a large number of top-level menu items: If your website has numerous main categories or sections, a horizontal menu might become cluttered and difficult to navigate. In this case, consider using a vertical navigation menu to accommodate more items
• When you need to conserve horizontal space: If your website has limited horizontal space due to a specific design or layout, a horizontal menu might not be the best choice
• When the content hierarchy doesn't require a primary navigation: If your website's content is simple and doesn't need a clear content hierarchy, a horizontal menu might not be necessary. In such cases, opt for simpler navigation options like in-page links, footer links and turning off the primary navigation completely

How to use

Do

• Show each choice only once: Duplicating options makes users wonder whether the 2 occurrences are the same or different
• Order the groups: You can do this using an inherent order among the features (as for a workflow) or according to importance, putting the most important or frequently used group at the top. Higher-demand links should appear farther to the left, and lower-demand links should appear farther to the right
• Consider the primacy effect: Items at the beginning of a list are more easily remembered
• Recency effect: Items at the end of a list (or things that just happened) are more easily remembered
• Keep navigation as simple as possible: The more items in your navigation, the more difficult the information is to remember and process for your visitors, typically, 5-7 items are recommended for horizontal navigation
• Keep words short and direct: For example, the base form of verbs ("shop") is usually better than gerunds ("shopping")
• Incorporate icons carefully: Icons can help when there are a lot of links to call attention to important tasks or categories, on horizontal navigation it is not recommend to include a leading icon on links that open a mega-menu as it is visually cluttered, increases horizontal space and may impede usability.
• Use descriptive, recognisable link labels: Don’t label links with jargon or unfamiliar terms
• Place important keywords at the beginning of headlines and subheadings to make it easier for users to quickly determine what the content is about (Nielsen, J 2008).

Don't

• Use generic labels: Don't use labels like "More" or "Menu" for menu items. Instead, use specific, descriptive text that helps users understand the purpose of each item
• Use vague or misleading labels: Don't use labels that are vague or misleading (e.g. "Services" instead of "Web Design Services")
• Overcrowd the navigation: Avoid putting too many links in the primary navigation. This can make it difficult for users to find what they're looking for
• Use obscure symbols or icons: Avoid using symbols or icons that may be confusing to users. Stick to simple, easily recognisable icons if you must use them
• Use inconsistent navigation throughout the site: Make sure the layout and design of your primary navigation is consistent throughout the site. Don't make users have to re-learn how to navigate your site every time they visit a new page

Usage guidelines for mega-menus

When to use

Mega menus are optional and the best approach is to think of mega menus as a method to enhance navigation. Mega menus shouldn't be integral to the navigation of a website.

When not to use:

Small websites: If your website only has a few pages or sections, a mega menu might be overkill. A simple top-level navigation bar could be sufficient and less overwhelming for users.

User behaviour: If your users typically come to your site knowing exactly what they're looking for, a mega menu might be unnecessary. For example, if users typically use the search function instead of browsing through menus, investing in a mega menu might not provide much value.

How to use

Sub-navigation follows much of the best practice as the primary navigation with a few additional considerations listed below:

• Show each choice only once: Duplicating options makes users wonder whether the 2 occurrences are the same or different. If you can't create a watertight case for its inclusion, you should remove it.
• Consider the journey we want the user to take with sub-navigation. Mega-menus should be curated space. In some cases mega menus can alter a user's journey. Consider if your menu item actually benefits from having a mega menu. For example mega menus can mean users skip important information if they're meant to follow a specific set of steps.
• Order the groups. You can do this using an inherent order among the features (as for a workflow) or according to importance, putting the most important or frequently used group in the top-left corner (assuming a left-to-right language like English).
• Items should be grouped vertically. A menu is not narrative text. It's scanned, not read. And scanning tends to proceed down a list in a vertical manner.