Breadcrumbs

Installation

yarn add @chantelle/pl-breadcrumbs

Usage

First, include the CSS in your HTML:

<link rel="stylesheet" href="node_modules/@chantelle/pl-breadcrumbs/build/css/main.css">

Note: you can import the CSS directly into your project if your bundler supports it:

 import '@chantelle/pl-breadcrumbs/build/css/main.css';

React Component

import Breadcrumbs from '@chantelle/pl-breadcrumbs';

ReactDOM.render(
  <Breadcrumbs>
    <div><Link {...LinkEvents}>Home</Link></div>
    <div><Link {...LinkEvents}>Sub-page 1</Link></div>
    <div>Current page</div>
  </Breadcrumbs>,
  container
);

Important: make sure to wrap breadcrumbs items into <div>. Link inside these items wraps get a quick re-style, a bit different from the original Link. You can also include plain text as an item.

This is considered a good practice to leave the last element of the breadcrumbs non-clickable, because it is relative the current page. But as always you're free.

CSS API

To use the Breadcrumbs component, add the .pl-breadcrumbs to the <div> element to apply the styles. Don't forget to wrap your breadcrumbs items into <div>.

<div class="pl-breadcrumbs">
  <div><a class="pl-link">Home</a></div>
  <div><a class="pl-link">Sub-page 1</a></div>
  <div>Current page</div>
</div>