Breadcrumb

Navigation component for displaying the current location hierarchy.

Basic Breadcrumb

With Icons

Custom Separator

Without Home Icon

Usage

import { Breadcrumb } from "@/components/breadcrumb"
import { Home, User } from 'lucide-react'

export default function MyComponent() {
  return (
    <Breadcrumb
      items={[
        { label: "Home", href: "/", icon: <Home className="h-4 w-4" /> },
        { label: "Users", href: "/users", icon: <User className="h-4 w-4" /> },
        { label: "Profile" },
      ]}
    />
  )
}

Props

Name
Type
Default
Description
items
array
required
Array of breadcrumb items with label, href, and icon properties.
homeHref
string
"/"
URL for the home icon link.
showHomeIcon
boolean
true
Whether to show the home icon at the start of the breadcrumb.
separator
ReactNode
ChevronRight
Custom separator element between breadcrumb items.