Breadcrumb – providing contextual information about the page hierarchy

The Breadcrumb component provides contextual information about the page hierarchy. It allows you to keep track of their locations in programs, documents, and websites. This typically appears as horizontal on top of the web page separated by a greater than operator (>) as a hierarchy separator. This menu variation consists of a common menu model API to define its items. These menu items (collection of menu items) are connected to a model property.

A basic Breadcrumb example of an e-commerce application to purchase electrical items would be as follows:

<p-breadcrumb [model]="items"></p-breadcrumb>

The item's model property is an array of the MenuItem type. The possible options or properties for the MenuModel API are described in the beginning of the section. In this example, we define both label and command actions for menu items. The list of menu items need to be organized to display items as shown here:

this...