New to Kendo UI for AngularStart a free 30-day trial

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.

Change Theme
Theme
Loading ...

Disabling Specific Items

You can also mark a Breadcrumb item as disabled by using the disabled property.

Change Theme
Theme
Loading ...

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 from font to svg. Set the svgIcon 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.

ts
public home: SVGIcon = homeIcon;

public items: BreadCrumbItem[] = [
    {
        svgIcon: this.home,
    },
];

The following example demonstrates how to set the svgIcon property of the Breadcrumb.

Change Theme
Theme
Loading ...

Displaying Font Icons

To display an Font icon inside the Breadcrumb:

  1. Use the ICON_SETTINGS token of the Icons package and set the icon type to font. For more information, go to the topic about icon settings.
  2. Depending on the font icons library, you can set the:

The following example demonstrates how to set the icon and iconClass properties of the Breadcrumb.

Change Theme
Theme
Loading ...

Displaying Item Images

The Breadcrumb allows you to show custom images inside its items by utilizing the imageUrl property.

Change Theme
Theme
Loading ...