Breadcrumbs Component

A React component for displaying a breadcrumb navigation trail.

Installation

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

npm install @bolttech/ob-atoms-breadcrumbs

or

yarn add @bolttech/ob-atoms-breadcrumbs

Props

The Breadcrumbs component accepts the following properties:

| Prop | Type | Description | | ---------- | ------------------- | -------------------------------------------------------------------------------------------------------- | | items | BreadcrumbItem[] | Required. Array of breadcrumb items. Each item has label, an optional href, and an optional onClick. | | id | string | A unique identifier for the component. Defaults to 'breadcrumbs-id'. | | dataTestId | string | The data-testid attribute for testing. Defaults to 'breadcrumbs-data-testid'. | | ariaLabel | string | Accessibility label used for the "expand" action. Defaults to 'Show complete navigation.'. |

BreadcrumbItem

| Prop | Type | Description | | ------- | ---------- | ----------------------------------------------- | | label | string | Required. Text displayed for the item. | | href | string | URL the item links to. | | onClick | function | Optional click handler for the item. |

Usage

import React from 'react';
import { Breadcrumbs } from '@bolttech/ob-atoms-breadcrumbs';

const ExampleComponent = () => {
  const items = [
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Details' },
  ];

  return <Breadcrumbs items={items} ariaLabel="Show complete navigation." />;
};

export default ExampleComponent;

Contributing

Contributions are welcome! For any bug fixes, improvements, or new features, please open an issue or submit a pull request.

Please make sure to follow the code standards and test your changes before submitting.