• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

Item Appearance

The Breadcrumb component provides different options for customizing the appearance of the items.

Size

The KendoReact Breadcrumb allows selecting a predefined size option that changes its size.

To change the default size of the Breadcrumb, set its size property which will change the padding of its elements. The available size options are:

  • small - sets the padding of the elements to 2px 10px
  • medium (default) - sets the padding of the elements to 4px 10px
  • large - sets the padding of the elements to 6px 10px

The following example demonstrates how to define the Breadcrumb size:

Example
View Source
Change Theme:

Item SVG Icon

The Breadcrumb enables you to add an icon and icon class inside the items. To achieve this, set the icon inside the data object property of the Breadcrumb component. To provide custom icon css class, set the iconClass inside the BreadcrumbLink component.

Example
View Source
Change Theme:

Custom icon

The Breadcrumb enables you to set a custom icon item. To achieve this, set the icon inside the data property of the Breadcrumb component that sets the icon inside the BreadcrumbLink component.

Example
View Source
Change Theme:

In this article

Not finding the help you need?