Breadcrumb

Breadcrumb provides contextual information about page hierarchy.

Import via Module


import { BreadCrumb } from 'primereact/breadcrumb';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/breadcrumb/breadcrumb.min.js"></script>

MenuModel API

BreadCrumb uses the common menumodel api to define its items, visit MenuModel for details.

Getting Started

BreadCrumb requires a collection of menuitems as its model.


const items = [
    { label: 'Categories' },
    { label: 'Sports' },
    { label: 'Football' },
    { label: 'Countries' },
    { label: 'Spain' },
    { label: 'F.C. Barcelona' },
    { label: 'Squad' },
    { label: 'Lionel Messi', url: 'https://en.wikipedia.org/wiki/Lionel_Messi' }
];

const home = { icon: 'pi pi-home', url: 'https://www.primefaces.org/primereact' }


<BreadCrumb model={items} home={home}/>

Properties

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
model	MenuItem[]	null	An array of menuitems.
home	MenuItem	null	MenuItem configuration for the home icon.
style	string	null	Inline style of the component.
className	string	null	Style class of the component.