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.
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.
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.
Subsite navigation for Graduate admissions
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!
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.
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.
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.
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.