React-easy-breadcrumb NPM

react-easy-breadcrumb

A simple react component for generating breadcrumbs.

Installation

npm install react-easy-breadcrumb

yarn add react-easy-breadcrumb

`Breadcrumbs` component props

The breadcrumbs instance is implemented in the Breadcrumbs component.

property	type	default	description
`separator`	element	`>`	separator between breadcrumbs items
`crumbs`	array	`undefined`	array of breadcrumbs items

`crumbs` props

The crumbs property is array of breadcrumbs item that will be used in the Breadcrumbs component.

property	type	default	description
`link`	Link (eg: `https:/github.com/`)	`/`	Link that is to be routed when clicked on the item.
`title`	Text	`empty string`	The title that will be displayed as a crumb/item.
`tintColor`	Color or hex value	`#4a4a4a`	Color that you want the item to display.

Example

import { Breadcrumbs } from 'react-easy-breadcrumb';
import Separator from '../images/separator.svg';

const links = [
	{
		link: 'http://github.com/',
		title: 'Home'
	},
	{
		link: 'http://google.com/',
		title: 'Profile',
		tintColor: '#3098'
	},
	{
		link: 'http://twitter.com/',
		title: 'Bookmarks',
		tintColor: 'red'
	}
];

const Page = (
	<div>
		<Breadcrumbs crumbs={links} separator={Separator} />
	</div>
);

export default Page;

result

LICENSE

MIT

styled-components

@everything-registry/sub-chunk-2552 @infinitebrahmanuniverse/nolb-react-ea

1.0.0

5 years ago