Component

Breadcrumb

Free, copy-pasteable Tailwind CSS Breadcrumb component. Accessible, fully responsive, dark-mode ready, and customizable.

On this page

Basic Breadcrumb Dropdown Breadcrumb Breadcrumb with Separator

AI NewsletterRead →

How Machines Think

Sponsor Business Wish (500+ Devs)Claim this spot →

Install via CLI

Run this command to automatically add the component and its dependencies to your project.

npx @abhaysinghr516/business-wish add breadcrumb

New to the CLI? Run npx @abhaysinghr516/business-wish init first to initialize your project.

A well-designed Tailwind breadcrumb clarifies site architecture and helps users navigate nested content. These accessible Tailwind CSS breadcrumbs include smart truncation with dropdowns for deep directory structures.

Breadcrumbs pair naturally right below your primary Header, or use Pagination for navigating multi-page lists.

A minimal, flat breadcrumb trail.

Preview

import React from "react";
import Link from "next/link";
import { ChevronRight, Home } from "lucide-react";

const Breadcrumb = () => {
  const breadcrumbs = [
    { label: "Home", href: "#" },
    { label: "Products", href: "#" },
    { label: "Laptops", href: "#" },
  ];

  return (
    <nav aria-label="Breadcrumb" className="text-[14px]">
      <ol className="list-none p-0 inline-flex items-center">
        {breadcrumbs.map((breadcrumb, index) => {
          const isLast = index === breadcrumbs.length - 1;
          return (
            <li key={breadcrumb.href} className="flex items-center group">
              {index === 0 && (
                <Home className="w-[14px] h-[14px] text-neutral-400 dark:text-neutral-500 mr-2 group-hover:text-neutral-700 dark:group-hover:text-neutral-300 transition-colors" />
              )}
              {isLast ? (
                <span className="text-neutral-900 dark:text-neutral-100 font-medium tracking-tight">
                  {breadcrumb.label}
                </span>
              ) : (
                <Link
                  href={breadcrumb.href}
                  className="text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100 transition-colors duration-200"
                >
                  {breadcrumb.label}
                </Link>
              )}
              {!isLast && (
                <ChevronRight className="w-[14px] h-[14px] mx-1.5 text-neutral-300 dark:text-neutral-700 font-light" strokeWidth={1.5} />
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
};

export default Breadcrumb;

A breadcrumb trail featuring a sleek, glassmorphic dropdown menu for truncating long paths.

Preview

import React, { useState, useRef, useEffect } from "react";
import Link from "next/link";
import { ChevronRight, Home } from "lucide-react";

const Breadcrumb = () => {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);
  const breadcrumbs = [
    { label: "Home", href: "#" },
    { label: "Services", href: "#" },
    { label: "Web Development", href: "#" },
    { label: "React", href: "#" },
  ];

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    };

    if (isOpen) {
      document.addEventListener('mousedown', handleClickOutside);
    }
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [isOpen]);

  return (
    <nav aria-label="Breadcrumb" className="text-[14px]">
      <ol className="list-none p-0 inline-flex items-center">
        <li className="flex items-center group">
          <Link
            href="/"
            className="text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100 transition-colors duration-200 flex items-center"
          >
            <Home className="w-[14px] h-[14px] mr-1.5 text-neutral-400 dark:text-neutral-500 group-hover:text-neutral-700 dark:group-hover:text-neutral-300 transition-colors" />
            Home
          </Link>
        </li>
        <li className="flex items-center ml-1.5" ref={dropdownRef}>
          <ChevronRight className="w-[14px] h-[14px] mx-1.5 text-neutral-300 dark:text-neutral-700 font-light" strokeWidth={1.5} />
          <div className="relative">
            <button
              onClick={() => setIsOpen(!isOpen)}
              className="text-neutral-400 hover:text-neutral-900 dark:text-neutral-500 dark:hover:text-neutral-100 transition-colors duration-200 flex items-center justify-center p-1 rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-800/50 focus:outline-none"
              aria-expanded={isOpen}
            >
              <span className="tracking-widest leading-none mt-[-4px]">...</span>
            </button>
            {isOpen && (
              <div className="absolute z-20 top-full left-0 mt-1 w-48 rounded-xl shadow-[0_8px_30px_rgb(0,0,0,0.06)] dark:shadow-[0_8px_30px_rgb(0,0,0,0.3)] bg-white/90 dark:bg-neutral-900/90 backdrop-blur-xl border border-neutral-100 dark:border-white/5 opacity-100 transform scale-100 transition-all duration-200 origin-top-left animate-in fade-in slide-in-from-top-2">
                <div className="py-1" role="menu" aria-orientation="vertical">
                  {breadcrumbs.slice(1, -1).map((breadcrumb) => (
                    <Link
                      key={breadcrumb.href}
                      href={breadcrumb.href}
                      className="block px-4 py-2 text-[13px] text-neutral-600 hover:bg-neutral-50 hover:text-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-800/50 dark:hover:text-neutral-100 transition-colors duration-150"
                      role="menuitem"
                      onClick={() => setIsOpen(false)}
                    >
                      {breadcrumb.label}
                    </Link>
                  ))}
                </div>
              </div>
            )}
          </div>
        </li>
        <li className="flex items-center ml-1.5">
          <ChevronRight className="w-[14px] h-[14px] mx-1.5 text-neutral-300 dark:text-neutral-700 font-light" strokeWidth={1.5} />
          <span className="text-neutral-900 dark:text-neutral-100 font-medium tracking-tight">
            {breadcrumbs[breadcrumbs.length - 1].label}
          </span>
        </li>
      </ol>
    </nav>
  );
};

export default Breadcrumb;

A clean variation exhibiting subtle separator animations to guide the user's eye and a modern pill to highlight the active path.

Preview

import React from "react";
import Link from "next/link";
import { ChevronRight, Home } from "lucide-react";

const Breadcrumb = () => {
  const breadcrumbs = [
    { label: "Home", href: "#" },
    { label: "Electronics", href: "#" },
    { label: "Smartphones", href: "#" },
    { label: "iPhone 16", href: "#" },
  ];

  return (
    <nav aria-label="Breadcrumb" className="text-[14px]">
      <ol className="list-none p-0 inline-flex items-center">
        {breadcrumbs.map((breadcrumb, index) => {
          const isLast = index === breadcrumbs.length - 1;
          return (
            <li key={breadcrumb.href} className="flex items-center group">
              {index === 0 && (
                <Home className="w-[14px] h-[14px] text-neutral-400 dark:text-neutral-500 mr-2 group-hover:text-neutral-700 dark:group-hover:text-neutral-300 transition-colors" />
              )}
              {isLast ? (
                <span className="text-neutral-900 dark:text-neutral-100 font-medium tracking-tight px-2.5 py-0.5 rounded-md bg-neutral-100 dark:bg-neutral-800/50">
                  {breadcrumb.label}
                </span>
              ) : (
                <Link
                  href={breadcrumb.href}
                  className="text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-100 transition-colors duration-200"
                >
                  {breadcrumb.label}
                </Link>
              )}
              {!isLast && (
                <ChevronRight className="w-[14px] h-[14px] mx-1.5 text-neutral-300 dark:text-neutral-700 font-light transform transition-transform group-hover:translate-x-0.5" strokeWidth={1.5} />
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
};

export default Breadcrumb;

Bottom Navigation

Button