Breadcrumb
Use breadcrumbs when users need to see where they sit in the site hierarchy as a trail of links.
Live demo
Breadcrumbs show people where they are in the site and offer shortcuts back up the hierarchy. The trail usually reflects the information architecture automatically from the page’s place in the tree, not from a hand-built list in the body. Expect the global header experience to supply the main trail on standard pages; a dropped Breadcrumb component in the page does not replace that behaviour in this implementation (see Code).
Behaviour
The trail lists ancestor sections as links and shows the current page as the last item without a link, so the destination is clear. Shallow pages (high in the tree) may not show a trail, by design, so very short paths stay clean. Some templates intentionally hide breadcrumbs (for example home or certain story layouts); respect those exclusions so the page type stays coherent.
Home and French Accueil entry points are labelled in line with university naming. Folder nodes in the path are usually skipped so the trail reads like content sections, not file structure.
Anatomy
- Navigation region labelled as a breadcrumb for assistive technology.
- Ordered list of steps from the site root toward the current page.
- Links for each ancestor level.
- Current page as the final step, marked as the active page.
When the trail is hidden by rules, the layout may still reserve space so the header does not jump.
Content guidelines
- Keep navigation titles on section pages accurate and plain, because they feed the trail.
- Align breadcrumb wording with page titles where it matters for recognition and for assistive technology.
- Do not rely on dragging a Breadcrumb component into the page to create the main trail; manage hierarchy and templates instead.
When to use
- Standard inner pages where showing the site structure helps orientation and the template is meant to include a trail.
When not to use
- Do not expect a second breadcrumb from a page body component when the header already provides the pattern; avoid duplicate trails unless there is a clear, separate requirement.
- Templates that omit breadcrumbs on purpose (for example home or selected story views) should stay that way.
Best practices
Do
- Review shallow pages and template rules so you know whether a trail will appear.
- Test with real section titles so the trail reads naturally in both languages when applicable.
Don't
- Duplicate the breadcrumb in the content area without a documented reason.
- Rename sections in navigation titles in ways that conflict with how people understand the site map.
Related
| Resource | |
|---|---|
| Anchor navigation | Jumps within one long page, not hierarchy between pages. |
| Navigation | Primary site navigation patterns. |
CRXDE Lite query
Use this query in CRXDE Lite to find instances of this component.
/jcr:root/content//*[@sling:resourceType = 'concordia/components/breadcrumb/breadcrumb.jsp']| Item | Location |
|---|---|
| Breadcrumb script | apps/concordia/components/breadcrumb/breadcrumb.jsp |
| Header integration | apps/concordia/components/page/concordia/header.jsp (breadcrumb block and hideBreadcrumb / template exclusions) |
Context: breadcrumb.jsp uses context.jsp and currentPageContext for depth and ancestors; SITE_IDENTIFIER and hub appear in the Carrefour skip logic.
How it behaves in AEM
breadcrumb.jsp runs in two different modes:
- Template breadcrumb (real trail): The header sets
request.setAttribute("templateBreadcrumb", true)before includingbreadcrumb.jsp. The script then builds an ordered list from ancestor pages starting at a fixed depth in the tree, and stops before the current page. The current page is the last item, not a link, witharia-current="page". - Component instances on a page: If
templateBreadcrumbis false (the default), no trail is rendered by the breadcrumb component. The JSP only resets the attribute. Authors should not expect a breadcrumb from a dropped Breadcrumb component instance.
Visibility rules:
- The trail is shown only when
navigationLevelCurrent > 3(depth in the tree), so very shallow pages may not get a breadcrumb (or only a structural empty wrapper in some branches). - Home and Accueil labels are replaced with the university i18n string.
- Folder templates (
cq:templatecontainingfolder) are skipped (no list item). - Carrefour hub has a special case: under certain paths, the
/content/hub/enancestor may be skipped.
When the header excludes breadcrumb for some templates (home, certain news story and event templates, shared profile), no template breadcrumb is set.
Anatomy (markup)
- Landmark:
<nav aria-label="breadcrumb">(Bootstrap pattern). - List:
<ol class="breadcrumb">. - Items:
<li class="breadcrumb-item">with<a>for ancestors, or<li class="breadcrumb-item active" aria-current="page">for the current page.
When the depth rule hides the trail, the JSP may output div.c-breadcrumb__empty as a spacer (see breadcrumb.jsp).
Content (authoring)
There is no author dialog for the live trail; titles come from ancestor pages (getNavigationTitle(), then page title, then name). Page properties and template choice determine whether the header includes the breadcrumb at all.
Instances in the codebase
| Location | Role |
|---|---|
apps/concordia/components/page/concordia/header.jsp | Sets templateBreadcrumb when allowed, includes breadcrumb.jsp inside a width1200 container. |
apps/concordia/components/breadcrumb/breadcrumb.jsp | Implements the trail and resets templateBreadcrumb after render. |