breadcrumb-fil-dariane
v1.1.5
Published
A simple component to add an accessible Breadcrumb in your react application
Downloads
12
Maintainers
Readme
breadcrumb-fil-dariane
This package was created with the purpose of simplifying the implementation of an accessible and customizable breadcrumb/ariane thread
Getting Started
Install this package:
npm add [email protected]
Import the Breadcrumb component:
import Breadcrumb from "breadcrumb-fil-dariane";
You can integrate this component as a simple React component.
Usage
return (
<Breadcrumb pathArray={myPathArray}/>
);
Expected parameters
An array of objects containing 'path', which represents the route, and 'breadcrumb', which is the name to display in the breadcrumb.
It should be implemented for all the website's routes and set to "null" if you don't want a breadcrumb to be displayed for that route.
const myPathArray = [
{ path: '/', breadcrumb: 'Home' },
{ path: '/about', breadcrumb: 'About' },
{ path: '/login', breadcrumb: 'Login' },
{ path: '/contact', breadcrumb: 'Contact' },
{ path: '/contactList', breadcrumb: null }
]
Usage with parameters
const Component = () => {
const myPathArray = [
{ path: '/', breadcrumb: 'Home' },
{ path: '/about', breadcrumb: 'About' },
{ path: '/login', breadcrumb: 'Login' },
{ path: '/contact', breadcrumb: 'Contact' },
{ path: '/contactList', breadcrumb: null }
]
return (
<Breadcrumb pathArray={myPathArray}/>
// rest of your component
);
}
export default Component;
Customize your breadcrumb
Here is a basic customization example. You can adjust the styles to match your branding guidelines.
.breadcrumbs__list {
padding: 1rem;
justify-content: start;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
color: #000;
font-size: 1rem;
align-items: center;
}
.breadcrumbs__list__element {
display: flex;
gap: 0.5rem;
}
.breadcrumb-active {
text-decoration: underline 3px #892121;
text-underline-offset: 6px;
font-weight: bold;
}
.breadcrumb-not-active {
text-decoration: none;
}