react-breadcrum-component

React BreadCrum

A customizable and responsive breadcrumb navigation component for React applications, designed to support multi-level navigation with icons and routing.

✨ Features

• Built with React and React Router
• Supports up to 5 levels of dynamic navigation
• Includes CSS styling
• Uses react-icons for arrow icons
• Easy to integrate and style

📦 Installation

npm install react-breadcrum-component

📦 Import Style

import 'react-breadcrum-component/dist/style.css'

🚀 Usage

import React from 'react';
import BreadCrum from 'react-breadcrum-component';
//OR import { BreadCrum } from 'react-breadcrum-component'


const YourComponent = () => {
  return (
    <div>
      <BreadCrum
        secondName="Dashboard"
        secondTo="/dashboard"
        thirdName="Reports"
        thirdTo="/dashboard/reports"
        current="Monthly Report"
        className="class name" //optional
      />
    </div>
  );
};

export default App;

🧩 Props

Prop	Type	Description
current	string	Required. The current (last) breadcrumb label
secondName	string	Second breadcrumb label (optional)
secondTo	string	Link path for second breadcrumb
thirdName	string	Third breadcrumb label (optional)
thirdTo	string	Link path for third breadcrumb
fourthName	string	Fourth breadcrumb label (optional)
fourthTo	string	Link path for fourth breadcrumb
fifthName	string	Fifth breadcrumb label (optional)
fifthTo	string	Link path for fifth breadcrumb
className	string	Optional class name for additional custom styling

📦 Versions Required

• "react": "^18.0.0 || ^19.1.0",
• "react-dom": "^18.0.0 || ^19.1.0"

📦 Dependencies

• react-icons
• react-router-dom