Breadcrumbs Component

A React component to display a list of previous visited links.

Installation

Use the package manager npm or yarn to install the component.

npm install @bolttech/atoms-breadcrumbs

or

yarn add @bolttech/atoms-breadcrumbs

Props

The Breadcrumbs component accepts the following properties:

| Prop | Type | Description | | ---------- | --------------------- | --------------------------------------------- | | id | string | The id of the breadcrumb container. | | dataTestId | string or element | The data-testid of the breadcrumbs container. | | item | BreadcrumbItem | The list of items of the breadcrumbs. |

Behaviours

The breadcrumb component has the following behaviours:

• When 5 or less items, it displays all links with an > between them
• When 6 or more items, it shows the First item, then a ... followed by the last 3 items
• The last item should always be the selected item

Usage

import React from 'react';
import { Breadcrumbs } from '@bolttech/atoms-breadcrumbs';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations';

const ExampleComponent = () => {
  const items = [
    { label: 'Home', href: '/' },
    { label: 'About', href: '/about' },
    { label: 'Contact', href: '/contact' },
  ];

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Breadcrumbs id="breadcrumbs" dataTestId="breadcrumbs" items={items} />
    </BolttechThemeProvider>
  );
};

export default ExampleComponent;