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