Items Appearance
The Breadcrumb component allows you to modify its textual content and styling according to the specific project requirements.
To configure the Breadcrumb items, use its built-in items
property and bind it to an array of BreadcrumbItem
elements.
The Breadcrumb provides various configuration options and enables you to do the following:
Setting the Item Text
You can set the text of the Breadcrumb's items by utilizing the text
property.
The following example demonstrates how to set the text
property of the Breadcrumb.
Disabling Specific Items
You can also mark a Breadcrumb item as disabled by using the disabled
property.
Displaying Icons
Depending on the configuration of the project, you can enhance the content of the Breadcrumb by displaying:
As of R2 2023 (
v13.0.0
) the default icon type in the Kendo UI for Angular components and Kendo UI themes is changed fromfont
tosvg
. Set thesvgIcon
property, or Continue Using Font Icons.
Displaying SVG Icons
To display an SVG icon inside the Breadcrumb, select the desired one from the list of SVG icons supported by Kendo UI for Angular, and set the svgIcon
property to the necessary icon name.
public home: SVGIcon = homeIcon;
public items: BreadCrumbItem[] = [
{
svgIcon: this.home,
},
];
The following example demonstrates how to set the svgIcon
property of the Breadcrumb.
Displaying Font Icons
To display an Font icon inside the Breadcrumb:
- Use the
ICON_SETTINGS
token of the Icons package and set the icon type tofont
. For more information, go to the topic abouticon settings
. - Depending on the font icons library, you can set the:
icon
property to a font icon in the Kendo UI theme. For details, go to the list of font icons supported by Kendo UI for Angular.tspublic items: BreadCrumbItem[] = [ { icon: 'home', }, ];
iconClass
property to a third-party font icon like FontAwesome.tspublic items: BreadCrumbItem[] = [ { iconClass: 'fa fa-home fa-fw', }, ];
The following example demonstrates how to set the icon
and iconClass
properties of the Breadcrumb.
Displaying Item Images
The Breadcrumb allows you to show custom images inside its items by utilizing the imageUrl
property.