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