Breadcrumb

Live demo

Design

Usage

The breadcrumb component will be when the user has opened a sub-page. It can be used for instant navigation between the pages - the count of text links will depend on the usage(3 sub-pages = 3 links in breadcrumbs). It helps users find their place within a website or web application.

Specs

A breadcrumb will consist of 1 or more text links, a chevron symbol between the elements.

Behaviour

A breadcrumb can be used by the user in multiple ways.

The user can see a list of links to the parent pages from the sub-page(current page). The user can hover upon and click on the text link to turn back to the parent page. The user can also use the keyboard button to interact(focus state). The current page shows as a disabled link in the breadcrumb.

Selecting(redirect) any parent page on the breadcrumb trail should change the breadcrumb list and show the last text link in disabled state as a current page.

Please refer to Behaviour and Prototype for examples

Placement

Breadcrumbs are placed horizontally before a page’s main content.

Please refer to Placement in page designs for examples.

This is also outlined in Core Layouts

Accessibility

Use the appropriate ARIA attributes for screen readers where applicable.

Code

import { Breadcrumb } from '@shieldpay/bumblebee/breadcrumb';

const breadcrumbItems = [
  {
    path: '/',
    label: 'Home',
  },
  {
    path: '/components/toast',
    label: 'Internal Toast',
  },
];

<Breadcrumb ariaLabel={ariaLabel} items={breadcrumbItems} />;