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.
Definition
Package:@progress/kendo-angular-navigation
Selector:kendo-breadcrumb
Export Name:Accessible in templates as #kendoBreadCrumbInstance="kendoBreadCrumb"
Syntax:
@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);
}
}Inputs
Controls the collapse mode of the Breadcrumb. For more information and example, refer to the Collapse Modes article.
auto
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.
Determines the padding of all Breadcrumb elements. The default value is set by the Kendo theme.
Events
Fires when you click a Breadcrumb item. The event will not be fired by disabled items and the last item.