@comparaonline/ui-breadcrumbs

0.27.1 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i @comparaonline/ui-breadcrumbs

Weekly Downloads

4

Version

0.27.1

License

MIT

Unpacked Size

15.4 kB

Total Files

10

Last publish

Collaborators

  • gnavarro
  • dsuarez_compa
  • pfariaz
  • ricardo.sosa
  • suarezcumare
  • comparaonline-dev
  • comparaonlineprivate
  • matotias
  • javierlara1989
  • smurua
  • eseceve
  • pablocompara