react-smart-breadcrumb

An advanced React component designed for rendering React Smart Breadcrumb seamlessly onto the DOM. This component offers robust support for react-router-dom@6.18.0 and above, providing a sophisticated solution for breadcrumb navigation in React applications.

Installation

npm

npm install react-smart-breadcrumb

yarn

yarn add react-smart-breadcrumb

pnpm

pnpm add react-smart-breadcrumb

Usage

The react-smart-breadcrumb library offers an efficient single-component export, facilitating the streamlined integration of breadcrumb functionality within React applications.

Exemplifying modern JavaScript conventions, all code examples within the library adhere to contemporary file structures and syntax. Furthermore, compatibility is diligently preserved, as demonstrated by the usage of require(react-smart-breadcrumb).

React Smart Breadcrumb Demo

How to Utilizing the React Smart Breadcrumb Component

import React from "react";
import ReactSmartBreadcrumb from "react-smart-breadcrumb";
import "react-smart-breadcrumb/css/index.css";

const MyComponent = () => {
  return (
    <ReactSmartBreadcrumb
      navClassName="nav"
      className="ul"
      breadcrumbLabels={{
      '/home': { label: 'Home Page', icon: '🏠' },
      '/home/inner': { label: 'Inner Page', icon: '🔄' },
      '/home/inner/child': { label: 'Child Page', icon: '👶'}
      }}
    />
  );
};
export default MyComponent;

Props