1.1.1 • Published 5 months ago
react-smart-breadcrumb v1.1.1
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
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. |