https://github.com/hurricaneinteractive/voltage-breadcrumbs
Easy to use and customisable breadcrumb component for your react applications.
https://github.com/hurricaneinteractive/voltage-breadcrumbs
Last synced: 23 days ago
JSON representation
Easy to use and customisable breadcrumb component for your react applications.
- Host: GitHub
- URL: https://github.com/hurricaneinteractive/voltage-breadcrumbs
- Owner: HurricaneInteractive
- Created: 2019-11-15T09:43:20.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T00:55:06.000Z (over 3 years ago)
- Last Synced: 2025-02-26T05:35:36.799Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://voltage-breadcrumbs.netlify.com/
- Size: 2.66 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 44
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# voltage-breadcrumbs
[](https://www.npmjs.com/package/voltage-breadcrumbs) [](https://standardjs.com)
> Easy to use and customisable breadcrumb component for your react applications.
For the breadcrumb component to stay small and customisable, I had to make some decisions.
1. The last item is always the active page
2. Collapse to dropdown menu after 3 items
3. Make the component seem dump by having the dev pass the links (there are components that auto generate from a routing package, this isn't on of those)
## Demo
See a demo and the documentation [here](https://voltage-breadcrumbs.netlify.com/)
## Install
```bash
npm install voltage-breadcrumbs
# OR
yarn add voltage-breadcrumbs
```
## Basic Usage
As a minimun, the breadcrumbs need a array of elements to display. This can come in two forms;
### Array of objects
```js
import Breadcrumbs from "voltage-breadcrumbs"
// links
const links = [
{ link: "", text: "Home" },
...
]
// in render method
```
`link` and `text` are both required when using this approach. Additional keys will be used as props on the `` in the breadcrumb list. This give you the ability to pass custom props to the links.
### Array of Custom Components
```js
const CustomLink = ({text}) => {text}
const links = [
,
...
]
// in render method
```
## Custom Separator
The component allows you to pass in a custom separator or ignore rendering the separator all together.
### Example
```js
// Custom string separator
// Custom component
} />
// Hide Separator
```
## What happens after 3 links?
If the `links` array contains more than 3 items, the additional links collapse into a dropdown menu. This is to stop the breadcrumbs spanning the whole screen.