@bolttech/atoms-breadcrumbs

Breadcrumbs Component

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

$3

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

``bash
npm install @bolttech/atoms-breadcrumbs
`

or

`bash
yarn add @bolttech/atoms-breadcrumbs
`

$3

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

$3

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

$3

`jsx
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 (



);
};

export default ExampleComponent;
``