Breadcrumb Breadcrumb provides contextual information about page hierarchy..

Import

import {Breadcrumb} from 'primeng/primeng';

Getting Started

Breadcrumb requires a list element where each item contains an anchor.

<p-breadcrumb>
    <ul>
        <li><a href="#"><span>Label of item 1</span></a></li>
        <li><a href="#"><span>Label of item 2</span></a></li>
        <li><a href="#"><span>Label of item 3</span></a></li>
    </ul>
</p-breadcrumb>

Attributes

Name Type Default Description
style string null Inline style of the component.
styleClass string null Style class of the component.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name Element
ui-breadcrumb Container element.
ui-menuitem Menuitem element.
ui-menuitem-text Label of a menuitem.
ui-breadcrumb-chevron Chevron element.

Dependencies

PrimeUI Breadcrumb.

<p-breadcrumb>
    <ul>
        <li><a href="#"><span>Categories</span></a></li>
        <li><a href="#"><span>Sports</span></a></li>
        <li><a href="#"><span>Football</span></a></li>
        <li><a href="#"><span>Countries</span></a></li>
        <li><a href="#"><span>Spain</span></a></li>
        <li><a href="#"><span>F.C. Barcelona</span></a></li>
        <li><a href="#"><span>Squad</span></a></li>
        <li><a href="#"><span>Lionel Messi</span></a></li>
    </ul>
</p-breadcrumb>