breadcrumbs-nav
v1.0.3
Published
Breadcrumbs Navigation for React App
Downloads
15
Readme
Breadcrumbs Navigation
Breadcrumbs Navigation for React App. With this Package, you can use Breadcrumbs Navigation very easily. There is no need for server response it can work on the client side.
Installation
Install Breadcrumbs with npm
npm i breadcrumbs-nav
Usage/Examples
import Breadcrumbs from "breadcrumbs-nav";
function App() {
return <Breadcrumbs />;
}
export default App;
Demo
| Default | Home Icon Change | Seperator Icon Change | | :--------------------------------------------------------------------- | :--------------------------------------------------------------------- | :--------------------------------------------------------------------- | | | | |
API Reference
Import Package
import Breadcrumbs from "breadcrumbs-nav";
Add Component
<Breadcrumbs />
Change Home Icon
Here you can add icon component, For example here used react-icons component. If you want can use custom icon or text
import { FaHome } from "react-icons/fa";
<Breadcrumbs homeIcon={<FaHome />} />;
Change Separator Icon
Here you can add icon component, For example here used react-icons component. If you want can use custom icon or text
import { IoChevronForward } from "react-icons/io5";
<Breadcrumbs separatorIcon={<IoChevronForward />} />;
Add Addtiononal CSS Class
Two diffrent CSS class props available here, you can change style by addting class name in this props. Examaple in below-
<Breadcrumbs className="py-1" classNameText="pl-2" />
| Parameter | Type | Description |
| :-------------- | :------- | :---------------------------------------------------------------------------- |
| className
| string
| You can add class for main Breadcrumbs div. Ex- color, font-style etc. |
| classNameText
| string
| You can add class for bread text. Ex- font-style, color, padding etc. |
| homeIcon
| string
| Default Home icon, but you change it by text or icon component. |
| separatorIcon
| string
| Default ChevronForward icon, but you change it by text or icon component. |
🚀 About Me
I'm a MERN stack developer...