Usage

The breadcrumb indicates the hierarchical position of the current page on the University of Cambridge site. It indicates to the user their context within the site, whether they have browsed to their current location or arrived from a search engine.

A full breadcrumb trail, showing the user’s context in relation to the University homepage, appears on broader-width pages.

Smaller screen widths

At smaller screen widths, the breadcrumb does not appear within local sites, because enough other signposting exists to orientate the user.

For non-local pages, such as the Colleges and Departments index page, a single link appears above the page title, which takes the user to the section above the current one.

The page header is a full width background colour to create visual hierarchy for section titles.

---

Interaction

The current page in the breadcrumb is not clickable; all previous 'crumbs' are clickable.

---

CSS and media queries

Separate desktop and mobile views are created by using a 767px max-width media query to present a different structure.

The full width menu is hidden in mobile view and a single link to the parent page is displayed instead.

---

Use of Javascript

N/a

---

Component variants

This component depicts three variants on the breadcrumb, a default, truncated and non-truncated view.

Ideally, a breadcrumb that is too long to appear in a single line on the page will be truncated in the middle. From a usability point of view this is acceptable, because people generally use breadcrumbs either to navigate to a level near to where they are currently, or to navigate to a top-level category.

If the backend system cannot generate truncated breadcrumbs, the breadcrumb should just wrap as many times as necessary.

For pages that have a left column holding in page navigation there is an empty column to ensure the correct space is reserved for the navigation container.