@kavyakk/breadcrumb

A simple breadcrumb navigation component for React.

Installation

npm install @kavyakk/breadcrumb
# or with yarn
yarn add @kavyakk/breadcrumb

Usage

jsx

import React from "react";
import Breadcrumb from "@kavyakk/breadcrumb";

export default function App() {
  const items = [
  { label: "Home", href: "/" },
  { label: "Products", href: "/products" },
  { label: "Electronics", href: "/products/electronics" },
];
  return (
    <div>
      <Breadcrumb
  items={items}
  separator="➡"
  fontColor="green"
  fontSize="18px"
/>
    </div>
  );
}

Emoji Breadcrumb

const items = [
  { icon: "🎪", label: "Home", href: "/" },
  { icon: "🛒", label: "Products", href: "/products" },
  { label: "Shoes" },
];

Icon Breadcrumb

import { FaCoffee } from "react-icons/fa";

const items = [
  { icon: <FaCoffee />, label: "Home", href: "/" },
  { label: "Products", href: "/products" },
  { label: "Shoes" },
];

Separator

<Breadcrumb items={items} separator="➡" />

Props

| Prop | Type | Description | | --------- | --------- | ------------------------------------------------------------------------------ | | items | Array | Array of breadcrumb items { icon?: ReactNode, label: string, href?: string } | | separator | ReactNode | symbol between items | | fontSize | string | font size for labels | | fontColor | string | font color for labels |

License

MIT