Item Appearance
The Kendo UI for Vue Breadcrumb component provides different options for customizing the appearance of the items.
Size
The 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 10pxmedium
(default) - sets the padding of the elements to 4px 10pxlarge
- sets the padding of the elements to 6px 10px
The following example demonstrates how to define the Breadcrumb size:
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.
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.