Skip to main content

Breadcrumb component

This component is used on the full browser page template to add a small text path that indicates where the web page is located on the website. You can see one just above the H1 (title) of this page.

Guidelines

A breadcrumb helps orient the user in the website hierarchy. It's useful when there are several layers of navigation and you want to make it easy for the user to go up to a previous level or find their way back to the homepage. 

The breadcrumb component can be used on the full browser page template. (The full width and right sidebar templates have built-in breadcrumbs.) It must be placed inside a grid container of either 940px or 1200px, depending on the page layout. Leave the grid container at its default settings; do not add any margins or padding.

The breadcrumb component is found in the Concordia Design section of the AEM Sidekick. You don't need to configure the text or styling, simply place the component inside the grid container and it will populate automatically. 

In most cases, the breadcrumb should be placed at the top of your page content. However, if your page includes a hero at the top of the page, the breadcrumb may be placed above or below the hero — the UCS Web team will advise on the best placement.

Examples & use cases

On a page without a hero

The breadcrumb component has been placed directly above the introduction component.

On a page with a hero

The breadcrumb component has been placed directly above the Hero component.

In the next example, the breadcrumb component has been placed directly below the Hero component.

Need support?

The Web team is here to help.

© Concordia University