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