@comparaonline/ui-breadcrumbs

React component to render the Breadcrumbs that follow the WAI-ARIA guidelines.

Installation

yarn add @comparaonline/ui-breadcrumbs

Usage

The Breadcrumbs requires a data prop.

import Breadcrumbs from '@comparaonline/ui-breadcrumbs';
return <Breadcrumbs data={data} color={...}/>;

The data prop is an array of objects that follows this structure

|key | required | type | description |
|--------| ---------| ---------- | ---------------------------------------------------------------- | |title | true | string | The string to be displayed | |url | true | string | The href value, it can be relative, absolute with fragments... | |render| false | function | A react component that can receive title and url as props |

The color prop can receive any valid color read by Typography

Example

const data = [
  { title: 'home', url: '/' },
  { title: 'path 1', url: '/path-1' },
  {
    title: 'custom component',
    url: '/custom',
    render: ({ title, url }) => (
      <strong>
        {title} - {url}
      </strong>
    )
  }
];

In this case the first 2 breadcrumbs will be rendered as plain Anchors, and the third will a custom component. The title and url props will be read from the previously defined values of the current object.