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

BreadCrumbComponent

Represents the Kendo UI Breadcrumb component for Angular.

Use the Breadcrumb component to allow users to navigate through a hierarchical structure. The component automatically handles overflow scenarios and supports customizable separators, templates, and collapse modes.

typescript
@Component({
     selector: 'my-app',
     template: `
         <kendo-breadcrumb
             [items]="items"
             (itemClick)="onItemClick($event)">
         </kendo-breadcrumb>
     `
})
class AppComponent {
     public items: BreadCrumbItem[] = [
         { text: 'Home', title: 'Home', icon: 'home' },
         { text: 'Kids', title: 'Kids' },
         { text: '8y-16y', title: '8y-16y', disabled: true },
         { text: 'New collection', title: 'New collection' },
         { text: 'Jeans', title: 'Jeans' }
     ];

     public onItemClick(item: BreadCrumbItem): void {
         console.log(item);
     }
}

Selector

kendo-breadcrumb

Export Name

Accessible in templates as #kendoBreadCrumbInstance="kendoBreadCrumb"

Inputs

NameTypeDefaultDescription

collapseMode

BreadCrumbCollapseMode

auto

Controls the collapse mode of the Breadcrumb. For more information and example, refer to the Collapse Modes article.

items

any[]

Configures the collection of items that will be rendered in the Breadcrumb.

separatorIcon

string

Specifies the name of a built-in font icon in a Kendo UI theme to be rendered as a separator.

separatorSVGIcon

SVGIcon

Defines an SVGIcon to be rendered as a separator.

size

BreadcrumbSize

medium

Determines the padding of all Breadcrumb elements.

Events

NameTypeDescription

itemClick

EventEmitter<BreadCrumbItem>

Fires when you click a Breadcrumb item. The event will not be fired by disabled items and the last item.

In this article
SelectorExport NameInputsEvents
Not finding the help you need?
Contact Support