@inspectph/reacttw-bread-crumbs

A lightweight, customizable React + TailwindCSS Breadcrumbs component for clean navigation in your apps.

Features

• Built with React and TailwindCSS
• Simple API with props for customization
• Responsive and accessible by default
• Supports icons, custom separators, and styling overrides

Installation

npm install @inspectph/reacttw-bread-crumbs

or with Yarn:

yarn add @inspectph/reacttw-bread-crumbs

Usage

import React from "react";
import { Breadcrumbs } from "@inspectph/reacttw-bread-crumbs";

function App() {
  const items = [
    { label: "Home", href: "/" },
    { label: "Dashboard", href: "/dashboard" },
    { label: "Settings", href: "/settings" },
  ];

  return (
    <div className="p-4">
      <Breadcrumbs items={items} separator="›" />
    </div>
  );
}

export default App;

Props

| Prop | Type | Default | Description | | ----------- | ----------------------------------------- | ------- | --------------------------------- | | items | Array<{ label: string; href?: string }> | [] | List of breadcrumb items | | separator | string | / | Symbol between items | | className | string | "" | Add custom Tailwind/extra classes |

Example with Tailwind Styling

<Breadcrumbs
  items={[
    { label: "Home", href: "/" },
    { label: "Blog", href: "/blog" },
    { label: "Post Title" },
  ]}
  separator="→"
  className="text-sm text-gray-600"
/>

Roadmap

• [ ] Add support for custom icons
• [ ] Add ARIA enhancements
• [ ] Add support for dark mode out of the box

Contributing

Contributions are welcome! Feel free to open issues and submit PRs.

License

MIT © inspectph