0.2.0 • Published 10 months ago

@bolttech/atoms-breadcrumbs v0.2.0

Weekly downloads
-
License
-
Repository
-
Last release
10 months ago

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:

PropTypeDescription
idstringThe id of the breadcrumb container.
dataTestIdstring or elementThe data-testid of the breadcrumbs container.
itemBreadcrumbItemThe 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;