@comparaonline/ui-breadcrumbs

React component to render the `Breadcrumbs` that follow the [WAI-ARIA guidelines](http://a11y-style-guide.com/style-guide/section-navigation.html#kssref-navigation-breadcrumbs).

Stats

StarsIssuesVersionUpdatedCreatedSize
@comparaonline/ui-breadcrumbs
0.27.13 years ago4 years agoMinified + gzip package size for @comparaonline/ui-breadcrumbs in KB

Readme

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.