# 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`](https://www.telerik.com/kendo-angular-ui-develop/components/navigation/api/breadcrumbcomponent#items) property and bind it to an array of [`BreadcrumbItem`](https://www.telerik.com/kendo-angular-ui-develop/components/navigation/api/breadcrumbitem) elements.

The Breadcrumb provides various configuration options and enables you to do the following:

<Row>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#setting-the-item-text">
      <ComponentTitle>Specify the Text</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Set the textual content for each Breadcrumb item using the text property.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#disabling-specific-items">
      <ComponentTitle>Disable Specific Items</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Mark specific Breadcrumb items as disabled to prevent user interaction.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#displaying-icons">
      <ComponentTitle>Display Icons</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Add SVG icons, font icons, or third-party icons to enhance item visual presentation.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#displaying-item-images">
      <ComponentTitle>Display Item Images</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Show custom images inside Breadcrumb items using the imageUrl property.</ComponentDescription>
    </Component>
  </Column>
</Row>

## Setting the Item Text

You can set the text of the Breadcrumb's items by utilizing the [`text`](https://www.telerik.com/kendo-angular-ui-develop/components/navigation/api/breadcrumbitem#text) property.

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/navigation/breadcrumb/text/source.txt)

## Disabling Specific Items

You can also mark a Breadcrumb item as disabled by using the [`disabled`](https://www.telerik.com/kendo-angular-ui-develop/components/navigation/api/breadcrumbitem#disabled) property.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/navigation/breadcrumb/disabled/source.txt)

## Displaying Icons

Depending on the configuration of the project, you can enhance the content of the Breadcrumb by displaying:

* [SVG icons](https://www.telerik.com/kendo-angular-ui-develop/components/navigation/breadcrumb/item-appearance#displaying-svg-icons)
* [Font icons](https://www.telerik.com/kendo-angular-ui-develop/components/navigation/breadcrumb/item-appearance#displaying-font-icons)
* [Third-party library icons](https://www.telerik.com/kendo-angular-ui-develop/components/navigation/breadcrumb/item-appearance#displaying-font-icons)
* [Third-party library icons](https://www.telerik.com/kendo-angular-ui-develop/components/navigation/breadcrumb/item-appearance#displaying-font-icons)
* [Images](https://www.telerik.com/kendo-angular-ui-develop/components/navigation/breadcrumb/item-appearance#displaying-item-images)

> 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](https://www.telerik.com/kendo-angular-ui-develop/components/styling/migrating-font-svg#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](https://www.telerik.com/kendo-angular-ui-develop/components/icons/svgicon/svgicon-list), and set the [`svgIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/navigation/api/breadcrumbitem#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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/navigation/breadcrumb/svgicon/source.txt)

### Displaying Font Icons

To display an Font icon inside the Breadcrumb:

1. Use the [`ICON_SETTINGS`](https://www.telerik.com/kendo-angular-ui-develop/components/icons/api/icon_settings) token of the Icons package and set the icon type to `font`. For more information, go to the topic about [`icon settings`](https://www.telerik.com/kendo-angular-ui-develop/components/icons/icon-settings).
2. Depending on the font icons library, you can set the:
   * [`icon`](https://www.telerik.com/kendo-angular-ui-develop/components/navigation/api/breadcrumbitem#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](https://www.telerik.com/kendo-angular-ui-develop/components/icons/icon/icon-list).
     ```ts
     public items: BreadCrumbItem[] = [
         {
             icon: 'home',
         },
     ];
     ```
   * [`iconClass`](https://www.telerik.com/kendo-angular-ui-develop/components/navigation/api/breadcrumbitem#iconclass) property to a third-party font icon like [FontAwesome](https://fontawesome.com/).
     ```ts
     public items: BreadCrumbItem[] = [
         {
             iconClass: 'fa fa-home fa-fw',
         },
     ];
     ```

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/navigation/breadcrumb/icons/source.txt)

## Displaying Item Images

The Breadcrumb allows you to show custom images inside its items by utilizing the [`imageUrl`](https://www.telerik.com/kendo-angular-ui-develop/components/navigation/api/breadcrumbitem#imageurl) property.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/navigation/breadcrumb/images/source.txt)

## Suggested Links

* [API Reference of the Breadcrumb Component](https://www.telerik.com/kendo-angular-ui-develop/components/navigation/api/breadcrumbcomponent)
* [BreadCrumbItem](https://www.telerik.com/kendo-angular-ui-develop/components/navigation/api/breadcrumbitem)