@tmnrp/react-breadcrumbs

@tmnrp/react-breadcrumbs is a lightweight latest treanding markup to display the navigation location path.

Features

• Configurable seperators, icons and text with with ease.

Examples link

https://tmnrp-react-ui.vercel.app/breadcrumbs

Installation link

$ npm i @tmnrp/react-breadcrumbs

Properties

@tmnrp/react-breadcrumbs (IBreadcrumbs) is currently extended with the following properties.

Properties	type	Description
crumbs	Array	Array of the crumbs, that will be displayed in the component.
crumbProps	HTML div props	Common HTML div properties that needs to be applied on all crumbs.
seperator	React.ReactNode	Separator content.
seperatorProps	React.ReactNode	Common HTML div properties that needs to be applied on all seperators.
iconProps	HTML div props	Common HTML div properties that needs to be applied on all icons.
labelProps	HTML div props	Common HTML div properties that needs to be applied on all labels.

@tmnrp/react-breadcrumbs (ICrumb) is currently extended with the following properties.

Properties	type	Description
icon	React.ReactNode	Icon to be displayed on the crumb.
text	React.ReactNode	Text to be displayed on the crumb.
...props	HTML div props	Common HTML div properties that needs to be applied to the crumb.

Implementation for single page breadcrumb

import { Breadcrumbs, ICrumb } from "@tmnrp/react-breadcrumbs";

const App = () => {
  const breadcrumbRef = useRef<IBreadcrumbsMethods>(null);

  //
  return (
    <div className="flex items-center justify-center w-full h-full">
      <div className="flex flex-wrap justify-between pb-2 border-b dark:border-b-gray-800">
        <div>Only labels :</div>
          <Breadcrumbs
            crumbs={crumbs1}
            className="flex flex-wrap"
            crumbsProps={{ className: "flex space-x-1 pr-2" }}
          />
        </div>

        <div className="flex flex-wrap justify-between pb-2 border-b dark:border-b-gray-800">
          <div>Only icons :</div>
          <Breadcrumbs
            crumbs={crumbs2}
            className="flex flex-wrap"
            crumbsProps={{ className: "flex space-x-1 pr-2" }}
          />
        </div>

        <div className="flex flex-wrap justify-between pb-2 border-b dark:border-b-gray-800">
          <div>Both icons and labels :</div>
          <Breadcrumbs
            crumbs={crumbs3}
            className="flex flex-wrap"
            crumbsProps={{ className: "flex space-x-1 pr-2" }}
          />
        </div>

        <div className="flex flex-wrap justify-between pb-2 border-b dark:border-b-gray-800">
          <div>Mix and match :</div>
          <Breadcrumbs
            crumbs={crumbs4}
            className="flex flex-wrap"
            crumbsProps={{ className: "flex space-x-1 pr-2" }}
          />
        </div>

        <div className="flex flex-wrap justify-between pb-2 border-b dark:border-b-gray-800">
          <div>Clickable navigation links :</div>
          <BC
            crumbs={getCrumbs5(router)}
            className="flex flex-wrap"
            crumbsProps={{ className: "flex space-x-1 pr-2" }}
          />
        </div>
    </div>
  );
};

//
const crumbs: Array<ICrumb> = [
  { icon: "", label: "Home" },
  { icon: "", label: "Breadcrumbs" },
  { icon: "", label: "Example 1" },
];

Implementation for a generic breadcrumb

// context / global storage
import { IBreadcrumbsMethods } from "@tmnrp/react-breadcrumbs";
const breadcrumbRef = useRef<IBreadcrumbsMethods>(null);

// Layout
import { ICrumb, useBreadcrumbs, Breadcrumbs } from "@tmnrp/react-breadcrumbs";

//
const { breadcrumbRef } = useContext(GlobalContext);
useBreadcrumbs?.({ ref: breadcrumbRef, crumbs: crumbs });

// return component
<header>
  <Breadcrumbs
    ref={breadcrumbRef}
    crumbs={crumbs}
    crumbsProps={{ className: "flex space-x-1 pr-2" }}
    seperator="/"
    labelProps={{}}
  />
</header>

//
//
const crumbs: Array<ICrumb> = [
  { icon: "", label: "Home" },
  { icon: "", label: "Breadcrumbs" },
  { icon: "", label: "Example 1" },
];

Todos

• Let me know :-)

License

MIT Tony Martin