# Breadcrumbs

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

## Demo

{% demo 'Breadcrumbs', 'breadcrumbsDemo', demos.breadcrumbsDemo, component.brand %}

## 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 <main> element. This ensures that when assistive technology users select ‘Skip to content’, it will skip all navigation including the breadcrumbs.

### Breadcrumbs on smaller screens

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

{% demoImage demos.breadcrumbsDemo.site.images.viewOnSmallerScreens %}

### Breadcrumbs on dark backgrounds

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.

{% demoImage demos.breadcrumbsDemo.site.images.viewWithDarkBackgrounds %}

### Installation

To install all of the components, [go to the get started guide for developers](https://github.com/springernature/elements#readme).

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

```bash
npm install @springernature/elements
```

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

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

### Configuration

To view the configurations for this component, [go to the schema](https://github.com/springernature/elements/blob/main/components/eds-c-breadcrumbs/data/eds-c-breadcrumbs.schema.json).
