Breadcrumb

Component

Elegant Tailwind breadcrumb components with collapsible dropdowns and animated separators to guide user navigation.

On this page
Basic BreadcrumbDropdown BreadcrumbBreadcrumb with Separator

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.

Basic Breadcrumb

A minimal, flat breadcrumb trail.

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.

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.

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;
Previous
Bottom Navigation
Next
Button