Components
Breadcrumb
Breadcrumb
Animated breadcrumb navigation with customizable separators, icons, and truncation support.
Installation
1
Install the packages
npm i motion clsx tailwind-merge2
Add util file
lib/util.ts
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
3
Copy and paste the following code into your project
breadcrumb.tsx
"use client";
import { cn } from "@/lib/utils";
import { motion } from "motion/react";
import React from "react";
import { FiChevronRight, FiHome } from "react-icons/fi";
interface BreadcrumbItem {
label: string;
href?: string;
icon?: React.ReactNode;
}
interface BreadcrumbProps {
items?: BreadcrumbItem[];
separator?: React.ReactNode;
maxItems?: number;
}
const Breadcrumb: React.FC<BreadcrumbProps> = ({
items = [
{ label: "Home", href: "/", icon: <FiHome className="h-4 w-4" /> },
{ label: "Components", href: "/components" },
{ label: "Breadcrumb", href: "/components/breadcrumb" },
],
separator = <FiChevronRight className="h-4 w-4" />,
maxItems = 5
}) => {
const displayItems = items.length > maxItems
? [
items[0],
{ label: "...", href: undefined },
...items.slice(-maxItems + 2)
]
: items;
return (
<nav className="flex items-center space-x-2 text-sm text-neutral-400">
{displayItems.map((item, index) => (
<React.Fragment key={index}>
{index > 0 && (
<motion.span
className="text-neutral-500"
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ delay: index * 0.1 }}
>
{separator}
</motion.span>
)}
<motion.div
className="flex items-center space-x-1"
initial={{ opacity: 0, x: -10 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: index * 0.1 }}
>
{item.icon && (
<span className="text-neutral-400">{item.icon}</span>
)}
{item.href ? (
<a
href={item.href}
className={cn(
"hover:text-white transition-colors",
index === displayItems.length - 1
? "text-white font-medium"
: "text-neutral-400"
)}
>
{item.label}
</a>
) : (
<span
className={cn(
index === displayItems.length - 1
? "text-white font-medium"
: "text-neutral-500"
)}
>
{item.label}
</span>
)}
</motion.div>
</React.Fragment>
))}
</nav>
);
};
export default Breadcrumb;"use client";
import { cn } from "@/lib/utils";
import { motion } from "motion/react";
import React from "react";
import { FiChevronRight, FiHome } from "react-icons/fi";
interface BreadcrumbItem {
label: string;
href?: string;
icon?: React.ReactNode;
}
interface BreadcrumbProps {
items?: BreadcrumbItem[];
separator?: React.ReactNode;
maxItems?: number;
}
const Breadcrumb: React.FC<BreadcrumbProps> = ({
items = [
{ label: "Home", href: "/", icon: <FiHome className="h-4 w-4" /> },
{ label: "Components", href: "/components" },
{ label: "Breadcrumb", href: "/components/breadcrumb" },
],
separator = <FiChevronRight className="h-4 w-4" />,
maxItems = 5
}) => {
const displayItems = items.length > maxItems
? [
items[0],
{ label: "...", href: undefined },
...items.slice(-maxItems + 2)
]
: items;
return (
<nav className="flex items-center space-x-2 text-sm text-neutral-400">
{displayItems.map((item, index) => (
<React.Fragment key={index}>
{index > 0 && (
<motion.span
className="text-neutral-500"
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ delay: index * 0.1 }}
>
{separator}
</motion.span>
)}
<motion.div
className="flex items-center space-x-1"
initial={{ opacity: 0, x: -10 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: index * 0.1 }}
>
{item.icon && (
<span className="text-neutral-400">{item.icon}</span>
)}
{item.href ? (
<a
href={item.href}
className={cn(
"hover:text-white transition-colors",
index === displayItems.length - 1
? "text-white font-medium"
: "text-neutral-400"
)}
>
{item.label}
</a>
) : (
<span
className={cn(
index === displayItems.length - 1
? "text-white font-medium"
: "text-neutral-500"
)}
>
{item.label}
</span>
)}
</motion.div>
</React.Fragment>
))}
</nav>
);
};
export default Breadcrumb;4
Update the import paths to match your project setup
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | BreadcrumbItem[] | [] | Array of breadcrumb items with label, href, and optional icon. |
| separator | ReactNode | FiChevronRight | Custom separator element between breadcrumb items. |
| maxItems | number | 5 | Maximum number of items to display before truncation. |