## Usage

The `<Breadcrumbs />` component is used to communicate the user's current location in the site's hierarchical structure, and offers a quick way to navigate back to parent pages. A page should never have more than one instance of breadcrumbs at any one time.

```tsx live
const crumbs: CrumbsProps = [{ label: 'Grand Parent', href: '#' }, { label: 'Parent', href: '#' }, { label: 'Child' }];

return <Breadcrumbs crumbs={crumbs} />;
```

## Crumbs

Use the `crumbs` prop to pass in an array of objects — i.e. the "crumbs". Each object needs to have a `label` provided. Each crumb with a `href` will render a `<Link />` component.

NOTE: To ensure correct typing, import and declare `CrumbsProps` as the type for your crumbs. You can also set the `shouldIgnoreCoreLinkComponent: true` when you need to "ignore" any global `linkComponent` override in `<Core/>` for specific instances.

```jsx
const crumbs: CrumbsProps = [{ label: 'Grand Parent', href: '#' }, { label: 'Parent', href: '#' }, { label: 'Child' }];

return <Breadcrumbs crumbs={crumbs} />;
```

### Current page

Always include the current page as the last object in the array. This should not be a link, so you have to omit the `href` from the object, and it will render as plain `<Text />`. Doing this will also add a visually hidden text string announcing "current page" to assistive technologies.

```jsx
const crumbs: CrumbsProps = [
  { label: 'Home', href: '/' },
  { label: 'Administration', href: '/administration' },
  { label: 'HR Core', href: '/administration/hr-core' },
  { label: 'Legal entities' },
];
```

## Placement

Prefer to place the breadcrumbs at the top of the page content, above the page title, and aligned to the left.

A secondary navigation to show the user where they are.

Breadcrumbs

Accessibility

Responsive layouts

Tokens

Foundations

a11y

Accordion

Actions

AddressInput

AppLayout

Avatar

Badge

Blanket

BulkActionBar

Button

Card

Checkbox

Core

DateDropdown

DateInput

Divider

EmptyState

Field

Fieldset

FileInput

Filtering

Flex

Grid

Heading

Icon

Illustration

Link

List

Loading

Modal

Notice

PageHeader

Pagination

PhoneInput

Popover

Radio

RailTrack

RichTextEditor

ScrollWrap

SearchInput

SelectDropdown

SelectInput

ShowMore

Table

Tabs

Text

TextAreaInput

TextInput

Toast

Toggle

Tooltip

Utils

Utils - NextJS

Components

Forms

Search

Tables

Patterns

Introduction

Product tone and voice

Capitalisation

Date and time

Inclusive design

Content

Welcome to EDS

Start designing

Start developing

Contributing

Releases

The EDS way

Coding style guide

Guide to Pendo

Setting up the EDS repo

Creating a new component

Automated testing

PR and changeset process

Publishing snapshots

Publishing packages

Monorepo tools

Team resources