react-smart-breadcrumb

An advanced React component designed for rendering React Smart Breadcrumb seamlessly onto the DOM. This component offers robust support for [email protected] 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

| Name | Type | Description | | -------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | breadcrumbLabels | Array of Breadcrumb Labels | Specify custom breadcrumb labels and icons for the breadcrumb. {{'/home': { label: 'Home Page', icon: '🏠' }, '/home/inner': { label: 'Inner Page', icon: '🔄' }, '/home/inner/child': { label: 'Child Page', icon: '👶' }}} | | className | String | You can specify custom class on ul element. | | navClassName | String | You can specify custom class on nav element. |