---
title: "Breadcrumbs — React"
canonical: https://sky-ui.cf.sky.com/components/breadcrumbs/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Breadcrumbs — React

Breadcrumbs help users visualise a page’s location within the website.

```js
import { Breadcrumbs } from '@sky-uk/ui-core';
```

---

```tsx
<Breadcrumbs>
    <Breadcrumbs.Item href="#">
        Page One
    </Breadcrumbs.Item>

    <Breadcrumbs.Item href="#">
        Page Two
    </Breadcrumbs.Item>

    <Breadcrumbs.Item href="#" current>
        Current Page
    </Breadcrumbs.Item>
</Breadcrumbs>
```

---

## Props

### $appearance

- `primary`
- `light`

### current

The `Breadcrumb.Item` child component accepts a `current` prop that will apply current page styles to the item.

---

## Accessibility

An unique `aria-label` should be passed to the `Breadcrumbs` component to differentiate between numerous `nav` elements. This defaults to `Breadcrumbs`.

```tsx
<Breadcrumbs aria-label="Other Breadcrumbs">
    <Breadcrumbs.Item href="#">
    Page One
    </Breadcrumbs.Item>

    <Breadcrumbs.Item href="#" current>
        Current Page
    </Breadcrumbs.Item>
</Breadcrumbs>
```

---

## Translatable Fields

`Breadcrumbs` supports translation on the following fields:

- `breadcrumbs.ariaLabel` - controls the wrapping aria-label

For more on translatable fields, view the `useTranslation` docs here: [useTranslation](/core/hooks/use-translation/)

---