Breadcrumbs - React

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

<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.

<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