Breadcrumb provides contextual information about page hierarchy.
import { Breadcrumb } from 'primereact/breadcrumb';<Breadcrumb>
<Breadcrumb.List>
<Breadcrumb.Item />
<Breadcrumb.Separator />
</Breadcrumb.List>
</Breadcrumb>'use client';
import { Icon } from '@primereact/core/icon';
import Link from 'next/link';
import { Breadcrumb } from 'primereact/breadcrumb';
export default function BasicDemo() {
return (
<div className="flex justify-center">
<Breadcrumb>
<Breadcrumb.List>
<Breadcrumb.Item>
<Link href="/">
<Icon className="pi pi-home" />
</Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Link href="#">Products</Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Link href="#">
<Icon className="pi pi-bolt" /> Electronics
</Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Link href="#">Laptops</Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Link href="#">Dell</Link>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb>
</div>
);
}
A breadcrumb can be used with routing libraries to navigate between pages.
'use client';
import { Icon } from '@primereact/core/icon';
import Link from 'next/link';
import { Breadcrumb } from 'primereact/breadcrumb';
export default function RouteDemo() {
return (
<div className="flex justify-center">
<Breadcrumb>
<Breadcrumb.List>
<Breadcrumb.Item>
<Link href="/">
<Icon className="pi pi-home" />
</Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Link href="#">Components</Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Link href="#">Form</Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Link href="/inputtext">InputText</Link>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb>
</div>
);
}
A breadcrumb can be controlled by managing the current page state.
'use client';
import Link from 'next/link';
import { Breadcrumb } from 'primereact/breadcrumb';
import * as React from 'react';
export default function ControlledDemo() {
const [currentPage, setCurrentPage] = React.useState('reports');
return (
<div className="flex justify-center">
<Breadcrumb onAction={(key: string) => setCurrentPage(key)}>
<Breadcrumb.List>
<Breadcrumb.Item uKey="home" isCurrent={currentPage === 'home'}>
<Link href="#controlled">Home</Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item uKey="users" isCurrent={currentPage === 'users'}>
<Link href="#controlled">Users</Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item uKey="documents" isCurrent={currentPage === 'documents'}>
<Link href="#controlled">Documents</Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item uKey="work" isCurrent={currentPage === 'work'}>
<Link href="#controlled">Work</Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item uKey="reports" isCurrent={currentPage === 'reports'}>
<Link href="#controlled">Reports</Link>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb>
</div>
);
}
A breadcrumb allows customization of the separator between items.
'use client';
import { Icon } from '@primereact/core/icon';
import Link from 'next/link';
import { Breadcrumb } from 'primereact/breadcrumb';
export default function CustomSeparatorDemo() {
return (
<div className="flex justify-center">
<Breadcrumb>
<Breadcrumb.List>
<Breadcrumb.Item>
<Link href="/">
<Icon className="pi pi-home" />
</Link>
</Breadcrumb.Item>
<Breadcrumb.Separator>/</Breadcrumb.Separator>
<Breadcrumb.Item>
<Link href="#">Products</Link>
</Breadcrumb.Item>
<Breadcrumb.Separator>/</Breadcrumb.Separator>
<Breadcrumb.Item>
<Link href="#">
<Icon className="pi pi-bolt" /> Electronics
</Link>
</Breadcrumb.Item>
<Breadcrumb.Separator>/</Breadcrumb.Separator>
<Breadcrumb.Item>
<Link href="#">Laptops</Link>
</Breadcrumb.Item>
<Breadcrumb.Separator>/</Breadcrumb.Separator>
<Breadcrumb.Item>
<Link href="#">Dell</Link>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb>
</div>
);
}
A breadcrumb allows customization of the items.
'use client';
import { Icon } from '@primereact/core/icon';
import Link from 'next/link';
import { Badge } from 'primereact/badge';
import { Breadcrumb } from 'primereact/breadcrumb';
import { Menu } from 'primereact/menu';
import * as React from 'react';
export default function CustomItemDemo() {
const [selectedBrand, setSelectedBrand] = React.useState('Apple');
const brands = [{ label: 'Apple' }, { label: 'Dell' }, { label: 'HP' }, { label: 'Lenovo' }, { label: 'Asus' }];
return (
<div className="flex justify-center">
<Breadcrumb>
<Breadcrumb.List>
<Breadcrumb.Item>
<Link href="#" className="flex items-center gap-2">
<Icon className="pi pi-home" />
Home
</Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Link href="#">Products</Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Link href="#" className="flex items-center gap-2">
<Icon className="pi pi-bolt" />
Electronics
</Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Link href="#" className="flex items-center gap-2">
<Icon className="pi pi-desktop" />
Computers
</Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Link href="#" className="flex items-center gap-2">
Laptops
<Badge shape="circle">5</Badge>
</Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Menu>
<Menu.Trigger variant="text" className="flex items-center gap-2 px-0">
{selectedBrand}
<Icon className="pi pi-chevron-down text-xs" />
</Menu.Trigger>
<Menu.Portal>
<Menu.List>
<Menu.Label>Select Brand</Menu.Label>
{brands.map((brand) => (
<Menu.CheckboxItem
key={brand.label}
checked={selectedBrand === brand.label}
onCheckedChange={() => setSelectedBrand(brand.label)}
>
<Menu.CheckboxIcon />
{brand.label}
</Menu.CheckboxItem>
))}
</Menu.List>
</Menu.Portal>
</Menu>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb>
</div>
);
}