1.0.3 • Published 1 year ago

breadcrumbs-nav v1.0.3

Weekly downloads
-
License
ISC
Repository
github
Last release
1 year ago

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

DefaultHome Icon ChangeSeperator Icon Change
npm.ionpm.ionpm.io

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" />
ParameterTypeDescription
classNamestringYou can add class for main Breadcrumbs div. Ex- color, font-style etc.
classNameTextstringYou can add class for bread text. Ex- font-style, color, padding etc.
homeIconstringDefault Home icon, but you change it by text or icon component.
separatorIconstringDefault ChevronForward icon, but you change it by text or icon component.

🚀 About Me

I'm a MERN stack developer...

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago