Breadcrumb

Navigation breadcrumb with separators.

navigationbreadcrumbpath

Import

import { Breadcrumb } from "@/components/ui";

Basic Usage

Breadcrumb Preview

Code

tsx

<Breadcrumb
  items={[
    { label: "Home", href: "/" },
    { label: "Products", href: "/products" },
    { label: "Electronics", href: "/products/electronics" },
    { label: "Phones" },
  ]}
/>

Custom Separator

Use different separators

1<Breadcrumb
2  items={[
3    { label: "Home", href: "/" },
4    { label: "Products", href: "/products" },
5    { label: "Details" },
6  ]}
7  separator=">"
8/>

With Max Items

Collapse middle items

1<Breadcrumb
2  items={[
3    { label: "Home", href: "/" },
4    { label: "Category", href: "/category" },
5    { label: "Subcategory", href: "/category/sub" },
6    { label: "Products", href: "/category/sub/products" },
7    { label: "Product Details" },
8  ]}
9  maxItems={3}
10/>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring