skip to content

Breadcrumbs

Breadcrumbs are a line of links that help users understand where they are in a website and move between levels.

Demo

{{> eds-c-breadcrumbs}}

When to use this component

Use the breadcrumbs component when you need to help users understand and move between multiple levels of a website.

When not to use this component

Do not use breadcrumbs to show progress through a transaction or linear journey.

How it works

Place breadcrumbs at the top of the page, just under the header and navigation and before the

element. This ensures that when assistive technology users select ‘Skip to content’, it will skip all navigation including the breadcrumbs.

At screen sizes of under 768 pixels, only the last 2 levels of breadcrumb links will show.

An example of the breadcrumbs on smaller screens

On darker backgrounds, set contrast to true. This will change the text colour to white and help ensure adequate contrast so that the breadcrumbs are readable.

An example of the breadcrumbs on dark backgrounds

Installation

To install all of the components, go to the get started guide for developers.

Then, to use the breadcrumbs component, enter the following command in your Terminal:

npm install @springernature/elements

Then, import the style of the Breadcrumbs component into your scss file:

@import '../../node_modules/@springernature/elements/components/eds-c-breadcrumbs';

Configuration

To view the configurations for this component, go to the schema.

Help improve this page
If you’ve got a question, idea or suggestion about how to improve this component or guidance, post in the #ask-elements Slack channel.