• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
New to Kendo UI for Angular? Start a free 30-day trial

BreadCrumbComponent

Represents the Kendo UI Breadcrumb component for Angular.

@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

Specifies the collapse mode of the Breadcrumb (see example).

The possible values are:

  • auto (default)—items are automatically collapsed based on the width of the Breadcrumb.
  • wrap—items are wrapped on multiple rows.
  • none—all items are expanded on the same row.

For more information and example refer to the Collapse Modes article.

items

any[]

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

separatorIcon

string

Defines a name of a built-in icon in a Kendo UI theme.

separatorSVGIcon

SVGIcon

Defines an SVGIcon to be rendered as a separator.

size

BreadcrumbSize

Specifies the padding of all Breadcrumb elements.

The possible values are:

  • small
  • medium (default)
  • large
  • none

Events

NameTypeDescription

itemClick

EventEmitter<BreadCrumbItem>

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

In this article

Not finding the help you need?