<Breadcrumbs items={[
{ label: "Home", to: "/" },
{ label: "Projects", to: "/projects" },
{ label: "Current Project" }
]} />Installation
Copy and paste the following code into your project.
import { Breadcrumbs } from "~/blocks/breadcrumbs";Usage
import { Breadcrumbs } from "~/blocks/breadcrumbs";
export default function Example() {
return (
<Breadcrumbs items={[
{ label: "Home", to: "/" },
{ label: "Projects", to: "/projects" },
{ label: "Current Project" }
]} />
);
}Examples
Basic
<Breadcrumbs items={[
{ label: "Home", to: "/" },
{ label: "Docs", to: "/docs" },
{ label: "Breadcrumbs" }
]} />With Icons
<Breadcrumbs items={[
{ label: "Home", to: "/", icon: <HouseIcon size={16} /> },
{ label: "Projects", to: "/projects", icon: <FolderIcon size={16} /> },
{ label: "file.tsx", icon: <FileTextIcon size={16} /> }
]} />Long Path
<Breadcrumbs items={[
{ label: "Home", to: "/" },
{ label: "Projects", to: "/projects" },
{ label: "My Project", to: "/projects/my-project" },
{ label: "Source", to: "/projects/my-project/src" },
{ label: "Components", to: "/projects/my-project/src/components" },
{ label: "Button.tsx" }
]} />API Reference
| Prop | Type | Default |
|---|---|---|
| items | BreadcrumbItem[] | required |
| className | string | undefined |
BreadcrumbItem
| Property | Type | Description |
|---|---|---|
| label | ReactNode | The text or content to display |
| to | string | Optional link destination |
| icon | ReactNode | Optional icon to display |