New to Kendo UI for Vue? Start a free 30-day trial

Customizing Breadcrumb

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-breadcrumb-border-widthNumber0px0px
Description
The width of the border around the Breadcrumb.
$kendo-breadcrumb-margin-xNullnullnull
Description
The horizontal margin of the Breadcrumb.
$kendo-breadcrumb-margin-yNullnullnull
Description
The vertical margin of the Breadcrumb.
$kendo-breadcrumb-padding-xNullnullnull
Description
The horizontal padding of the Breadcrumb.
$kendo-breadcrumb-padding-yNullnullnull
Description
The vertical padding of the Breadcrumb.
$kendo-breadcrumb-font-familyString$kendo-font-familyinherit
Description
The font family of the Breadcrumb.
$kendo-breadcrumb-font-sizeNumber$kendo-font-size-md1rem
Description
The font size of the Breadcrumb.
$kendo-breadcrumb-sm-font-sizeNumber$kendo-font-size-sm0.875rem
Description
The font size of the small Breadcrumb.
$kendo-breadcrumb-md-font-sizeNumber$kendo-breadcrumb-font-size1rem
Description
The font size of the medium Breadcrumb.
$kendo-breadcrumb-lg-font-sizeNumber$kendo-font-size-lg1.25rem
Description
The font size of the large Breadcrumb.
$kendo-breadcrumb-line-heightNumber$kendo-line-height-md1.5
Description
The line-height of the Breadcrumb.
$kendo-breadcrumb-sm-line-heightNumber$kendo-line-height-md1.5
Description
The line-height of the small Breadcrumb.
$kendo-breadcrumb-md-line-heightNumber$kendo-breadcrumb-line-height1.5
Description
The line-height of the medium Breadcrumb.
$kendo-breadcrumb-lg-line-heightNumber$kendo-line-height-lg1.75
Description
The line-height of the height Breadcrumb.
$kendo-breadcrumb-focus-shadowNull$kendo-focus-shadownull
Description
The box shadow of the focused Breadcrumb.
$kendo-breadcrumb-link-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the Breadcrumb link.
$kendo-breadcrumb-sm-link-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-xString$kendo-breadcrumb-link-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-xStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the large Breadcrumb link.
$kendo-breadcrumb-link-padding-yStringk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)
Description
The vertical padding of the Breadcrumb link.
$kendo-breadcrumb-sm-link-padding-yStringk-spacing(1)var(--kendo-spacing-1, 0.25rem)
Description
The vertical padding of the small Breadcrumb link.
$kendo-breadcrumb-md-link-padding-yString$kendo-breadcrumb-link-padding-yvar(--kendo-spacing-1\.5, 0.375rem)
Description
The vertical padding of the medium Breadcrumb link.
$kendo-breadcrumb-lg-link-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the large Breadcrumb link.
$kendo-breadcrumb-link-border-radiusNumberk-map-get( $kendo-border-radii, md )0.25rem
Description
The border-radius of the Breadcrumb link.
$kendo-breadcrumb-icon-link-padding-yStringk-spacing(2)var(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the Breadcrumb link icon.
$kendo-breadcrumb-sm-icon-link-padding-yStringk-spacing(1.5)var(--kendo-spacing-1\.5, 0.375rem)
Description
The vertical padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-yString$kendo-breadcrumb-icon-link-padding-yvar(--kendo-spacing-2, 0.5rem)
Description
The vertical padding of the medium Breadcrumb link icon.
$kendo-breadcrumb-lg-icon-link-padding-yStringk-spacing(3)var(--kendo-spacing-3, 0.75rem)
Description
The vertical padding of the large Breadcrumb link icon.
$kendo-breadcrumb-icon-link-padding-xString$kendo-breadcrumb-icon-link-padding-yvar(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the Breadcrumb link icon.
$kendo-breadcrumb-sm-icon-link-padding-xString$kendo-breadcrumb-sm-icon-link-padding-yvar(--kendo-spacing-1\.5, 0.375rem)
Description
The horizontal padding of the small Breadcrumb link icon.
$kendo-breadcrumb-md-icon-link-padding-xString$kendo-breadcrumb-icon-link-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the medium Breadcrumb link icon.
$kendo-breadcrumb-lg-icon-link-padding-xString$kendo-breadcrumb-lg-icon-link-padding-yvar(--kendo-spacing-3, 0.75rem)
Description
The horizontal padding of the large Breadcrumb link icon.
$kendo-breadcrumb-link-icon-spacingString$kendo-icon-spacingk-spacing(2)
Description
The spacing of the Breadcrumb link icon.
$kendo-breadcrumb-link-focus-shadowNull$kendo-focus-shadownull
Description
The box shadow of the focused Breadcrumb link.
$kendo-breadcrumb-sizesMap( sm: ( link-padding-x: $kendo-breadcrumb-sm-link-padding-x, link-padding-y: $kendo-breadcrumb-sm-link-padding-y, icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x, icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y, font-size: $kendo-breadcrumb-sm-font-size, line-height: $kendo-breadcrumb-sm-line-height ), md: ( link-padding-x: $kendo-breadcrumb-md-link-padding-x, link-padding-y: $kendo-breadcrumb-md-link-padding-y, icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x, icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y, font-size: $kendo-breadcrumb-md-font-size, line-height: $kendo-breadcrumb-md-line-height ), lg: ( link-padding-x: $kendo-breadcrumb-lg-link-padding-x, link-padding-y: $kendo-breadcrumb-lg-link-padding-y, icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x, icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y, font-size: $kendo-breadcrumb-lg-font-size, line-height: $kendo-breadcrumb-lg-line-height ) )(sm: (link-padding-x: var(--kendo-spacing-2, 0.5rem), link-padding-y: var(--kendo-spacing-1, 0.25rem), icon-link-padding-x: var(--kendo-spacing-1\.5, 0.375rem), icon-link-padding-y: var(--kendo-spacing-1\.5, 0.375rem), font-size: 0.875rem, line-height: 1.5), md: (link-padding-x: var(--kendo-spacing-2, 0.5rem), link-padding-y: var(--kendo-spacing-1\.5, 0.375rem), icon-link-padding-x: var(--kendo-spacing-2, 0.5rem), icon-link-padding-y: var(--kendo-spacing-2, 0.5rem), font-size: 1rem, line-height: 1.5), lg: (link-padding-x: var(--kendo-spacing-2, 0.5rem), link-padding-y: var(--kendo-spacing-2, 0.5rem), icon-link-padding-x: var(--kendo-spacing-3, 0.75rem), icon-link-padding-y: var(--kendo-spacing-3, 0.75rem), font-size: 1.25rem, line-height: 1.75))
Description
The sizes map for the Breadcrumb.

In this article

Not finding the help you need?