Skip to main content
article

Understanding types of navigation


In this article we're showing the types of navigation used on our sites or available through custom components in AEM.

In this article:

Global navigation

The global navigation is a group of links that appear in the same region on all pages of a website. The global navigation gives web visitors a consistent way to navigate to important places of the website. Our courtesy navigation acts as a global navigation,  encompassing the key entry points to the website to help streamline the user experience.

Highlight of the courtesy navigation in the Concordia University main header Courtesy navigation

Top navigation

The top navigation can be one of two types: main navigation and subsite navigation. The top navigation on the main Concordia website is called the main navigation. The top navigation on the Concordia subsites is called the subsite navigation. The top navigation must clearly and concisely convey the mission and/or represent the main product/service offerings of a unit.

The main navigation includes broad categories that are meant to represent Concordia at a high level.

Highlight of Concordia's main navigation Main navigation

The subsite navigation features the specific offerings of that corresponding unit - and should be thought of like a table of contents for that unit. The categories in the top navigation should be defined through an outsider's perspective and should use standard names and not jargon. 

Highlight of the subsite navigation for Graduate admissions Subsite navigation for Graduate admissions
Highlight of the subsite navigation for Summer stays Subsite navigation for Summer stays

Breadcrumb trail

The breadcrumb trail provides quick links for the pages in the visited path back to the Concordia homepage (concordia.ca) and shows another way to see the structure of the Concordia website. Note that we should not rely on breadcrumbs to serve as the only way to navigate back to the parent page. This is also true for the browser's ‘Back’ button!

Highlight of the breadcrumb trail for Summer accommodations Breadcrumb trail for Summer accommodations

Right side navigation

The Secondary Navigation component can be used to display the navigation vertically. By convention, the right side navigation should be located at the top of the right sidebar, which is only applicable to the Right Sidebar template. The right side navigation can be used for sections too small in terms of content to be turned into subsites. It can also be used as an extension of the top navigation. However, this is often the sign that the content structure is too deep.

Highlight of the right side navigation for Pension plan Right side navigation for Pension plan

In the near future, we’ll have a design for the right side navigation that will work with the Full-width and Full window templates.

Horizontal navigation

The Secondary Navigation component can also be used to display the navigation horizontally. The component gives us the option to show/hide and to rename the root (home) category. 

Highlight of the horizontal navigation for the Collaborative Laboratory Call Horizontal navigation for the Collaborative Laboratory Call

So, for sections where the top navigation will not (or cannot) be used, the horizontal navigation might be a good option.

Anchor navigation

Anchor links enable us to jump to specific spots on a page. An anchor navigation should be used when a page is relatively long but not long enough to justify splitting the content into separate pages.

The use of anchors can help bring structure to a page – like we have done for this article!

Footer navigation

The footer navigation should repeat the top navigation categories and include other useful links that could have been missed from the header or the content area. Like the breadcrumb trail, the footer cannot be used as the primary navigation. However, it can help improve the user experience.

Image of the JMSB custom footer JMSB custom footer

With so many navigation options available in AEM, there is certainly a model that can work for every situation. The important thing to remember is – at all times – the visitors must understand where they are in a website and where they can go from there.