@chantelle/pl-breadcrumbs
v1.1.3
Published
The Breadcrumbs component of the Chantelle Pattern Library
Downloads
7
Readme
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>