Breadcrumbs

Breadcrumbs display the user’s current location within the platform’s hierarchy and offer a simple way to move up to higher levels. This component acts as secondary navigation, helping users stay oriented as they navigate through structured learning content.

They are particularly useful when users arrive on a page via external links, search, or dashboard cards – providing quick access to parent levels that aren't otherwise visible in the main navigation.

Clearly display the page’s position within the structural hierarchy
Enable quick navigation to higher-level pages
Support orientation, especially when landing deep within the platform

We use hierarchy-based breadcrumbs to ensure users always understand their position in the system. This consistent pattern supports intuitive navigation and helps maintain orientation.

Reflect the structure of the platform
Consistent and predictable across all contexts

Examples:

Catalogue / Learning Path / Course / Media
Dashboard / Latest News / News Item

When users land on a page from outside the hierarchical path (e.g., via search, email, or dashboard), a back button is shown instead of breadcrumbs. This historical back action returns users to their previous context, preserving filters, scroll position, and other states.

Breadcrumb = Navigational trail through the platform’s structure
Back Button = One-step return to previously visited page, regardless of structure

Breadcrumbs respond dynamically to available space:

If space allows, all breadcrumb items are displayed
When space is limited, middle items collapse into an ellipsis
Some breadcrumb layouts may omit icons or use alternate separators

---

The breadcrumb navigation is intentionally designed to balance clarity and flexibility — helping users orient themselves while keeping navigation consistent across devices and use cases.

Purpose

Structure

Back Button vs. Breadcrumbs

Behaviour