Breadcrumb

The following breadcrumb component is used to show the current location in a hierarchy. It is a single component and you can style both the items within the breadcrumb as well as the entire component. It takes in an array of breadcrumbItems and you may pass in icons as well to have a nicer look.

Dependencies

Install the following libraries. Assuming you have Tailwind CSS installed

npm install react-router-dom lucide-react

Usage

App.jsx

// App.jsx
import React, { useState } from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import Breadcrumb from './components/breadcrumb';

import { Home, ChevronRight, Folder, File } from 'lucide-react';

const App = () => {
  const breadcrumbItems = [
    { label: 'Home', link: '/', icon: Home },
    { label: 'Category', link: '/category', icon: Folder },
    { label: 'Item', link: null, icon: File }, // Last item without a link
  ];

  return (
    <Router>
      <div className="p-4">
        <Breadcrumb
          items={breadcrumbItems}
          separator={<ChevronRight className="w-4 h-4 text-gray-500" />} // Custom separator
          itemClassName="bg-gray-100 rounded-lg px-3 py-2" // Custom styles for breadcrumb items
          className="mb-4"
        />
        <h1 className="text-xl font-semibold">Item Details</h1>
      </div>
    </Router>
  );
};

export default App;

Component

breadcrumb.jsx

// Breadcrumb.jsx
import React from 'react';
import { Link } from 'react-router-dom'; // Assuming you are using React Router
import { ChevronRight } from 'lucide-react'; // Default icon

const Breadcrumb = ({
  items,
  separator = <ChevronRight className="w-4 h-4 text-gray-500" />,
  className = '',
  itemClassName = '',
  padding = 'p-2',
}) => {
  return (
    <nav className={`flex items-center space-x-2 h-fit ${className}`} aria-label="Breadcrumb">
      {items.map((item, index) => (
        <div key={index} className="flex items-center">
          {index > 0 && <span className="flex items-center">{separator}</span>}

          <div className={`${itemClassName} ${padding} flex min-h-min !items-center gap-x-1`}>
            {item.icon && (
              <item.icon className="w-5 aspect-square text-gray-500 mr-1 leading-1" />
            )}
            {item.link ? (
              <Link to={item.link} className="text-blue-600 hover:underline leading-1">
                {item.label}
              </Link>
            ) : (
              <span className="text-gray-700 block leading-1">{item.label}</span>
            )}
          </div>
        </div>
      ))}
    </nav>
  );
};

export default Breadcrumb;

Preview