diff --git a/packages/bootstrap/docs/customization-breadcrumb.md b/packages/bootstrap/docs/customization-breadcrumb.md
deleted file mode 100644
index 7cdefd617ac..00000000000
--- a/packages/bootstrap/docs/customization-breadcrumb.md
+++ /dev/null
@@ -1,673 +0,0 @@
----
-title: Customizing Breadcrumb
-description: "Refer to the list of the Kendo UI Bootstrap theme variables available for customization."
-slug: variables_kendothemebootstrap_breadcrumb
-position: 9
----
-
-# Customizing Breadcrumb
-
-## Variables
-
-The following table lists the available variables for customization.
-
-<table class="theme-variables">
-    <colgroup>
-    <col style="width: 200px; white-space:nowrap;" />
-    <col />
-    <col />
-    <col />
-</colgroup>
-<thead>
-    <tr>
-        <th>Name</th>
-        <th>Type</th>
-        <th>Default value</th>
-        <th>Computed value</th>
-    </tr>
-</thead>
-<tbody>
-        <tr>
-    <td>$kendo-breadcrumb-border-width</td>
-    <td>Number</td>
-    <td><code>0px</code></td>
-    <td><code>0px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the border around the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-margin-x</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal margin of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-margin-y</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical margin of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-padding-x</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-padding-y</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-font-family</td>
-    <td>List</td>
-    <td><code>$kendo-font-family</code></td>
-    <td><code>system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font family of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-md</code></td>
-    <td><code>1rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-sm</code></td>
-    <td><code>0.875rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the small Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-font-size</code></td>
-    <td><code>1rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the medium Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-md</code></td>
-    <td><code>1rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the large Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-md</code></td>
-    <td><code>1.5</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-line-height</td>
-    <td>Number</td>
-    <td><code>k-math-div( 20, 14 )</code></td>
-    <td><code>1.4285714286</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the small Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-line-height</code></td>
-    <td><code>1.5</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the medium Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-md</code></td>
-    <td><code>1.5</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the height Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-bg</td>
-    <td>Color</td>
-    <td><code>$kendo-component-bg</code></td>
-    <td><span class="color-preview" style="background-color: #ffffff"></span><code>#ffffff</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The base background of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-text</td>
-    <td>Color</td>
-    <td><code>$kendo-component-text</code></td>
-    <td><span class="color-preview" style="background-color: #212529"></span><code>#212529</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The base text color of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-border</td>
-    <td>Color</td>
-    <td><code>$kendo-component-border</code></td>
-    <td><span class="color-preview" style="background-color: #dee2e6"></span><code>#dee2e6</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The base border color of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-focus-shadow</td>
-    <td>List</td>
-    <td><code>0 0 2px 1px rgba( black, .06 )</code></td>
-    <td><code>0 0 2px 1px rgba(0, 0, 0, 0.06)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 3 )</code></td>
-    <td><code>0.75rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 3 )</code></td>
-    <td><code>0.75rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-link-padding-x</code></td>
-    <td><code>0.75rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 3 )</code></td>
-    <td><code>0.75rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 1.5 )</code></td>
-    <td><code>0.375rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-link-padding-y</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-link-padding-y</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2.5 )</code></td>
-    <td><code>0.625rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-border-radius</td>
-    <td>Number</td>
-    <td><code>$kendo-border-radius-md</code></td>
-    <td><code>0.375rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border-radius of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 3 )</code></td>
-    <td><code>0.75rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-y</code></td>
-    <td><code>0.75rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 3.5 )</code></td>
-    <td><code>0.875rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-y</code></td>
-    <td><code>0.75rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-sm-icon-link-padding-y</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-x</code></td>
-    <td><code>0.75rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-lg-icon-link-padding-y</code></td>
-    <td><code>0.875rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-initial-text</td>
-    <td>String</td>
-    <td><code>inherit</code></td>
-    <td><code>inherit</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-icon-spacing</td>
-    <td>Number</td>
-    <td><code>$kendo-icon-spacing</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-text</td>
-    <td>Color</td>
-    <td><code>$kendo-link-text</code></td>
-    <td><span class="color-preview" style="background-color: #0d6efd"></span><code>#0d6efd</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-hover-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the hovered Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-hover-text</td>
-    <td>Color</td>
-    <td><code>$kendo-link-hover-text</code></td>
-    <td><span class="color-preview" style="background-color: #0a58ca"></span><code>#0a58ca</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the hovered Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-hover-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the hovered Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-shadow</td>
-    <td>List</td>
-    <td><code>inset 0 0 0 3px rgba( $kendo-breadcrumb-text, .25 )</code></td>
-    <td><code>inset 0 0 0 3px rgba(33, 37, 41, 0.25)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-text</td>
-    <td>Color</td>
-    <td><code>$kendo-link-text</code></td>
-    <td><span class="color-preview" style="background-color: #0d6efd"></span><code>#0d6efd</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-hover-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the hovered Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-hover-text</td>
-    <td>Color</td>
-    <td><code>$kendo-link-hover-text</code></td>
-    <td><span class="color-preview" style="background-color: #0a58ca"></span><code>#0a58ca</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the hovered Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-hover-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the hovered Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-shadow</td>
-    <td>List</td>
-    <td><code>$kendo-breadcrumb-link-focus-shadow</code></td>
-    <td><code>inset 0 0 0 3px rgba(33, 37, 41, 0.25)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-current-item-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the current Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-current-item-text</td>
-    <td>Color</td>
-    <td><code>$kendo-color-secondary</code></td>
-    <td><span class="color-preview" style="background-color: #6c757d"></span><code>#6c757d</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the current Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-current-item-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the current Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sizes</td>
-    <td>Map</td>
-    <td><code>(
-    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
-    )
-)</code></td>
-    <td><code>(sm: (link-padding-x: 0.75rem, link-padding-y: 0.375rem, icon-link-padding-x: 0.5rem, icon-link-padding-y: 0.5rem, font-size: 0.875rem, line-height: 1.4285714286), md: (link-padding-x: 0.75rem, link-padding-y: 0.5rem, icon-link-padding-x: 0.75rem, icon-link-padding-y: 0.75rem, font-size: 1rem, line-height: 1.5), lg: (link-padding-x: 0.75rem, link-padding-y: 0.625rem, icon-link-padding-x: 0.875rem, icon-link-padding-y: 0.875rem, font-size: 1rem, line-height: 1.5))</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The sizes map for the Breadcrumb.</div></div>
-    </td>
-</tr>
-</tbody>
-</table>
-
-## Suggested Links
-
-* [Styling Overview]({% slug themesandstyles %})
-* [Web Font Icons]({% slug icons %})
-* [Preview of the Themed Components](../)
-
diff --git a/packages/bootstrap/docs/customization.md b/packages/bootstrap/docs/customization.md
index 0d42d29a2e7..05451e825b4 100644
--- a/packages/bootstrap/docs/customization.md
+++ b/packages/bootstrap/docs/customization.md
@@ -920,661 +920,6 @@ The following table lists the available variables for customizing the Bootstrap
 </tbody>
 </table>
 
-### Breadcrumb
-
-<table class="theme-variables">
-    <colgroup>
-    <col style="width: 200px; white-space:nowrap;" />
-    <col />
-    <col />
-    <col />
-</colgroup>
-<thead>
-    <tr>
-        <th>Name</th>
-        <th>Type</th>
-        <th>Default value</th>
-        <th>Computed value</th>
-    </tr>
-</thead>
-<tbody><tr>
-    <td>$kendo-breadcrumb-border-width</td>
-    <td>Number</td>
-    <td><code>0px</code></td>
-    <td><code>0px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the border around the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-margin-x</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal margin of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-margin-y</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical margin of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-padding-x</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-padding-y</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-font-family</td>
-    <td>List</td>
-    <td><code>$kendo-font-family</code></td>
-    <td><code>system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font family of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-md</code></td>
-    <td><code>1rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-sm</code></td>
-    <td><code>0.875rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the small Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-font-size</code></td>
-    <td><code>1rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the medium Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-md</code></td>
-    <td><code>1rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the large Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-md</code></td>
-    <td><code>1.5</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-line-height</td>
-    <td>Number</td>
-    <td><code>k-math-div( 20, 14 )</code></td>
-    <td><code>1.4285714286</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the small Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-line-height</code></td>
-    <td><code>1.5</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the medium Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-md</code></td>
-    <td><code>1.5</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the height Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-bg</td>
-    <td>Color</td>
-    <td><code>$kendo-component-bg</code></td>
-    <td><span class="color-preview" style="background-color: #ffffff"></span><code>#ffffff</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The base background of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-text</td>
-    <td>Color</td>
-    <td><code>$kendo-component-text</code></td>
-    <td><span class="color-preview" style="background-color: #212529"></span><code>#212529</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The base text color of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-border</td>
-    <td>Color</td>
-    <td><code>$kendo-component-border</code></td>
-    <td><span class="color-preview" style="background-color: #dee2e6"></span><code>#dee2e6</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The base border color of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-focus-shadow</td>
-    <td>List</td>
-    <td><code>0 0 2px 1px rgba( black, .06 )</code></td>
-    <td><code>0 0 2px 1px rgba(0, 0, 0, 0.06)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 3 )</code></td>
-    <td><code>0.75rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 3 )</code></td>
-    <td><code>0.75rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-link-padding-x</code></td>
-    <td><code>0.75rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 3 )</code></td>
-    <td><code>0.75rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 1.5 )</code></td>
-    <td><code>0.375rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-link-padding-y</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-link-padding-y</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2.5 )</code></td>
-    <td><code>0.625rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-border-radius</td>
-    <td>Number</td>
-    <td><code>$kendo-border-radius-md</code></td>
-    <td><code>0.375rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border-radius of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 3 )</code></td>
-    <td><code>0.75rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-y</code></td>
-    <td><code>0.75rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 3.5 )</code></td>
-    <td><code>0.875rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-y</code></td>
-    <td><code>0.75rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-sm-icon-link-padding-y</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-x</code></td>
-    <td><code>0.75rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-lg-icon-link-padding-y</code></td>
-    <td><code>0.875rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-initial-text</td>
-    <td>String</td>
-    <td><code>inherit</code></td>
-    <td><code>inherit</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-icon-spacing</td>
-    <td>Number</td>
-    <td><code>$kendo-icon-spacing</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-text</td>
-    <td>Color</td>
-    <td><code>$kendo-link-text</code></td>
-    <td><span class="color-preview" style="background-color: #0d6efd"></span><code>#0d6efd</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-hover-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the hovered Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-hover-text</td>
-    <td>Color</td>
-    <td><code>$kendo-link-hover-text</code></td>
-    <td><span class="color-preview" style="background-color: #0a58ca"></span><code>#0a58ca</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the hovered Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-hover-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the hovered Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-shadow</td>
-    <td>List</td>
-    <td><code>inset 0 0 0 3px rgba( $kendo-breadcrumb-text, .25 )</code></td>
-    <td><code>inset 0 0 0 3px rgba(33, 37, 41, 0.25)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-text</td>
-    <td>Color</td>
-    <td><code>$kendo-link-text</code></td>
-    <td><span class="color-preview" style="background-color: #0d6efd"></span><code>#0d6efd</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-hover-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the hovered Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-hover-text</td>
-    <td>Color</td>
-    <td><code>$kendo-link-hover-text</code></td>
-    <td><span class="color-preview" style="background-color: #0a58ca"></span><code>#0a58ca</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the hovered Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-hover-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the hovered Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-shadow</td>
-    <td>List</td>
-    <td><code>$kendo-breadcrumb-link-focus-shadow</code></td>
-    <td><code>inset 0 0 0 3px rgba(33, 37, 41, 0.25)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-current-item-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the current Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-current-item-text</td>
-    <td>Color</td>
-    <td><code>$kendo-color-secondary</code></td>
-    <td><span class="color-preview" style="background-color: #6c757d"></span><code>#6c757d</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the current Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-current-item-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the current Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sizes</td>
-    <td>Map</td>
-    <td><code>(
-    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
-    )
-)</code></td>
-    <td><code>(sm: (link-padding-x: 0.75rem, link-padding-y: 0.375rem, icon-link-padding-x: 0.5rem, icon-link-padding-y: 0.5rem, font-size: 0.875rem, line-height: 1.4285714286), md: (link-padding-x: 0.75rem, link-padding-y: 0.5rem, icon-link-padding-x: 0.75rem, icon-link-padding-y: 0.75rem, font-size: 1rem, line-height: 1.5), lg: (link-padding-x: 0.75rem, link-padding-y: 0.625rem, icon-link-padding-x: 0.875rem, icon-link-padding-y: 0.875rem, font-size: 1rem, line-height: 1.5))</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The sizes map for the Breadcrumb.</div></div>
-    </td>
-</tr>
-</tbody>
-</table>
-
 ### Button
 
 <table class="theme-variables">
diff --git a/packages/bootstrap/scss/breadcrumb/_variables.scss b/packages/bootstrap/scss/breadcrumb/_variables.scss
index 0ced7ffd7b5..71ef8dc957f 100644
--- a/packages/bootstrap/scss/breadcrumb/_variables.scss
+++ b/packages/bootstrap/scss/breadcrumb/_variables.scss
@@ -1,232 +1,59 @@
 // Breadcrumb
 
-/// The width of the border around the Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-border-width: 0px !default;
-
-/// The horizontal margin of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-margin-x: null !default;
-/// The vertical margin of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-margin-y: null !default;
-
-/// The horizontal padding of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-padding-x: null !default;
-/// The vertical padding of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-padding-y: null !default;
+$kendo-breadcrumb-border-width: 0px !default;
 
-/// The font family of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-font-family: $kendo-font-family !default;
-
-/// The font size of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-font-size: $kendo-font-size-md !default;
-/// The font size of the small Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-font-size: $kendo-font-size-sm !default;
-/// The font size of the medium Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-md-font-size: $kendo-breadcrumb-font-size !default;
-/// The font size of the large Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-font-size: $kendo-font-size-md !default;
-
-/// The line-height of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-line-height: $kendo-line-height-md !default;
-/// The line-height of the small Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-line-height: k-math-div( 20, 14 ) !default;
-/// The line-height of the medium Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-md-line-height: $kendo-breadcrumb-line-height !default;
-/// The line-height of the height Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-line-height: $kendo-line-height-md !default;
 
-/// The base background of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-bg: $kendo-component-bg !default;
-/// The base text color of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-text: $kendo-component-text !default;
-/// The base border color of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-border: $kendo-component-border !default;
 
-/// The box shadow of the focused Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .06 ) !default;
-
-/// The horizontal padding of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
-/// The horizontal padding of the small Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
-/// The horizontal padding of the medium Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
-/// The horizontal padding of the large Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
-
-/// The vertical padding of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-/// The vertical padding of the small Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
-/// The vertical padding of the medium Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-link-padding-y !default;
-/// The vertical padding of the large Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-y: k-map-get( $kendo-spacing, 2.5 ) !default;
-
-/// The border-radius of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-border-radius: $kendo-border-radius-md !default;
 
-/// The vertical padding of the Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-icon-link-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
-/// The vertical padding of the small Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-icon-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-/// The vertical padding of the medium Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y !default;
-/// The vertical padding of the large Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-icon-link-padding-y: k-map-get( $kendo-spacing, 3.5 ) !default;
+$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
+$kendo-breadcrumb-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-x !default;
 
-/// The horizontal padding of the Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-y !default;
-/// The horizontal padding of the small Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-y !default;
-/// The horizontal padding of the medium Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-md-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-x !default;
-/// The horizontal padding of the large Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-y !default;
+$kendo-breadcrumb-root-link-spacing: $kendo-breadcrumb-link-padding-x !default;
+$kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default;
 
-/// The text color of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-initial-text: inherit !default;
-/// The spacing of the Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default;
 
-/// The background color of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-bg: null !default;
-/// The text color of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-text: $kendo-link-text !default;
-/// The border color of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-border: null !default;
 
-/// The background color of the hovered Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-hover-bg: null !default;
-/// The text color of the hovered Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-hover-text: $kendo-link-hover-text !default;
-/// The border color of the hovered Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-hover-border: null !default;
 
-/// The background color of the focused Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-focus-bg: null !default;
-/// The text color of the focused Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-focus-text: null !default;
-/// The border color of the focused Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-focus-border: null !default;
-/// The box shadow of the focused Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-focus-shadow: inset 0 0 0 3px rgba( $kendo-breadcrumb-text, .25 ) !default;
 
-/// The background color of the Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-bg: null !default;
-/// The text color of the Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-text: $kendo-link-text !default;
-/// The border color of the Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-border: null !default;
 
-/// The background color of the hovered Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-bg: null !default;
-/// The text color of the hovered Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-text: $kendo-link-hover-text !default;
-/// The border color of the hovered Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-border: null !default;
 
-/// The background color of the focused Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-bg: null !default;
-/// The text color of the focused Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-text: null !default;
-/// The border color of the focused Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-border: null !default;
-/// The box shadow of the focused Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-shadow: $kendo-breadcrumb-link-focus-shadow !default;
 
-/// The background color of the current Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-current-item-bg: null !default;
-/// The text color of the current Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-current-item-text: $kendo-color-secondary !default;
-/// The border color of the current Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-current-item-border: null !default;
 
-
-/// The sizes map for the Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-sizes: (
-    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
-    )
-) !default;
+$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .06 ) !default;
diff --git a/packages/classic/docs/customization-breadcrumb.md b/packages/classic/docs/customization-breadcrumb.md
deleted file mode 100644
index 90bd7157808..00000000000
--- a/packages/classic/docs/customization-breadcrumb.md
+++ /dev/null
@@ -1,673 +0,0 @@
----
-title: Customizing Breadcrumb
-description: "Refer to the list of the Kendo UI Classic theme variables available for customization."
-slug: variables_kendothemeclassic_breadcrumb
-position: 9
----
-
-# Customizing Breadcrumb
-
-## Variables
-
-The following table lists the available variables for customization.
-
-<table class="theme-variables">
-    <colgroup>
-    <col style="width: 200px; white-space:nowrap;" />
-    <col />
-    <col />
-    <col />
-</colgroup>
-<thead>
-    <tr>
-        <th>Name</th>
-        <th>Type</th>
-        <th>Default value</th>
-        <th>Computed value</th>
-    </tr>
-</thead>
-<tbody>
-        <tr>
-    <td>$kendo-breadcrumb-border-width</td>
-    <td>Number</td>
-    <td><code>0px</code></td>
-    <td><code>0px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the border around the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-margin-x</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal margin of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-margin-y</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical margin of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-padding-x</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-padding-y</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-font-family</td>
-    <td>String</td>
-    <td><code>$kendo-font-family</code></td>
-    <td><code>inherit</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font family of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-md</code></td>
-    <td><code>14px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-md</code></td>
-    <td><code>14px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the small Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-font-size</code></td>
-    <td><code>14px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the medium Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-lg</code></td>
-    <td><code>16px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the large Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-md</code></td>
-    <td><code>1.4285714286</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-md</code></td>
-    <td><code>1.4285714286</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the small Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-line-height</code></td>
-    <td><code>1.4285714286</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the medium Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-lg</code></td>
-    <td><code>1.5</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the height Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-bg</td>
-    <td>Color</td>
-    <td><code>$kendo-component-bg</code></td>
-    <td><span class="color-preview" style="background-color: #ffffff"></span><code>#ffffff</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The base background of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-text</td>
-    <td>Color</td>
-    <td><code>$kendo-component-text</code></td>
-    <td><span class="color-preview" style="background-color: #272727"></span><code>#272727</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The base text color of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-border</td>
-    <td>Color</td>
-    <td><code>$kendo-component-border</code></td>
-    <td><span class="color-preview" style="background-color: #cacaca"></span><code>#cacaca</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The base border color of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-focus-shadow</td>
-    <td>List</td>
-    <td><code>0 0 2px 1px rgba(0, 0, 0, .06)</code></td>
-    <td><code>0 0 2px 1px rgba(0, 0, 0, 0.06)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-link-padding-x</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 1.5 )</code></td>
-    <td><code>6px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 1 )</code></td>
-    <td><code>4px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-link-padding-y</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-link-padding-y</code></td>
-    <td><code>6px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-border-radius</td>
-    <td>Number</td>
-    <td><code>$kendo-border-radius-md</code></td>
-    <td><code>4px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border-radius of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 1.5 )</code></td>
-    <td><code>6px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-y</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 3 )</code></td>
-    <td><code>12px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-y</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-sm-icon-link-padding-y</code></td>
-    <td><code>6px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-x</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-lg-icon-link-padding-y</code></td>
-    <td><code>12px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-initial-text</td>
-    <td>String</td>
-    <td><code>inherit</code></td>
-    <td><code>inherit</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-icon-spacing</td>
-    <td>Number</td>
-    <td><code>$kendo-icon-spacing</code></td>
-    <td><code>4px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-text</td>
-    <td>Color</td>
-    <td><code>$kendo-link-text</code></td>
-    <td><span class="color-preview" style="background-color: #f35800"></span><code>#f35800</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-hover-bg</td>
-    <td>Color</td>
-    <td><code>$kendo-base-bg</code></td>
-    <td><span class="color-preview" style="background-color: #f0f0f0"></span><code>#f0f0f0</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container">
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-hover-text</td>
-    <td>Color</td>
-    <td><code>$kendo-link-hover-text</code></td>
-    <td><span class="color-preview" style="background-color: #cc4a00"></span><code>#cc4a00</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the hovered Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-hover-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the hovered Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-text</td>
-    <td>Color</td>
-    <td><code>$kendo-link-text</code></td>
-    <td><span class="color-preview" style="background-color: #f35800"></span><code>#f35800</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-shadow</td>
-    <td>List</td>
-    <td><code>$kendo-focus-shadow</code></td>
-    <td><code>inset 0 0 0 2px rgba(0, 0, 0, 0.13)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-hover-bg</td>
-    <td>Color</td>
-    <td><code>$kendo-base-bg</code></td>
-    <td><span class="color-preview" style="background-color: #f0f0f0"></span><code>#f0f0f0</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the hovered Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-hover-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the hovered Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-hover-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the hovered Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-shadow</td>
-    <td>List</td>
-    <td><code>$kendo-breadcrumb-link-focus-shadow</code></td>
-    <td><code>inset 0 0 0 2px rgba(0, 0, 0, 0.13)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-current-item-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the current Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-current-item-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the current Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-current-item-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the current Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sizes</td>
-    <td>Map</td>
-    <td><code>(
-    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
-    )
-)</code></td>
-    <td><code>(sm: (link-padding-x: 8px, link-padding-y: 4px, icon-link-padding-x: 6px, icon-link-padding-y: 6px, font-size: 14px, line-height: 1.4285714286), md: (link-padding-x: 8px, link-padding-y: 6px, icon-link-padding-x: 8px, icon-link-padding-y: 8px, font-size: 14px, line-height: 1.4285714286), lg: (link-padding-x: 8px, link-padding-y: 8px, icon-link-padding-x: 12px, icon-link-padding-y: 12px, font-size: 16px, line-height: 1.5))</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The sizes map for the Breadcrumb.</div></div>
-    </td>
-</tr>
-</tbody>
-</table>
-
-## Suggested Links
-
-* [Styling Overview]({% slug themesandstyles %})
-* [Web Font Icons]({% slug icons %})
-* [Preview of the Themed Components](../)
-
diff --git a/packages/classic/docs/customization.md b/packages/classic/docs/customization.md
index 73d63ebbec6..39eaff5aae2 100644
--- a/packages/classic/docs/customization.md
+++ b/packages/classic/docs/customization.md
@@ -910,661 +910,6 @@ The following table lists the available variables for customizing the Classic th
 </tbody>
 </table>
 
-### Breadcrumb
-
-<table class="theme-variables">
-    <colgroup>
-    <col style="width: 200px; white-space:nowrap;" />
-    <col />
-    <col />
-    <col />
-</colgroup>
-<thead>
-    <tr>
-        <th>Name</th>
-        <th>Type</th>
-        <th>Default value</th>
-        <th>Computed value</th>
-    </tr>
-</thead>
-<tbody><tr>
-    <td>$kendo-breadcrumb-border-width</td>
-    <td>Number</td>
-    <td><code>0px</code></td>
-    <td><code>0px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the border around the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-margin-x</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal margin of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-margin-y</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical margin of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-padding-x</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-padding-y</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-font-family</td>
-    <td>String</td>
-    <td><code>$kendo-font-family</code></td>
-    <td><code>inherit</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font family of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-md</code></td>
-    <td><code>14px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-md</code></td>
-    <td><code>14px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the small Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-font-size</code></td>
-    <td><code>14px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the medium Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-lg</code></td>
-    <td><code>16px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the large Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-md</code></td>
-    <td><code>1.4285714286</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-md</code></td>
-    <td><code>1.4285714286</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the small Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-line-height</code></td>
-    <td><code>1.4285714286</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the medium Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-lg</code></td>
-    <td><code>1.5</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the height Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-bg</td>
-    <td>Color</td>
-    <td><code>$kendo-component-bg</code></td>
-    <td><span class="color-preview" style="background-color: #ffffff"></span><code>#ffffff</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The base background of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-text</td>
-    <td>Color</td>
-    <td><code>$kendo-component-text</code></td>
-    <td><span class="color-preview" style="background-color: #272727"></span><code>#272727</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The base text color of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-border</td>
-    <td>Color</td>
-    <td><code>$kendo-component-border</code></td>
-    <td><span class="color-preview" style="background-color: #cacaca"></span><code>#cacaca</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The base border color of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-focus-shadow</td>
-    <td>List</td>
-    <td><code>0 0 2px 1px rgba(0, 0, 0, .06)</code></td>
-    <td><code>0 0 2px 1px rgba(0, 0, 0, 0.06)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-link-padding-x</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 1.5 )</code></td>
-    <td><code>6px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 1 )</code></td>
-    <td><code>4px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-link-padding-y</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-link-padding-y</code></td>
-    <td><code>6px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-border-radius</td>
-    <td>Number</td>
-    <td><code>$kendo-border-radius-md</code></td>
-    <td><code>4px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border-radius of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 1.5 )</code></td>
-    <td><code>6px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-y</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 3 )</code></td>
-    <td><code>12px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-y</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-sm-icon-link-padding-y</code></td>
-    <td><code>6px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-x</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-lg-icon-link-padding-y</code></td>
-    <td><code>12px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-initial-text</td>
-    <td>String</td>
-    <td><code>inherit</code></td>
-    <td><code>inherit</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-icon-spacing</td>
-    <td>Number</td>
-    <td><code>$kendo-icon-spacing</code></td>
-    <td><code>4px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-text</td>
-    <td>Color</td>
-    <td><code>$kendo-link-text</code></td>
-    <td><span class="color-preview" style="background-color: #f35800"></span><code>#f35800</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-hover-bg</td>
-    <td>Color</td>
-    <td><code>$kendo-base-bg</code></td>
-    <td><span class="color-preview" style="background-color: #f0f0f0"></span><code>#f0f0f0</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container">
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-hover-text</td>
-    <td>Color</td>
-    <td><code>$kendo-link-hover-text</code></td>
-    <td><span class="color-preview" style="background-color: #cc4a00"></span><code>#cc4a00</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the hovered Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-hover-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the hovered Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-text</td>
-    <td>Color</td>
-    <td><code>$kendo-link-text</code></td>
-    <td><span class="color-preview" style="background-color: #f35800"></span><code>#f35800</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-shadow</td>
-    <td>List</td>
-    <td><code>$kendo-focus-shadow</code></td>
-    <td><code>inset 0 0 0 2px rgba(0, 0, 0, 0.13)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-hover-bg</td>
-    <td>Color</td>
-    <td><code>$kendo-base-bg</code></td>
-    <td><span class="color-preview" style="background-color: #f0f0f0"></span><code>#f0f0f0</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the hovered Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-hover-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the hovered Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-hover-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the hovered Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-shadow</td>
-    <td>List</td>
-    <td><code>$kendo-breadcrumb-link-focus-shadow</code></td>
-    <td><code>inset 0 0 0 2px rgba(0, 0, 0, 0.13)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-current-item-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the current Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-current-item-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the current Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-current-item-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the current Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sizes</td>
-    <td>Map</td>
-    <td><code>(
-    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
-    )
-)</code></td>
-    <td><code>(sm: (link-padding-x: 8px, link-padding-y: 4px, icon-link-padding-x: 6px, icon-link-padding-y: 6px, font-size: 14px, line-height: 1.4285714286), md: (link-padding-x: 8px, link-padding-y: 6px, icon-link-padding-x: 8px, icon-link-padding-y: 8px, font-size: 14px, line-height: 1.4285714286), lg: (link-padding-x: 8px, link-padding-y: 8px, icon-link-padding-x: 12px, icon-link-padding-y: 12px, font-size: 16px, line-height: 1.5))</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The sizes map for the Breadcrumb.</div></div>
-    </td>
-</tr>
-</tbody>
-</table>
-
 ### Button
 
 <table class="theme-variables">
diff --git a/packages/classic/scss/breadcrumb/_variables.scss b/packages/classic/scss/breadcrumb/_variables.scss
index d4f61b0691e..306608032ad 100644
--- a/packages/classic/scss/breadcrumb/_variables.scss
+++ b/packages/classic/scss/breadcrumb/_variables.scss
@@ -1,230 +1,59 @@
 // Breadcrumb
 
-/// The width of the border around the Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-border-width: 0px !default;
-
-/// The horizontal margin of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-margin-x: null !default;
-/// The vertical margin of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-margin-y: null !default;
-
-/// The horizontal padding of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-padding-x: null !default;
-/// The vertical padding of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-padding-y: null !default;
+$kendo-breadcrumb-border-width: 0px !default;
 
-/// The font family of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-font-family: $kendo-font-family !default;
-
-/// The font size of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-font-size: $kendo-font-size-md !default;
-/// The font size of the small Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-font-size: $kendo-font-size-md !default;
-/// The font size of the medium Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-md-font-size: $kendo-breadcrumb-font-size !default;
-/// The font size of the large Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-font-size: $kendo-font-size-lg !default;
-
-/// The line-height of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-line-height: $kendo-line-height-md !default;
-/// The line-height of the small Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-line-height: $kendo-line-height-md !default;
-/// The line-height of the medium Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-md-line-height: $kendo-breadcrumb-line-height !default;
-/// The line-height of the height Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-line-height: $kendo-line-height-lg !default;
 
-/// The base background of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-bg: $kendo-component-bg !default;
-/// The base text color of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-text: $kendo-component-text !default;
-/// The base border color of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-border: $kendo-component-border !default;
 
-/// The box shadow of the focused Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
-
-/// The horizontal padding of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-/// The horizontal padding of the small Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-/// The horizontal padding of the medium Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
-/// The horizontal padding of the large Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-
-/// The vertical padding of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
-/// The vertical padding of the small Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
-/// The vertical padding of the medium Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-link-padding-y !default;
-/// The vertical padding of the large Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-
-/// The border-radius of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-border-radius: $kendo-border-radius-md !default;
 
-/// The vertical padding of the Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-icon-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-/// The vertical padding of the small Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-icon-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
-/// The vertical padding of the medium Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y !default;
-/// The vertical padding of the large Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-icon-link-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
+$kendo-breadcrumb-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-x !default;
 
-/// The horizontal padding of the Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-y !default;
-/// The horizontal padding of the small Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-y !default;
-/// The horizontal padding of the medium Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-md-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-x !default;
-/// The horizontal padding of the large Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-y !default;
+$kendo-breadcrumb-root-link-spacing: $kendo-breadcrumb-link-padding-x !default;
+$kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default;
 
-/// The text color of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-initial-text: inherit !default;
-/// The spacing of the Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default;
 
-/// The background color of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-bg: null !default;
-/// The text color of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-text: $kendo-link-text !default;
-/// The border color of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-border: null !default;
 
-/// @group breadcrumb
 $kendo-breadcrumb-link-hover-bg: $kendo-base-bg !default;
-/// The text color of the hovered Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-hover-text: $kendo-link-hover-text !default;
-/// The border color of the hovered Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-hover-border: null !default;
 
-/// The background color of the focused Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-focus-bg: null !default;
-/// The text color of the focused Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-focus-text: $kendo-link-text !default;
-/// The border color of the focused Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-focus-border: null !default;
-/// The box shadow of the focused Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-focus-shadow: $kendo-focus-shadow !default;
 
-/// The background color of the Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-bg: null !default;
-/// The text color of the Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-text: null !default;
-/// The border color of the Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-border: null !default;
 
-/// The background color of the hovered Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-bg: $kendo-base-bg !default;
-/// The text color of the hovered Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-text: null !default;
-/// The border color of the hovered Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-border: null !default;
 
-/// The background color of the focused Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-bg: null !default;
-/// The text color of the focused Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-text: null !default;
-/// The border color of the focused Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-border: null !default;
-/// The box shadow of the focused Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-shadow: $kendo-breadcrumb-link-focus-shadow !default;
 
-/// The background color of the current Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-current-item-bg: null !default;
-/// The text color of the current Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-current-item-text: null !default;
-/// The border color of the current Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-current-item-border: null !default;
 
-/// The sizes map for the Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-sizes: (
-    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
-    )
-) !default;
+$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .06 ) !default;
diff --git a/packages/default/docs/customization-breadcrumb.md b/packages/default/docs/customization-breadcrumb.md
deleted file mode 100644
index 12bb054a7a6..00000000000
--- a/packages/default/docs/customization-breadcrumb.md
+++ /dev/null
@@ -1,673 +0,0 @@
----
-title: Customizing Breadcrumb
-description: "Refer to the list of the Kendo UI Default theme variables available for customization."
-slug: variables_kendothemedefault_breadcrumb
-position: 9
----
-
-# Customizing Breadcrumb
-
-## Variables
-
-The following table lists the available variables for customization.
-
-<table class="theme-variables">
-    <colgroup>
-    <col style="width: 200px; white-space:nowrap;" />
-    <col />
-    <col />
-    <col />
-</colgroup>
-<thead>
-    <tr>
-        <th>Name</th>
-        <th>Type</th>
-        <th>Default value</th>
-        <th>Computed value</th>
-    </tr>
-</thead>
-<tbody>
-        <tr>
-    <td>$kendo-breadcrumb-border-width</td>
-    <td>Number</td>
-    <td><code>0px</code></td>
-    <td><code>0px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the border around the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-margin-x</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal margin of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-margin-y</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical margin of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-padding-x</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-padding-y</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-font-family</td>
-    <td>String</td>
-    <td><code>$kendo-font-family</code></td>
-    <td><code>inherit</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font family of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-md</code></td>
-    <td><code>14px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-md</code></td>
-    <td><code>14px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the small Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-font-size</code></td>
-    <td><code>14px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the medium Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-lg</code></td>
-    <td><code>16px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the large Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-md</code></td>
-    <td><code>1.4285714286</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-md</code></td>
-    <td><code>1.4285714286</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the small Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-line-height</code></td>
-    <td><code>1.4285714286</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the medium Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-lg</code></td>
-    <td><code>1.5</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the height Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-bg</td>
-    <td>Color</td>
-    <td><code>$kendo-component-bg</code></td>
-    <td><span class="color-preview" style="background-color: #ffffff"></span><code>#ffffff</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The base background of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-text</td>
-    <td>Color</td>
-    <td><code>$kendo-component-text</code></td>
-    <td><span class="color-preview" style="background-color: #424242"></span><code>#424242</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The base text color of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-border</td>
-    <td>Color</td>
-    <td><code>$kendo-component-border</code></td>
-    <td><span class="color-preview" style="background-color: rgba(0, 0, 0, 0.08)"></span><code>rgba(0, 0, 0, 0.08)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The base border color of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-focus-shadow</td>
-    <td>List</td>
-    <td><code>0 0 2px 1px rgba(0, 0, 0, .06)</code></td>
-    <td><code>0 0 2px 1px rgba(0, 0, 0, 0.06)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-link-padding-x</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 1.5 )</code></td>
-    <td><code>6px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 1 )</code></td>
-    <td><code>4px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-link-padding-y</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-link-padding-y</code></td>
-    <td><code>6px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-border-radius</td>
-    <td>Number</td>
-    <td><code>$kendo-border-radius-md</code></td>
-    <td><code>4px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border-radius of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 1.5 )</code></td>
-    <td><code>6px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-y</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 3 )</code></td>
-    <td><code>12px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-y</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-sm-icon-link-padding-y</code></td>
-    <td><code>6px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-x</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-lg-icon-link-padding-y</code></td>
-    <td><code>12px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-initial-text</td>
-    <td>String</td>
-    <td><code>inherit</code></td>
-    <td><code>inherit</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-icon-spacing</td>
-    <td>Number</td>
-    <td><code>$kendo-icon-spacing</code></td>
-    <td><code>4px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-text</td>
-    <td>Color</td>
-    <td><code>$kendo-link-text</code></td>
-    <td><span class="color-preview" style="background-color: #ff6358"></span><code>#ff6358</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-hover-bg</td>
-    <td>Color</td>
-    <td><code>$kendo-base-bg</code></td>
-    <td><span class="color-preview" style="background-color: #fafafa"></span><code>#fafafa</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the hovered Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-hover-text</td>
-    <td>Color</td>
-    <td><code>$kendo-link-hover-text</code></td>
-    <td><span class="color-preview" style="background-color: #d6534a"></span><code>#d6534a</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the hovered Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-hover-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the hovered Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-text</td>
-    <td>Color</td>
-    <td><code>$kendo-link-text</code></td>
-    <td><span class="color-preview" style="background-color: #ff6358"></span><code>#ff6358</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-shadow</td>
-    <td>List</td>
-    <td><code>$kendo-focus-shadow</code></td>
-    <td><code>inset 0 0 0 2px rgba(0, 0, 0, 0.13)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-hover-bg</td>
-    <td>Color</td>
-    <td><code>$kendo-base-bg</code></td>
-    <td><span class="color-preview" style="background-color: #fafafa"></span><code>#fafafa</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the hovered Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-hover-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the hovered Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-hover-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the hovered Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-shadow</td>
-    <td>List</td>
-    <td><code>$kendo-breadcrumb-link-focus-shadow</code></td>
-    <td><code>inset 0 0 0 2px rgba(0, 0, 0, 0.13)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-current-item-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the current Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-current-item-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the current Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-current-item-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the current Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sizes</td>
-    <td>Map</td>
-    <td><code>(
-    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
-    )
-)</code></td>
-    <td><code>(sm: (link-padding-x: 8px, link-padding-y: 4px, icon-link-padding-x: 6px, icon-link-padding-y: 6px, font-size: 14px, line-height: 1.4285714286), md: (link-padding-x: 8px, link-padding-y: 6px, icon-link-padding-x: 8px, icon-link-padding-y: 8px, font-size: 14px, line-height: 1.4285714286), lg: (link-padding-x: 8px, link-padding-y: 8px, icon-link-padding-x: 12px, icon-link-padding-y: 12px, font-size: 16px, line-height: 1.5))</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The sizes map for the Breadcrumb.</div></div>
-    </td>
-</tr>
-</tbody>
-</table>
-
-## Suggested Links
-
-* [Styling Overview]({% slug themesandstyles %})
-* [Web Font Icons]({% slug icons %})
-* [Preview of the Themed Components](../)
-
diff --git a/packages/default/docs/customization.md b/packages/default/docs/customization.md
index bc8c20b9c11..a4d05d87891 100644
--- a/packages/default/docs/customization.md
+++ b/packages/default/docs/customization.md
@@ -1240,661 +1240,6 @@ The following table lists the available variables for customizing the Default th
 </tbody>
 </table>
 
-### Breadcrumb
-
-<table class="theme-variables">
-    <colgroup>
-    <col style="width: 200px; white-space:nowrap;" />
-    <col />
-    <col />
-    <col />
-</colgroup>
-<thead>
-    <tr>
-        <th>Name</th>
-        <th>Type</th>
-        <th>Default value</th>
-        <th>Computed value</th>
-    </tr>
-</thead>
-<tbody><tr>
-    <td>$kendo-breadcrumb-border-width</td>
-    <td>Number</td>
-    <td><code>0px</code></td>
-    <td><code>0px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the border around the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-margin-x</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal margin of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-margin-y</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical margin of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-padding-x</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-padding-y</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-font-family</td>
-    <td>String</td>
-    <td><code>$kendo-font-family</code></td>
-    <td><code>inherit</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font family of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-md</code></td>
-    <td><code>14px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-md</code></td>
-    <td><code>14px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the small Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-font-size</code></td>
-    <td><code>14px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the medium Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-lg</code></td>
-    <td><code>16px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the large Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-md</code></td>
-    <td><code>1.4285714286</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-md</code></td>
-    <td><code>1.4285714286</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the small Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-line-height</code></td>
-    <td><code>1.4285714286</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the medium Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-lg</code></td>
-    <td><code>1.5</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the height Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-bg</td>
-    <td>Color</td>
-    <td><code>$kendo-component-bg</code></td>
-    <td><span class="color-preview" style="background-color: #ffffff"></span><code>#ffffff</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The base background of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-text</td>
-    <td>Color</td>
-    <td><code>$kendo-component-text</code></td>
-    <td><span class="color-preview" style="background-color: #424242"></span><code>#424242</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The base text color of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-border</td>
-    <td>Color</td>
-    <td><code>$kendo-component-border</code></td>
-    <td><span class="color-preview" style="background-color: rgba(0, 0, 0, 0.08)"></span><code>rgba(0, 0, 0, 0.08)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The base border color of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-focus-shadow</td>
-    <td>List</td>
-    <td><code>0 0 2px 1px rgba(0, 0, 0, .06)</code></td>
-    <td><code>0 0 2px 1px rgba(0, 0, 0, 0.06)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-link-padding-x</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 1.5 )</code></td>
-    <td><code>6px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 1 )</code></td>
-    <td><code>4px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-link-padding-y</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-link-padding-y</code></td>
-    <td><code>6px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-border-radius</td>
-    <td>Number</td>
-    <td><code>$kendo-border-radius-md</code></td>
-    <td><code>4px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border-radius of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 1.5 )</code></td>
-    <td><code>6px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-y</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 3 )</code></td>
-    <td><code>12px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-y</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-sm-icon-link-padding-y</code></td>
-    <td><code>6px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-x</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-lg-icon-link-padding-y</code></td>
-    <td><code>12px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-initial-text</td>
-    <td>String</td>
-    <td><code>inherit</code></td>
-    <td><code>inherit</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-icon-spacing</td>
-    <td>Number</td>
-    <td><code>$kendo-icon-spacing</code></td>
-    <td><code>4px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-text</td>
-    <td>Color</td>
-    <td><code>$kendo-link-text</code></td>
-    <td><span class="color-preview" style="background-color: #ff6358"></span><code>#ff6358</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-hover-bg</td>
-    <td>Color</td>
-    <td><code>$kendo-base-bg</code></td>
-    <td><span class="color-preview" style="background-color: #fafafa"></span><code>#fafafa</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the hovered Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-hover-text</td>
-    <td>Color</td>
-    <td><code>$kendo-link-hover-text</code></td>
-    <td><span class="color-preview" style="background-color: #d6534a"></span><code>#d6534a</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the hovered Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-hover-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the hovered Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-text</td>
-    <td>Color</td>
-    <td><code>$kendo-link-text</code></td>
-    <td><span class="color-preview" style="background-color: #ff6358"></span><code>#ff6358</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-shadow</td>
-    <td>List</td>
-    <td><code>$kendo-focus-shadow</code></td>
-    <td><code>inset 0 0 0 2px rgba(0, 0, 0, 0.13)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-hover-bg</td>
-    <td>Color</td>
-    <td><code>$kendo-base-bg</code></td>
-    <td><span class="color-preview" style="background-color: #fafafa"></span><code>#fafafa</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the hovered Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-hover-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the hovered Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-hover-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the hovered Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-shadow</td>
-    <td>List</td>
-    <td><code>$kendo-breadcrumb-link-focus-shadow</code></td>
-    <td><code>inset 0 0 0 2px rgba(0, 0, 0, 0.13)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-current-item-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the current Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-current-item-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the current Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-current-item-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the current Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sizes</td>
-    <td>Map</td>
-    <td><code>(
-    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
-    )
-)</code></td>
-    <td><code>(sm: (link-padding-x: 8px, link-padding-y: 4px, icon-link-padding-x: 6px, icon-link-padding-y: 6px, font-size: 14px, line-height: 1.4285714286), md: (link-padding-x: 8px, link-padding-y: 6px, icon-link-padding-x: 8px, icon-link-padding-y: 8px, font-size: 14px, line-height: 1.4285714286), lg: (link-padding-x: 8px, link-padding-y: 8px, icon-link-padding-x: 12px, icon-link-padding-y: 12px, font-size: 16px, line-height: 1.5))</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The sizes map for the Breadcrumb.</div></div>
-    </td>
-</tr>
-</tbody>
-</table>
-
 ### Button
 
 <table class="theme-variables">
diff --git a/packages/default/scss/breadcrumb/_layout.scss b/packages/default/scss/breadcrumb/_layout.scss
index 3b4340b1b4e..d1601594cc8 100644
--- a/packages/default/scss/breadcrumb/_layout.scss
+++ b/packages/default/scss/breadcrumb/_layout.scss
@@ -11,6 +11,8 @@
         box-sizing: border-box;
         outline: 0;
         font-family: $kendo-breadcrumb-font-family;
+        font-size: $kendo-breadcrumb-font-size;
+        line-height: $kendo-breadcrumb-line-height;
         display: flex;
         flex-direction: row;
         -webkit-touch-callout: none;
@@ -62,6 +64,8 @@
     .k-breadcrumb-link,
     .k-breadcrumb-root-link {
         @include border-radius( $kendo-breadcrumb-link-border-radius );
+        padding-block: $kendo-breadcrumb-link-padding-y;
+        padding-inline: $kendo-breadcrumb-link-padding-x;
         color: $kendo-breadcrumb-link-initial-text;
         text-decoration: none;
         white-space: nowrap;
@@ -75,12 +79,21 @@
         transition: $kendo-transition;
     }
 
+    .k-breadcrumb-root-link {
+        margin-inline-end: $kendo-breadcrumb-root-link-spacing;
+    }
+
     .k-breadcrumb-link > .k-image,
     .k-breadcrumb-icontext-link .k-icon,
     .k-breadcrumb-icontext-link .k-svg-icon {
         margin-inline-end: $kendo-breadcrumb-link-icon-spacing;
     }
 
+    .k-breadcrumb-icon-link {
+        padding-block: $kendo-breadcrumb-icon-link-padding-y;
+        padding-inline: $kendo-breadcrumb-icon-link-padding-x;
+    }
+
 
     // Breadcrumb delimiter
     .k-breadcrumb-delimiter,
@@ -99,34 +112,6 @@
         }
     }
 
-
-    // Sizes
-    @each $size, $size-props in $kendo-breadcrumb-sizes {
-        $_link-padding-x: k-map-get( $size-props, link-padding-x );
-        $_link-padding-y: k-map-get( $size-props, link-padding-y );
-        $_icon-link-padding-x: k-map-get( $size-props, icon-link-padding-x );
-        $_icon-link-padding-y: k-map-get( $size-props, icon-link-padding-y );
-        $_font-size: k-map-get( $size-props, font-size );
-        $_line-height: k-map-get( $size-props, line-height );
-
-        .k-breadcrumb-#{$size} {
-            font-size: $_font-size;
-            line-height: $_line-height;
-
-
-            .k-breadcrumb-link,
-            .k-breadcrumb-root-link {
-                padding-block: $_link-padding-y;
-                padding-inline: $_link-padding-x;
-            }
-
-            .k-breadcrumb-icon-link {
-                padding-block: $_icon-link-padding-y;
-                padding-inline: $_icon-link-padding-x;
-            }
-        }
-    }
-
 }
 
 
diff --git a/packages/default/scss/breadcrumb/_variables.scss b/packages/default/scss/breadcrumb/_variables.scss
index 8817599e437..ed6a9fe1029 100644
--- a/packages/default/scss/breadcrumb/_variables.scss
+++ b/packages/default/scss/breadcrumb/_variables.scss
@@ -1,230 +1,59 @@
 // Breadcrumb
 
-/// The width of the border around the Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-border-width: 0px !default;
-
-/// The horizontal margin of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-margin-x: null !default;
-/// The vertical margin of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-margin-y: null !default;
-/// The horizontal padding of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-padding-x: null !default;
-/// The vertical padding of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-padding-y: null !default;
+$kendo-breadcrumb-border-width: 0px !default;
 
-/// The font family of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-font-family: $kendo-font-family !default;
-
-/// The font size of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-font-size: $kendo-font-size-md !default;
-/// The font size of the small Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-font-size: $kendo-font-size-md !default;
-/// The font size of the medium Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-md-font-size: $kendo-breadcrumb-font-size !default;
-/// The font size of the large Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-font-size: $kendo-font-size-lg !default;
-
-/// The line-height of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-line-height: $kendo-line-height-md !default;
-/// The line-height of the small Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-line-height: $kendo-line-height-md !default;
-/// The line-height of the medium Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-md-line-height: $kendo-breadcrumb-line-height !default;
-/// The line-height of the height Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-line-height: $kendo-line-height-lg !default;
 
-/// The base background of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-bg: $kendo-component-bg !default;
-/// The base text color of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-text: $kendo-component-text !default;
-/// The base border color of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-border: $kendo-component-border !default;
 
-/// The box shadow of the focused Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
-
-/// The horizontal padding of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-/// The horizontal padding of the small Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-/// The horizontal padding of the medium Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
-/// The horizontal padding of the large Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-
-/// The vertical padding of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
-/// The vertical padding of the small Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
-/// The vertical padding of the medium Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-link-padding-y !default;
-/// The vertical padding of the large Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-
-/// The border-radius of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-border-radius: $kendo-border-radius-md !default;
 
-/// The vertical padding of the Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-icon-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-/// The vertical padding of the small Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-icon-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
-/// The vertical padding of the medium Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y !default;
-/// The vertical padding of the large Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-icon-link-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
+$kendo-breadcrumb-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-x !default;
 
-/// The horizontal padding of the Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-y !default;
-/// The horizontal padding of the small Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-y !default;
-/// The horizontal padding of the medium Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-md-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-x !default;
-/// The horizontal padding of the large Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-y !default;
+$kendo-breadcrumb-root-link-spacing: $kendo-breadcrumb-link-padding-x !default;
+$kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default;
 
-/// The text color of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-initial-text: inherit !default;
-/// The spacing of the Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default;
 
-/// The background color of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-bg: null !default;
-/// The text color of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-text: $kendo-link-text !default;
-/// The border color of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-border: null !default;
 
-/// The background color of the hovered Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-hover-bg: $kendo-base-bg !default;
-/// The text color of the hovered Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-hover-text: $kendo-link-hover-text !default;
-/// The border color of the hovered Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-hover-border: null !default;
 
-/// The background color of the focused Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-focus-bg: null !default;
-/// The text color of the focused Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-focus-text: $kendo-link-text !default;
-/// The border color of the focused Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-focus-border: null !default;
-/// The box shadow of the focused Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-focus-shadow: $kendo-focus-shadow !default;
 
-/// The background color of the Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-bg: null !default;
-/// The text color of the Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-text: null !default;
-/// The border color of the Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-border: null !default;
 
-/// The background color of the hovered Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-bg: $kendo-base-bg !default;
-/// The text color of the hovered Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-text: null !default;
-/// The border color of the hovered Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-border: null !default;
 
-/// The background color of the focused Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-bg: null !default;
-/// The text color of the focused Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-text: null !default;
-/// The border color of the focused Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-border: null !default;
-/// The box shadow of the focused Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-shadow: $kendo-breadcrumb-link-focus-shadow !default;
 
-/// The background color of the current Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-current-item-bg: null !default;
-/// The text color of the current Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-current-item-text: null !default;
-/// The border color of the current Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-current-item-border: null !default;
 
-/// The sizes map for the Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-sizes: (
-    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
-    )
-) !default;
+$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
diff --git a/packages/fluent/docs/customization-breadcrumb.md b/packages/fluent/docs/customization-breadcrumb.md
index 26b66667f2a..0b606a3c8cc 100644
--- a/packages/fluent/docs/customization-breadcrumb.md
+++ b/packages/fluent/docs/customization-breadcrumb.md
@@ -34,7 +34,7 @@ The following table lists the available variables for customization.
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal margin of the Breadcrumb</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal margin of the breadcrumb</div></div>
     </td>
 </tr>
 <tr>
@@ -44,7 +44,7 @@ The following table lists the available variables for customization.
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical margin of the Breadcrumb</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical margin of the breadcrumb</div></div>
     </td>
 </tr>
 <tr>
@@ -54,7 +54,7 @@ The following table lists the available variables for customization.
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the breadcrumb</div></div>
     </td>
 </tr>
 <tr>
@@ -64,7 +64,7 @@ The following table lists the available variables for customization.
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the breadcrumb</div></div>
     </td>
 </tr>
 <tr>
@@ -74,7 +74,7 @@ The following table lists the available variables for customization.
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the border around the Breadcrumb</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the border around the breadcrumb</div></div>
     </td>
 </tr>
 <tr>
@@ -84,7 +84,7 @@ The following table lists the available variables for customization.
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font family of the Breadcrumb</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font family of the breadcrumb</div></div>
     </td>
 </tr>
 <tr>
@@ -94,37 +94,7 @@ The following table lists the available variables for customization.
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container">
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-font-size</td>
-    <td></td>
-    <td><code>var( --kendo-font-size-md, inherit )</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the small breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-font-size</td>
-    <td></td>
-    <td><code>var( --kendo-font-size-md, inherit )</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the medium breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-font-size</td>
-    <td></td>
-    <td><code>var( --kendo-font-size-md, inherit )</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the large breadcrumb.</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the breadcrumb</div></div>
     </td>
 </tr>
 <tr>
@@ -134,37 +104,7 @@ The following table lists the available variables for customization.
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line height used along with the $kendo-font-size variable of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-line-height</td>
-    <td></td>
-    <td><code>var( --kendo-line-height, normal )</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line height used along with the $kendo-font-size variable of the small breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-line-height</td>
-    <td></td>
-    <td><code>var( --kendo-line-height, normal )</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line height used along with the $kendo-font-size variable of the medium breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-line-height</td>
-    <td></td>
-    <td><code>var( --kendo-line-height, normal )</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line height used along with the $kendo-font-size variable of the large breadcrumb.</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line height of the breadcrumb</div></div>
     </td>
 </tr>
 <tr>
@@ -174,7 +114,7 @@ The following table lists the available variables for customization.
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Breadcrumb</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the breadcrumb</div></div>
     </td>
 </tr>
 <tr>
@@ -184,7 +124,7 @@ The following table lists the available variables for customization.
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the breadcrumb</div></div>
     </td>
 </tr>
 <tr>
@@ -214,77 +154,17 @@ The following table lists the available variables for customization.
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb link</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-link-padding-x</td>
-    <td></td>
-    <td><code>map.get( $kendo-spacing, 2 )</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-link-padding-x</td>
-    <td></td>
-    <td><code>$kendo-breadcrumb-link-padding-x</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-link-padding-x</td>
-    <td></td>
-    <td><code>map.get( $kendo-spacing, 2 )</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large Breadcrumb link.</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the breadcrumb link</div></div>
     </td>
 </tr>
 <tr>
     <td>$kendo-breadcrumb-link-padding-y</td>
     <td></td>
-    <td><code>map.get( $kendo-spacing, 2 )</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb link</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-link-padding-y</td>
-    <td></td>
     <td><code>map.get( $kendo-spacing, 1.5 )</code></td>
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-link-padding-y</td>
-    <td></td>
-    <td><code>$kendo-breadcrumb-link-padding-y</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-link-padding-y</td>
-    <td></td>
-    <td><code>map.get( $kendo-spacing, 2.5 )</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large Breadcrumb link.</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the breadcrumb link</div></div>
     </td>
 </tr>
 <tr>
@@ -294,7 +174,7 @@ The following table lists the available variables for customization.
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The radius of the border around the Breadcrumb link</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The radius of the border around the breadcrumb link</div></div>
     </td>
 </tr>
 <tr>
@@ -304,7 +184,7 @@ The following table lists the available variables for customization.
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The initial text color of the Breadcrumb link</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The initial text color of the breadcrumb link</div></div>
     </td>
 </tr>
 <tr>
@@ -314,7 +194,7 @@ The following table lists the available variables for customization.
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Breadcrumb link</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the breadcrumb link</div></div>
     </td>
 </tr>
 <tr>
@@ -324,7 +204,7 @@ The following table lists the available variables for customization.
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb link</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the breadcrumb link</div></div>
     </td>
 </tr>
 <tr>
@@ -474,7 +354,7 @@ The following table lists the available variables for customization.
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of selected the Breadcrumb link</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of selected the breadcrumb link</div></div>
     </td>
 </tr>
 <tr>
@@ -514,7 +394,7 @@ The following table lists the available variables for customization.
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Breadcrumb root link</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the breadcrumb root link</div></div>
     </td>
 </tr>
 <tr>
@@ -524,7 +404,7 @@ The following table lists the available variables for customization.
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb root link</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the breadcrumb root link</div></div>
     </td>
 </tr>
 <tr>
@@ -534,7 +414,7 @@ The following table lists the available variables for customization.
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the Breadcrumb root link</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the breadcrumb root link</div></div>
     </td>
 </tr>
 <tr>
@@ -634,7 +514,7 @@ The following table lists the available variables for customization.
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The focus and hover background color of the Breadcrumb root link</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The focus and hover background color of the breadcrumb root link</div></div>
     </td>
 </tr>
 <tr>
@@ -647,119 +527,24 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the disabled breadcrumb root link</div></div>
     </td>
 </tr>
-<tr>
-    <td>$kendo-breadcrumb-icon-link-padding-y</td>
-    <td></td>
-    <td><code>map.get( $kendo-spacing, 2.5 )</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb link icon</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-icon-link-padding-y</td>
-    <td></td>
-    <td><code>map.get( $kendo-spacing, 2 )</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-icon-link-padding-y</td>
-    <td></td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-y</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-icon-link-padding-y</td>
-    <td></td>
-    <td><code>map.get( $kendo-spacing, 3 )</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large Breadcrumb link icon.</div></div>
-    </td>
-</tr>
 <tr>
     <td>$kendo-breadcrumb-icon-link-padding-x</td>
     <td></td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-y</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb link icon</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-icon-link-padding-x</td>
-    <td></td>
-    <td><code>$kendo-breadcrumb-sm-icon-link-padding-y</code></td>
+    <td><code>$kendo-breadcrumb-link-padding-x</code></td>
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small Breadcrumb link icon.</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the breadcrumb link icon</div></div>
     </td>
 </tr>
 <tr>
-    <td>$kendo-breadcrumb-md-icon-link-padding-x</td>
+    <td>$kendo-breadcrumb-icon-link-padding-y</td>
     <td></td>
     <td><code>$kendo-breadcrumb-icon-link-padding-x</code></td>
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-icon-link-padding-x</td>
-    <td></td>
-    <td><code>$kendo-breadcrumb-lg-icon-link-padding-y</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sizes</td>
-    <td></td>
-    <td><code>(
-    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
-    )
-)</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The sizes map for the Breadcrumb.</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the breadcrumb link icon</div></div>
     </td>
 </tr>
 </tbody>
diff --git a/packages/fluent/docs/customization.md b/packages/fluent/docs/customization.md
index 41e8675c586..a5203aa76e1 100644
--- a/packages/fluent/docs/customization.md
+++ b/packages/fluent/docs/customization.md
@@ -1684,7 +1684,7 @@ The following table lists the available variables for customizing the Fluent the
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal margin of the Breadcrumb</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal margin of the breadcrumb</div></div>
     </td>
 </tr>
 <tr>
@@ -1694,7 +1694,7 @@ The following table lists the available variables for customizing the Fluent the
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical margin of the Breadcrumb</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical margin of the breadcrumb</div></div>
     </td>
 </tr>
 <tr>
@@ -1704,7 +1704,7 @@ The following table lists the available variables for customizing the Fluent the
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the breadcrumb</div></div>
     </td>
 </tr>
 <tr>
@@ -1714,7 +1714,7 @@ The following table lists the available variables for customizing the Fluent the
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the breadcrumb</div></div>
     </td>
 </tr>
 <tr>
@@ -1724,7 +1724,7 @@ The following table lists the available variables for customizing the Fluent the
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the border around the Breadcrumb</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the border around the breadcrumb</div></div>
     </td>
 </tr>
 <tr>
@@ -1734,7 +1734,7 @@ The following table lists the available variables for customizing the Fluent the
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font family of the Breadcrumb</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font family of the breadcrumb</div></div>
     </td>
 </tr>
 <tr>
@@ -1744,37 +1744,7 @@ The following table lists the available variables for customizing the Fluent the
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container">
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-font-size</td>
-    <td></td>
-    <td><code>var( --kendo-font-size-md, inherit )</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the small breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-font-size</td>
-    <td></td>
-    <td><code>var( --kendo-font-size-md, inherit )</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the medium breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-font-size</td>
-    <td></td>
-    <td><code>var( --kendo-font-size-md, inherit )</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the large breadcrumb.</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the breadcrumb</div></div>
     </td>
 </tr>
 <tr>
@@ -1784,37 +1754,7 @@ The following table lists the available variables for customizing the Fluent the
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line height used along with the $kendo-font-size variable of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-line-height</td>
-    <td></td>
-    <td><code>var( --kendo-line-height, normal )</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line height used along with the $kendo-font-size variable of the small breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-line-height</td>
-    <td></td>
-    <td><code>var( --kendo-line-height, normal )</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line height used along with the $kendo-font-size variable of the medium breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-line-height</td>
-    <td></td>
-    <td><code>var( --kendo-line-height, normal )</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line height used along with the $kendo-font-size variable of the large breadcrumb.</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line height of the breadcrumb</div></div>
     </td>
 </tr>
 <tr>
@@ -1824,7 +1764,7 @@ The following table lists the available variables for customizing the Fluent the
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Breadcrumb</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the breadcrumb</div></div>
     </td>
 </tr>
 <tr>
@@ -1834,7 +1774,7 @@ The following table lists the available variables for customizing the Fluent the
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the breadcrumb</div></div>
     </td>
 </tr>
 <tr>
@@ -1864,77 +1804,17 @@ The following table lists the available variables for customizing the Fluent the
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb link</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-link-padding-x</td>
-    <td></td>
-    <td><code>map.get( $kendo-spacing, 2 )</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-link-padding-x</td>
-    <td></td>
-    <td><code>$kendo-breadcrumb-link-padding-x</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-link-padding-x</td>
-    <td></td>
-    <td><code>map.get( $kendo-spacing, 2 )</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large Breadcrumb link.</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the breadcrumb link</div></div>
     </td>
 </tr>
 <tr>
     <td>$kendo-breadcrumb-link-padding-y</td>
     <td></td>
-    <td><code>map.get( $kendo-spacing, 2 )</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb link</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-link-padding-y</td>
-    <td></td>
     <td><code>map.get( $kendo-spacing, 1.5 )</code></td>
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-link-padding-y</td>
-    <td></td>
-    <td><code>$kendo-breadcrumb-link-padding-y</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-link-padding-y</td>
-    <td></td>
-    <td><code>map.get( $kendo-spacing, 2.5 )</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large Breadcrumb link.</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the breadcrumb link</div></div>
     </td>
 </tr>
 <tr>
@@ -1944,7 +1824,7 @@ The following table lists the available variables for customizing the Fluent the
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The radius of the border around the Breadcrumb link</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The radius of the border around the breadcrumb link</div></div>
     </td>
 </tr>
 <tr>
@@ -1954,7 +1834,7 @@ The following table lists the available variables for customizing the Fluent the
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The initial text color of the Breadcrumb link</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The initial text color of the breadcrumb link</div></div>
     </td>
 </tr>
 <tr>
@@ -1964,7 +1844,7 @@ The following table lists the available variables for customizing the Fluent the
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Breadcrumb link</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the breadcrumb link</div></div>
     </td>
 </tr>
 <tr>
@@ -1974,7 +1854,7 @@ The following table lists the available variables for customizing the Fluent the
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb link</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the breadcrumb link</div></div>
     </td>
 </tr>
 <tr>
@@ -2124,7 +2004,7 @@ The following table lists the available variables for customizing the Fluent the
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of selected the Breadcrumb link</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of selected the breadcrumb link</div></div>
     </td>
 </tr>
 <tr>
@@ -2164,7 +2044,7 @@ The following table lists the available variables for customizing the Fluent the
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Breadcrumb root link</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the breadcrumb root link</div></div>
     </td>
 </tr>
 <tr>
@@ -2174,7 +2054,7 @@ The following table lists the available variables for customizing the Fluent the
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb root link</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the breadcrumb root link</div></div>
     </td>
 </tr>
 <tr>
@@ -2184,7 +2064,7 @@ The following table lists the available variables for customizing the Fluent the
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the Breadcrumb root link</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the breadcrumb root link</div></div>
     </td>
 </tr>
 <tr>
@@ -2284,7 +2164,7 @@ The following table lists the available variables for customizing the Fluent the
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The focus and hover background color of the Breadcrumb root link</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The focus and hover background color of the breadcrumb root link</div></div>
     </td>
 </tr>
 <tr>
@@ -2297,119 +2177,24 @@ The following table lists the available variables for customizing the Fluent the
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the disabled breadcrumb root link</div></div>
     </td>
 </tr>
-<tr>
-    <td>$kendo-breadcrumb-icon-link-padding-y</td>
-    <td></td>
-    <td><code>map.get( $kendo-spacing, 2.5 )</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb link icon</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-icon-link-padding-y</td>
-    <td></td>
-    <td><code>map.get( $kendo-spacing, 2 )</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-icon-link-padding-y</td>
-    <td></td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-y</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-icon-link-padding-y</td>
-    <td></td>
-    <td><code>map.get( $kendo-spacing, 3 )</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large Breadcrumb link icon.</div></div>
-    </td>
-</tr>
 <tr>
     <td>$kendo-breadcrumb-icon-link-padding-x</td>
     <td></td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-y</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb link icon</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-icon-link-padding-x</td>
-    <td></td>
-    <td><code>$kendo-breadcrumb-sm-icon-link-padding-y</code></td>
+    <td><code>$kendo-breadcrumb-link-padding-x</code></td>
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small Breadcrumb link icon.</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the breadcrumb link icon</div></div>
     </td>
 </tr>
 <tr>
-    <td>$kendo-breadcrumb-md-icon-link-padding-x</td>
+    <td>$kendo-breadcrumb-icon-link-padding-y</td>
     <td></td>
     <td><code>$kendo-breadcrumb-icon-link-padding-x</code></td>
     <td></td>
 </tr>
 <tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-icon-link-padding-x</td>
-    <td></td>
-    <td><code>$kendo-breadcrumb-lg-icon-link-padding-y</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sizes</td>
-    <td></td>
-    <td><code>(
-    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
-    )
-)</code></td>
-    <td></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The sizes map for the Breadcrumb.</div></div>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the breadcrumb link icon</div></div>
     </td>
 </tr>
 </tbody>
diff --git a/packages/fluent/scss/breadcrumb/_layout.scss b/packages/fluent/scss/breadcrumb/_layout.scss
index aa6213bac0c..4b7693423c6 100644
--- a/packages/fluent/scss/breadcrumb/_layout.scss
+++ b/packages/fluent/scss/breadcrumb/_layout.scss
@@ -1,4 +1,3 @@
-@use "sass:map";
 @use "../core/" as *;
 @use "./_variables.scss" as *;
 
@@ -15,8 +14,8 @@
         box-sizing: border-box;
         outline: 0;
         font-family: var( --kendo-breadcrumb-font-family, #{$kendo-breadcrumb-font-family} );
-        font-size: var( --INTERNAL--kendo-breadcrumb-font-size, #{$kendo-breadcrumb-font-size} );
-        line-height: var( --INTERNAL--kendo-breadcrumb-line-height, #{$kendo-breadcrumb-line-height} );
+        font-size: var( --kendo-breadcrumb-font-size, #{$kendo-breadcrumb-font-size} );
+        line-height: var( --kendo-breadcrumb-line-height, #{$kendo-breadcrumb-line-height} );
         display: flex;
         flex-direction: row;
         -webkit-touch-callout: none;
@@ -68,8 +67,8 @@
     .k-breadcrumb-link,
     .k-breadcrumb-root-link {
         @include border-radius( var( --kendo-breadcrumb-border-radius, #{$kendo-breadcrumb-link-border-radius} ) );
-        padding-inline: var( --INTERNAL--kendo-breadcrumb-link-padding-x, #{$kendo-breadcrumb-link-padding-x} );
-        padding-block: var( --INTERNAL--kendo-breadcrumb-link-padding-y, #{$kendo-breadcrumb-link-padding-y} );
+        padding-inline: var( --kendo-breadcrumb-link-padding-x, #{$kendo-breadcrumb-link-padding-x} );
+        padding-block: var( --kendo-breadcrumb-link-padding-y, #{$kendo-breadcrumb-link-padding-y} );
         color: var( --kendo-breadcrumb-link-initial-text, #{$kendo-breadcrumb-link-initial-text} );
         text-decoration: none;
         white-space: nowrap;
@@ -93,6 +92,10 @@
        }
     }
 
+    .k-breadcrumb-root-link {
+        margin-inline-end: var( --kendo-breadcrumb-root-link-spacing, #{$kendo-breadcrumb-root-link-spacing} );
+    }
+
     .k-breadcrumb-link > .k-image,
     .k-breadcrumb-icontext-link .k-icon,
     .k-breadcrumb-icontext-link .k-svg-icon {
@@ -100,8 +103,8 @@
     }
 
     .k-breadcrumb-icon-link {
-        padding-inline: var( --INTERNAL--kendo-breadcrumb-icon-link-padding-x, #{$kendo-breadcrumb-icon-link-padding-x} );
-        padding-block: var( --INTERNAL--kendo-breadcrumb-icon-link-padding-y, #{$kendo-breadcrumb-icon-link-padding-y} );
+        padding-inline: var( --kendo-breadcrumb-icon-link-padding-x, #{$kendo-breadcrumb-icon-link-padding-x} );
+        padding-block: var( --kendo-breadcrumb-icon-link-padding-y, #{$kendo-breadcrumb-icon-link-padding-y} );
     }
 
 
@@ -121,34 +124,4 @@
         }
     }
 
-
-    // Sizing
-    @each $size, $size-props in $kendo-breadcrumb-sizes {
-        $_link-padding-x: map.get( $size-props, link-padding-x );
-        $_link-padding-y: map.get( $size-props, link-padding-y );
-        $_icon-link-padding-x: map.get( $size-props, icon-link-padding-x );
-        $_icon-link-padding-y: map.get( $size-props, icon-link-padding-y );
-        $_font-size: map.get( $size-props, font-size );
-        $_line-height: map.get( $size-props, line-height );
-
-        // Breadcrumb sizes
-        .k-breadcrumb-#{$size} {
-            --INTERNAL--kendo-breadcrumb-font-size: var( --kendo-breadcrumb-#{$size}-font-size, #{$_font-size} );
-            --INTERNAL--kendo-breadcrumb-line-height: var( --kendo-breadcrumb-#{$size}-line-height, #{$_line-height} );
-
-            // Breadcrumb links
-            .k-breadcrumb-link,
-            .k-breadcrumb-root-link {
-                --INTERNAL--kendo-breadcrumb-link-padding-x: var( --kendo-breadcrumb-#{$size}-link-padding-x, #{$_link-padding-x} );
-                --INTERNAL--kendo-breadcrumb-link-padding-y: var( --kendo-breadcrumb-#{$size}-link-padding-y, #{$_link-padding-y} );
-            }
-
-            // Breadcrumb icon links
-            .k-breadcrumb-icon-link {
-                --INTERNAL--kendo-breadcrumb-icon-link-padding-x: var( --kendo-breadcrumb-#{$size}-icon-link-padding-x, #{$_icon-link-padding-x} );
-                --INTERNAL--kendo-breadcrumb-icon-link-padding-y: var( --kendo-breadcrumb-#{$size}-icon-link-padding-y, #{$_icon-link-padding-y} );
-            }
-        }
-    }
-
 }
diff --git a/packages/fluent/scss/breadcrumb/_variables.scss b/packages/fluent/scss/breadcrumb/_variables.scss
index 655aa8c0e6e..63f73267fd7 100644
--- a/packages/fluent/scss/breadcrumb/_variables.scss
+++ b/packages/fluent/scss/breadcrumb/_variables.scss
@@ -2,57 +2,34 @@
 @use "../core/" as *;
 @use "../icon/_variables.scss" as *;
 
-/// The horizontal margin of the Breadcrumb
+/// The horizontal margin of the breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-margin-x: 0px !default;
-/// The vertical margin of the Breadcrumb
+/// The vertical margin of the breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-margin-y: 0px !default;
-/// The horizontal padding of the Breadcrumb
+/// The horizontal padding of the breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-padding-x: 0px !default;
-/// The vertical padding of the Breadcrumb
+/// The vertical padding of the breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-padding-y: 0px !default;
-
-/// The width of the border around the Breadcrumb
+/// The width of the border around the breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-border-width: 0px !default;
-
-/// The font family of the Breadcrumb
+/// The font family of the breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-font-family: var( --kendo-font-family, inherit ) !default;
-/// The font size of the Breadcrumb
-
+/// The font size of the breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-font-size: var( --kendo-font-size, inherit ) !default;
-/// The font size of the small breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-font-size: var( --kendo-font-size-md, inherit ) !default;
-/// The font size of the medium breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-md-font-size: var( --kendo-font-size-md, inherit ) !default;
-/// The font size of the large breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-font-size: var( --kendo-font-size-md, inherit ) !default;
-
-/// The line height used along with the $kendo-font-size variable of the Breadcrumb.
+/// The line height of the breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-line-height: var( --kendo-line-height, normal ) !default;
-/// The line height used along with the $kendo-font-size variable of the small breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-line-height: var( --kendo-line-height, normal ) !default;
-/// The line height used along with the $kendo-font-size variable of the medium breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-md-line-height: var( --kendo-line-height, normal ) !default;
-/// The line height used along with the $kendo-font-size variable of the large breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-line-height: var( --kendo-line-height, normal ) !default;
-
-/// The background color of the Breadcrumb
+/// The background color of the breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-bg: var( --kendo-component-bg, initial ) !default;
-/// The text color of the Breadcrumb
+/// The text color of the breadcrumb
 /// @group breadcrumb
 $kendo-breadcrumb-text: k-get-theme-color-var( neutral-130 ) !default;
 /// The border color of the breadcrumb
@@ -62,42 +39,22 @@ $kendo-breadcrumb-border: transparent !default;
 /// @group breadcrumb
 $kendo-breadcrumb-focus-shadow: 0 0 0 1px k-get-theme-color-var( neutral-30 ) !default;
 
-/// The horizontal padding of the Breadcrumb link
+/// The horizontal padding of the breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-padding-x: map.get( $kendo-spacing, 2 ) !default;
-/// The horizontal padding of the small Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-x: map.get( $kendo-spacing, 2 ) !default;
-/// The horizontal padding of the medium Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
-/// The horizontal padding of the large Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-x: map.get( $kendo-spacing, 2 ) !default;
-
-/// The vertical padding of the Breadcrumb link
-/// @group breadcrumb
-$kendo-breadcrumb-link-padding-y: map.get( $kendo-spacing, 2 ) !default;
-/// The vertical padding of the small Breadcrumb link.
+/// The vertical padding of the breadcrumb link
 /// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
-/// The vertical padding of the medium Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-link-padding-y !default;
-/// The vertical padding of the large Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-y: map.get( $kendo-spacing, 2.5 ) !default;
-
-/// The radius of the border around the Breadcrumb link
+$kendo-breadcrumb-link-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
+/// The radius of the border around the breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-border-radius: 0px !default;
-/// The initial text color of the Breadcrumb link
+/// The initial text color of the breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-initial-text: inherit !default;
-/// The background color of the Breadcrumb link
+/// The background color of the breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-bg: transparent !default;
-/// The text color of the Breadcrumb link
+/// The text color of the breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-text: k-get-theme-color-var( neutral-130 ) !default;
 /// The borer color of the breadcrumb link
@@ -142,7 +99,7 @@ $kendo-breadcrumb-link-disabled-text: var( --kendo-disabled-text, initial ) !def
 /// The border color of the disabled breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-disabled-border: none !default;
-/// The background color of selected the Breadcrumb link
+/// The background color of selected the breadcrumb link
 /// @group breadcrumb
 $kendo-breadcrumb-link-selected-bg: var( --kendo-component-bg, initial ) !default;
 /// The text color of the selected breadcrumb link
@@ -155,13 +112,13 @@ $kendo-breadcrumb-link-selected-border: transparent !default;
 /// @group breadcrumb
 $kendo-breadcrumb-link-selected-font-weight: var( --kendo-font-weight-bold, bold ) !default;
 
-/// The background color of the Breadcrumb root link
+/// The background color of the breadcrumb root link
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-bg: $kendo-breadcrumb-link-bg !default;
-/// The text color of the Breadcrumb root link
+/// The text color of the breadcrumb root link
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-text: $kendo-breadcrumb-link-text !default;
-/// The border color of the Breadcrumb root link
+/// The border color of the breadcrumb root link
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-border: $kendo-breadcrumb-link-border !default;
 /// The background color of the hovered breadcrumb root link
@@ -191,7 +148,7 @@ $kendo-breadcrumb-root-link-focus-text: $kendo-breadcrumb-link-focus-text !defau
 /// The border color of the focused breadcrumb root link
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-shadow: $kendo-breadcrumb-link-focus-shadow !default;
-/// The focus and hover background color of the Breadcrumb root link
+/// The focus and hover background color of the breadcrumb root link
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-hover-bg: $kendo-breadcrumb-link-focus-hover-bg !default;
 /// The text color of the disabled breadcrumb root link
@@ -202,61 +159,13 @@ $kendo-breadcrumb-current-item-bg: null !default;
 $kendo-breadcrumb-current-item-text: null !default;
 $kendo-breadcrumb-current-item-border: null !default;
 
-/// The vertical padding of the Breadcrumb link icon
-/// @group breadcrumb
-$kendo-breadcrumb-icon-link-padding-y: map.get( $kendo-spacing, 2.5 ) !default;
-/// The vertical padding of the small Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-icon-link-padding-y: map.get( $kendo-spacing, 2 ) !default;
-/// The vertical padding of the medium Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y !default;
-/// The vertical padding of the large Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-icon-link-padding-y: map.get( $kendo-spacing, 3 ) !default;
-
-/// The horizontal padding of the Breadcrumb link icon
-/// @group breadcrumb
-$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-y !default;
-/// The horizontal padding of the small Breadcrumb link icon.
+/// The horizontal padding of the breadcrumb link icon
 /// @group breadcrumb
-$kendo-breadcrumb-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-y !default;
-/// The horizontal padding of the medium Breadcrumb link icon.
+$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
+/// The vertical padding of the breadcrumb link icon
 /// @group breadcrumb
-$kendo-breadcrumb-md-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-x !default;
-/// The horizontal padding of the large Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-y !default;
+$kendo-breadcrumb-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-x !default;
 
 // Root link spacing
+$kendo-breadcrumb-root-link-spacing: 0px !default;
 $kendo-breadcrumb-link-icon-spacing: var( --kendo-icon-spacing, #{$kendo-icon-spacing} ) !default;
-
-
-/// The sizes map for the Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-sizes: (
-    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
-    )
-) !default;
diff --git a/packages/html/src/breadcrumb/tests/breadcrumb-rtl.tsx b/packages/html/src/breadcrumb/tests/breadcrumb-rtl.tsx
index 4b9a9f5aa18..633048838ce 100644
--- a/packages/html/src/breadcrumb/tests/breadcrumb-rtl.tsx
+++ b/packages/html/src/breadcrumb/tests/breadcrumb-rtl.tsx
@@ -36,6 +36,7 @@ export default () =>(
                         <BreadcrumbItem>
                             <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                             <BreadcrumbLink>
+                                <span className="test"></span>
                                 <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
@@ -83,6 +84,7 @@ export default () =>(
                         <BreadcrumbItem>
                             <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                             <BreadcrumbLink>
+                                <span className="test"></span>
                                 <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
@@ -130,6 +132,7 @@ export default () =>(
                         <BreadcrumbItem>
                             <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-left" size="xsmall" />
                             <BreadcrumbLink>
+                                <span className="test"></span>
                                 <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
diff --git a/packages/html/src/breadcrumb/tests/breadcrumb.tsx b/packages/html/src/breadcrumb/tests/breadcrumb.tsx
index ad4b81945e1..6b1deec0dd2 100644
--- a/packages/html/src/breadcrumb/tests/breadcrumb.tsx
+++ b/packages/html/src/breadcrumb/tests/breadcrumb.tsx
@@ -36,6 +36,7 @@ export default () =>(
                         <BreadcrumbItem>
                             <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                             <BreadcrumbLink>
+                                <span className="test"></span>
                                 <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
@@ -83,6 +84,7 @@ export default () =>(
                         <BreadcrumbItem>
                             <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                             <BreadcrumbLink>
+                                <span className="test"></span>
                                 <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
@@ -130,6 +132,7 @@ export default () =>(
                         <BreadcrumbItem>
                             <Icon className="k-breadcrumb-delimiter-icon" icon="chevron-right" size="xsmall" />
                             <BreadcrumbLink>
+                                <span className="test"></span>
                                 <BreadcrumbItemText text="Third item"></BreadcrumbItemText>
                             </BreadcrumbLink>
                         </BreadcrumbItem>
diff --git a/packages/material/docs/customization-breadcrumb.md b/packages/material/docs/customization-breadcrumb.md
deleted file mode 100644
index 112b9ebcb4d..00000000000
--- a/packages/material/docs/customization-breadcrumb.md
+++ /dev/null
@@ -1,673 +0,0 @@
----
-title: Customizing Breadcrumb
-description: "Refer to the list of the Kendo UI Material theme variables available for customization."
-slug: variables_kendothemematerial_breadcrumb
-position: 9
----
-
-# Customizing Breadcrumb
-
-## Variables
-
-The following table lists the available variables for customization.
-
-<table class="theme-variables">
-    <colgroup>
-    <col style="width: 200px; white-space:nowrap;" />
-    <col />
-    <col />
-    <col />
-</colgroup>
-<thead>
-    <tr>
-        <th>Name</th>
-        <th>Type</th>
-        <th>Default value</th>
-        <th>Computed value</th>
-    </tr>
-</thead>
-<tbody>
-        <tr>
-    <td>$kendo-breadcrumb-border-width</td>
-    <td>Number</td>
-    <td><code>0px</code></td>
-    <td><code>0px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the border around the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-margin-x</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal margin of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-margin-y</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical margin of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-padding-x</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-padding-y</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-font-family</td>
-    <td>List</td>
-    <td><code>$kendo-font-family</code></td>
-    <td><code>Roboto, "Helvetica Neue", sans-serif</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font family of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-md</code></td>
-    <td><code>14px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-md</code></td>
-    <td><code>14px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the small Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-font-size</code></td>
-    <td><code>14px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the medium Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-md</code></td>
-    <td><code>14px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the large Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-md</code></td>
-    <td><code>2</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-md</code></td>
-    <td><code>2</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the small Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-line-height</code></td>
-    <td><code>2</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the medium Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-md</code></td>
-    <td><code>2</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the height Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-bg</td>
-    <td>Color</td>
-    <td><code>$kendo-component-bg</code></td>
-    <td><span class="color-preview" style="background-color: #ffffff"></span><code>#ffffff</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The base background of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-text</td>
-    <td>Color</td>
-    <td><code>$kendo-component-text</code></td>
-    <td><span class="color-preview" style="background-color: rgba(0, 0, 0, 0.87)"></span><code>rgba(0, 0, 0, 0.87)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The base text color of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-border</td>
-    <td>Color</td>
-    <td><code>$kendo-component-border</code></td>
-    <td><span class="color-preview" style="background-color: rgba(0, 0, 0, 0.12)"></span><code>rgba(0, 0, 0, 0.12)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The base border color of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-focus-shadow</td>
-    <td>List</td>
-    <td><code>0 0 2px 1px rgba( black, .06 )</code></td>
-    <td><code>0 0 2px 1px rgba(0, 0, 0, 0.06)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2.5 )</code></td>
-    <td><code>10px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2.5 )</code></td>
-    <td><code>10px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-link-padding-x</code></td>
-    <td><code>10px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2.5 )</code></td>
-    <td><code>10px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 1 )</code></td>
-    <td><code>4px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 0.5 )</code></td>
-    <td><code>2px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-link-padding-y</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-link-padding-y</code></td>
-    <td><code>4px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 1.5 )</code></td>
-    <td><code>6px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-border-radius</td>
-    <td>Number</td>
-    <td><code>$kendo-border-radius-md</code></td>
-    <td><code>4px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border-radius of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2.5 )</code></td>
-    <td><code>10px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-y</code></td>
-    <td><code>10px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 3 )</code></td>
-    <td><code>12px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-y</code></td>
-    <td><code>10px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-sm-icon-link-padding-y</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-x</code></td>
-    <td><code>10px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-lg-icon-link-padding-y</code></td>
-    <td><code>12px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-icon-spacing</td>
-    <td>Number</td>
-    <td><code>$kendo-icon-spacing</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-initial-text</td>
-    <td>String</td>
-    <td><code>inherit</code></td>
-    <td><code>inherit</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-text</td>
-    <td>Color</td>
-    <td><code>$kendo-color-primary</code></td>
-    <td><span class="color-preview" style="background-color: #3f51b5"></span><code>#3f51b5</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-hover-bg</td>
-    <td>Color</td>
-    <td><code>$kendo-hover-bg</code></td>
-    <td><span class="color-preview" style="background-color: rgba(0, 0, 0, 0.04)"></span><code>rgba(0, 0, 0, 0.04)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the hovered Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-hover-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the hovered Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-hover-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the hovered Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-bg</td>
-    <td>Color</td>
-    <td><code>k-map-get( $theme, focus-bg )</code></td>
-    <td><span class="color-preview" style="background-color: rgba(0, 0, 0, 0.12)"></span><code>rgba(0, 0, 0, 0.12)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-shadow</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-hover-bg</td>
-    <td>Color</td>
-    <td><code>$kendo-hover-bg</code></td>
-    <td><span class="color-preview" style="background-color: rgba(0, 0, 0, 0.04)"></span><code>rgba(0, 0, 0, 0.04)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the hovered Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-hover-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the hovered Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-hover-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the hovered Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-bg</td>
-    <td>Color</td>
-    <td><code>k-map-get( $theme, focus-bg )</code></td>
-    <td><span class="color-preview" style="background-color: rgba(0, 0, 0, 0.12)"></span><code>rgba(0, 0, 0, 0.12)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-shadow</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-current-item-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the current Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-current-item-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the current Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-current-item-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the current Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sizes</td>
-    <td>Map</td>
-    <td><code>(
-    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
-    )
-)</code></td>
-    <td><code>(sm: (link-padding-x: 10px, link-padding-y: 2px, icon-link-padding-x: 8px, icon-link-padding-y: 8px, font-size: 14px, line-height: 2), md: (link-padding-x: 10px, link-padding-y: 4px, icon-link-padding-x: 10px, icon-link-padding-y: 10px, font-size: 14px, line-height: 2), lg: (link-padding-x: 10px, link-padding-y: 6px, icon-link-padding-x: 12px, icon-link-padding-y: 12px, font-size: 14px, line-height: 2))</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The sizes map for the Breadcrumb.</div></div>
-    </td>
-</tr>
-</tbody>
-</table>
-
-## Suggested Links
-
-* [Styling Overview]({% slug themesandstyles %})
-* [Web Font Icons]({% slug icons %})
-* [Preview of the Themed Components](../)
-
diff --git a/packages/material/docs/customization.md b/packages/material/docs/customization.md
index 34ac9f17fb2..bc71d601bf9 100644
--- a/packages/material/docs/customization.md
+++ b/packages/material/docs/customization.md
@@ -969,661 +969,6 @@ The following table lists the available variables for customizing the Material t
 </tbody>
 </table>
 
-### Breadcrumb
-
-<table class="theme-variables">
-    <colgroup>
-    <col style="width: 200px; white-space:nowrap;" />
-    <col />
-    <col />
-    <col />
-</colgroup>
-<thead>
-    <tr>
-        <th>Name</th>
-        <th>Type</th>
-        <th>Default value</th>
-        <th>Computed value</th>
-    </tr>
-</thead>
-<tbody><tr>
-    <td>$kendo-breadcrumb-border-width</td>
-    <td>Number</td>
-    <td><code>0px</code></td>
-    <td><code>0px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the border around the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-margin-x</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal margin of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-margin-y</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical margin of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-padding-x</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-padding-y</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-font-family</td>
-    <td>List</td>
-    <td><code>$kendo-font-family</code></td>
-    <td><code>Roboto, "Helvetica Neue", sans-serif</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font family of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-md</code></td>
-    <td><code>14px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-md</code></td>
-    <td><code>14px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the small Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-font-size</code></td>
-    <td><code>14px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the medium Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-md</code></td>
-    <td><code>14px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the large Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-md</code></td>
-    <td><code>2</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-md</code></td>
-    <td><code>2</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the small Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-line-height</code></td>
-    <td><code>2</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the medium Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-md</code></td>
-    <td><code>2</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the height Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-bg</td>
-    <td>Color</td>
-    <td><code>$kendo-component-bg</code></td>
-    <td><span class="color-preview" style="background-color: #ffffff"></span><code>#ffffff</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The base background of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-text</td>
-    <td>Color</td>
-    <td><code>$kendo-component-text</code></td>
-    <td><span class="color-preview" style="background-color: rgba(0, 0, 0, 0.87)"></span><code>rgba(0, 0, 0, 0.87)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The base text color of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-border</td>
-    <td>Color</td>
-    <td><code>$kendo-component-border</code></td>
-    <td><span class="color-preview" style="background-color: rgba(0, 0, 0, 0.12)"></span><code>rgba(0, 0, 0, 0.12)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The base border color of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-focus-shadow</td>
-    <td>List</td>
-    <td><code>0 0 2px 1px rgba( black, .06 )</code></td>
-    <td><code>0 0 2px 1px rgba(0, 0, 0, 0.06)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2.5 )</code></td>
-    <td><code>10px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2.5 )</code></td>
-    <td><code>10px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-link-padding-x</code></td>
-    <td><code>10px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2.5 )</code></td>
-    <td><code>10px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 1 )</code></td>
-    <td><code>4px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 0.5 )</code></td>
-    <td><code>2px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-link-padding-y</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-link-padding-y</code></td>
-    <td><code>4px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 1.5 )</code></td>
-    <td><code>6px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-border-radius</td>
-    <td>Number</td>
-    <td><code>$kendo-border-radius-md</code></td>
-    <td><code>4px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border-radius of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2.5 )</code></td>
-    <td><code>10px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-y</code></td>
-    <td><code>10px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 3 )</code></td>
-    <td><code>12px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-y</code></td>
-    <td><code>10px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-sm-icon-link-padding-y</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-x</code></td>
-    <td><code>10px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-lg-icon-link-padding-y</code></td>
-    <td><code>12px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-icon-spacing</td>
-    <td>Number</td>
-    <td><code>$kendo-icon-spacing</code></td>
-    <td><code>8px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-initial-text</td>
-    <td>String</td>
-    <td><code>inherit</code></td>
-    <td><code>inherit</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-text</td>
-    <td>Color</td>
-    <td><code>$kendo-color-primary</code></td>
-    <td><span class="color-preview" style="background-color: #3f51b5"></span><code>#3f51b5</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-hover-bg</td>
-    <td>Color</td>
-    <td><code>$kendo-hover-bg</code></td>
-    <td><span class="color-preview" style="background-color: rgba(0, 0, 0, 0.04)"></span><code>rgba(0, 0, 0, 0.04)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the hovered Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-hover-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the hovered Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-hover-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the hovered Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-bg</td>
-    <td>Color</td>
-    <td><code>k-map-get( $theme, focus-bg )</code></td>
-    <td><span class="color-preview" style="background-color: rgba(0, 0, 0, 0.12)"></span><code>rgba(0, 0, 0, 0.12)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-shadow</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-hover-bg</td>
-    <td>Color</td>
-    <td><code>$kendo-hover-bg</code></td>
-    <td><span class="color-preview" style="background-color: rgba(0, 0, 0, 0.04)"></span><code>rgba(0, 0, 0, 0.04)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the hovered Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-hover-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the hovered Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-hover-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the hovered Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-bg</td>
-    <td>Color</td>
-    <td><code>k-map-get( $theme, focus-bg )</code></td>
-    <td><span class="color-preview" style="background-color: rgba(0, 0, 0, 0.12)"></span><code>rgba(0, 0, 0, 0.12)</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-focus-shadow</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-current-item-bg</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of the current Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-current-item-text</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the current Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-current-item-border</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the current Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sizes</td>
-    <td>Map</td>
-    <td><code>(
-    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
-    )
-)</code></td>
-    <td><code>(sm: (link-padding-x: 10px, link-padding-y: 2px, icon-link-padding-x: 8px, icon-link-padding-y: 8px, font-size: 14px, line-height: 2), md: (link-padding-x: 10px, link-padding-y: 4px, icon-link-padding-x: 10px, icon-link-padding-y: 10px, font-size: 14px, line-height: 2), lg: (link-padding-x: 10px, link-padding-y: 6px, icon-link-padding-x: 12px, icon-link-padding-y: 12px, font-size: 14px, line-height: 2))</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The sizes map for the Breadcrumb.</div></div>
-    </td>
-</tr>
-</tbody>
-</table>
-
 ### Button
 
 <table class="theme-variables">
diff --git a/packages/material/scss/breadcrumb/_variables.scss b/packages/material/scss/breadcrumb/_variables.scss
index 68c1c6db76a..33f18ec3f73 100644
--- a/packages/material/scss/breadcrumb/_variables.scss
+++ b/packages/material/scss/breadcrumb/_variables.scss
@@ -1,231 +1,58 @@
 // Breadcrumb
-
-/// The width of the border around the Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-border-width: 0px !default;
-
-/// The horizontal margin of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-margin-x: null !default;
-/// The vertical margin of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-margin-y: null !default;
-/// The horizontal padding of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-padding-x: null !default;
-/// The vertical padding of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-padding-y: null !default;
+$kendo-breadcrumb-border-width: 0px !default;
 
-/// The font family of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-font-family: $kendo-font-family !default;
-
-/// The font size of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-font-size: $kendo-font-size-md !default;
-/// The font size of the small Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-font-size: $kendo-font-size-md !default;
-/// The font size of the medium Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-md-font-size: $kendo-breadcrumb-font-size !default;
-/// The font size of the large Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-font-size: $kendo-font-size-md !default;
-
-/// The line-height of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-line-height: $kendo-line-height-md !default;
-/// The line-height of the small Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-line-height: $kendo-line-height-md !default;
-/// The line-height of the medium Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-md-line-height: $kendo-breadcrumb-line-height !default;
-/// The line-height of the height Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-line-height: $kendo-line-height-md !default;
 
-/// The base background of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-bg: $kendo-component-bg !default;
-/// The base text color of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-text: $kendo-component-text !default;
-/// The base border color of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-border: $kendo-component-border !default;
 
-/// The box shadow of the focused Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .06 ) !default;
-
-/// The horizontal padding of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-padding-x: k-map-get( $kendo-spacing, 2.5 ) !default;
-/// The horizontal padding of the small Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-x: k-map-get( $kendo-spacing, 2.5 ) !default;
-/// The horizontal padding of the medium Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
-/// The horizontal padding of the large Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-x: k-map-get( $kendo-spacing, 2.5 ) !default;
-
-/// The vertical padding of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
-/// The vertical padding of the small Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default;
-/// The vertical padding of the medium Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-link-padding-y !default;
-/// The vertical padding of the large Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
-
-/// The border-radius of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-border-radius: $kendo-border-radius-md !default;
 
-/// The vertical padding of the Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-icon-link-padding-y: k-map-get( $kendo-spacing, 2.5 ) !default;
-/// The vertical padding of the small Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-icon-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-/// The vertical padding of the medium Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y !default;
-/// The vertical padding of the large Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-icon-link-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
-
-/// The horizontal padding of the Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-y !default;
-/// The horizontal padding of the small Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-y !default;
-/// The horizontal padding of the medium Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-md-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-x !default;
-/// The horizontal padding of the large Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-y !default;
+$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
+$kendo-breadcrumb-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-x !default;
 
-/// The spacing of the Breadcrumb link icon.
-/// @group breadcrumb
+$kendo-breadcrumb-root-link-spacing: $kendo-breadcrumb-link-padding-x !default;
 $kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default;
 
-/// The text color of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-initial-text: inherit !default;
 
-/// The background color of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-bg: null !default;
-/// The text color of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-text: $kendo-color-primary !default;
-/// The border color of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-border: null !default;
 
-/// The background color of the hovered Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-hover-bg: $kendo-hover-bg !default;
-/// The text color of the hovered Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-hover-text: null !default;
-/// The border color of the hovered Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-hover-border: null !default;
 
-/// The background color of the focused Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-focus-bg: k-map-get( $theme, focus-bg ) !default;
-/// The text color of the focused Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-focus-text: null !default;
-/// The border color of the focused Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-focus-border: null !default;
-/// The box shadow of the focused Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-focus-shadow: null !default;
 
-/// The background color of the Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-bg: null !default;
-/// The text color of the Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-text: null !default;
-/// The border color of the Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-border: null !default;
 
-/// The background color of the hovered Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-bg: $kendo-hover-bg !default;
-/// The text color of the hovered Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-text: null !default;
-/// The border color of the hovered Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-border: null !default;
 
-/// The background color of the focused Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-bg: k-map-get( $theme, focus-bg ) !default;
-/// The text color of the focused Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-text: null !default;
-/// The border color of the focused Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-border: null !default;
-/// The box shadow of the focused Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-focus-shadow: null !default;
 
-/// The background color of the current Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-current-item-bg: null !default;
-/// The text color of the current Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-current-item-text: null !default;
-/// The border color of the current Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-current-item-border: null !default;
 
-/// The sizes map for the Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-sizes: (
-    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
-    )
-) !default;
+$kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba( black, .06 ) !default;
diff --git a/packages/nouvelle/docs/customization-breadcrumb.md b/packages/nouvelle/docs/customization-breadcrumb.md
deleted file mode 100644
index 4cad8176d2f..00000000000
--- a/packages/nouvelle/docs/customization-breadcrumb.md
+++ /dev/null
@@ -1,413 +0,0 @@
----
-title: Customizing Breadcrumb
-description: "Refer to the list of the Kendo UI Nouvelle theme variables available for customization."
-slug: variables_kendothemenouvelle_breadcrumb
-position: 9
----
-
-# Customizing Breadcrumb
-
-## Variables
-
-The following table lists the available variables for customization.
-
-<table class="theme-variables">
-    <colgroup>
-    <col style="width: 200px; white-space:nowrap;" />
-    <col />
-    <col />
-    <col />
-</colgroup>
-<thead>
-    <tr>
-        <th>Name</th>
-        <th>Type</th>
-        <th>Default value</th>
-        <th>Computed value</th>
-    </tr>
-</thead>
-<tbody>
-        <tr>
-    <td>$kendo-breadcrumb-border-width</td>
-    <td>Number</td>
-    <td><code>0px</code></td>
-    <td><code>0px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the border around the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-margin-x</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal margin of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-margin-y</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical margin of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-padding-x</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-padding-y</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-font-family</td>
-    <td>Null</td>
-    <td><code>$kendo-font-family</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font family of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-md</code></td>
-    <td><code>1rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-sm</code></td>
-    <td><code>0.875rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the small Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-font-size</code></td>
-    <td><code>1rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the medium Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-lg</code></td>
-    <td><code>1.25rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the large Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-md</code></td>
-    <td><code>1.5</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-md</code></td>
-    <td><code>1.5</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the small Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-line-height</code></td>
-    <td><code>1.5</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the medium Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-lg</code></td>
-    <td><code>1.75</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the height Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-focus-shadow</td>
-    <td>Null</td>
-    <td><code>$kendo-focus-shadow</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-link-padding-x</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 1.5 )</code></td>
-    <td><code>0.375rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 1 )</code></td>
-    <td><code>0.25rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-link-padding-y</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-link-padding-y</code></td>
-    <td><code>0.375rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-border-radius</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-border-radii, md )</code></td>
-    <td><code>0.25rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border-radius of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 1.5 )</code></td>
-    <td><code>0.375rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-y</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 3 )</code></td>
-    <td><code>0.75rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-y</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-sm-icon-link-padding-y</code></td>
-    <td><code>0.375rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-x</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-lg-icon-link-padding-y</code></td>
-    <td><code>0.75rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-icon-spacing</td>
-    <td>Number</td>
-    <td><code>$kendo-icon-spacing</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-shadow</td>
-    <td>Null</td>
-    <td><code>$kendo-focus-shadow</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sizes</td>
-    <td>Map</td>
-    <td><code>(
-    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
-    )
-)</code></td>
-    <td><code>(sm: (link-padding-x: 0.5rem, link-padding-y: 0.25rem, icon-link-padding-x: 0.375rem, icon-link-padding-y: 0.375rem, font-size: 0.875rem, line-height: 1.5), md: (link-padding-x: 0.5rem, link-padding-y: 0.375rem, icon-link-padding-x: 0.5rem, icon-link-padding-y: 0.5rem, font-size: 1rem, line-height: 1.5), lg: (link-padding-x: 0.5rem, link-padding-y: 0.5rem, icon-link-padding-x: 0.75rem, icon-link-padding-y: 0.75rem, font-size: 1.25rem, line-height: 1.75))</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The sizes map for the Breadcrumb.</div></div>
-    </td>
-</tr>
-</tbody>
-</table>
-
-## Suggested Links
-
-* [Styling Overview]({% slug themesandstyles %})
-* [Web Font Icons]({% slug icons %})
-* [Preview of the Themed Components](../)
-
diff --git a/packages/nouvelle/docs/customization.md b/packages/nouvelle/docs/customization.md
index 2ec88c1b8eb..66a941ffac6 100644
--- a/packages/nouvelle/docs/customization.md
+++ b/packages/nouvelle/docs/customization.md
@@ -736,411 +736,6 @@ The following table lists the available variables for customizing the Nouvelle t
 </tbody>
 </table>
 
-### Breadcrumb
-
-<table class="theme-variables">
-    <colgroup>
-    <col style="width: 200px; white-space:nowrap;" />
-    <col />
-    <col />
-    <col />
-</colgroup>
-<thead>
-    <tr>
-        <th>Name</th>
-        <th>Type</th>
-        <th>Default value</th>
-        <th>Computed value</th>
-    </tr>
-</thead>
-<tbody><tr>
-    <td>$kendo-breadcrumb-border-width</td>
-    <td>Number</td>
-    <td><code>0px</code></td>
-    <td><code>0px</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the border around the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-margin-x</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal margin of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-margin-y</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical margin of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-padding-x</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-padding-y</td>
-    <td>Null</td>
-    <td><code>null</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-font-family</td>
-    <td>Null</td>
-    <td><code>$kendo-font-family</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font family of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-md</code></td>
-    <td><code>1rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-sm</code></td>
-    <td><code>0.875rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the small Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-font-size</code></td>
-    <td><code>1rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the medium Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-font-size</td>
-    <td>Number</td>
-    <td><code>$kendo-font-size-lg</code></td>
-    <td><code>1.25rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The font size of the large Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-md</code></td>
-    <td><code>1.5</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-md</code></td>
-    <td><code>1.5</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the small Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-line-height</code></td>
-    <td><code>1.5</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the medium Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-line-height</td>
-    <td>Number</td>
-    <td><code>$kendo-line-height-lg</code></td>
-    <td><code>1.75</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The line-height of the height Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-focus-shadow</td>
-    <td>Null</td>
-    <td><code>$kendo-focus-shadow</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-link-padding-x</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-link-padding-x</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 1.5 )</code></td>
-    <td><code>0.375rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 1 )</code></td>
-    <td><code>0.25rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-link-padding-y</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-link-padding-y</code></td>
-    <td><code>0.375rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-border-radius</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-border-radii, md )</code></td>
-    <td><code>0.25rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border-radius of the Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 2 )</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 1.5 )</code></td>
-    <td><code>0.375rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-y</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-icon-link-padding-y</td>
-    <td>Number</td>
-    <td><code>k-map-get( $kendo-spacing, 3 )</code></td>
-    <td><code>0.75rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-y</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sm-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-sm-icon-link-padding-y</code></td>
-    <td><code>0.375rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-md-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-icon-link-padding-x</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-lg-icon-link-padding-x</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-lg-icon-link-padding-y</code></td>
-    <td><code>0.75rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-root-link-spacing</td>
-    <td>Number</td>
-    <td><code>$kendo-breadcrumb-link-padding-x</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the Breadcrumb root link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-icon-spacing</td>
-    <td>Number</td>
-    <td><code>$kendo-icon-spacing</code></td>
-    <td><code>0.5rem</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the Breadcrumb link icon.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-link-focus-shadow</td>
-    <td>Null</td>
-    <td><code>$kendo-focus-shadow</code></td>
-    <td><code>null</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the focused Breadcrumb link.</div></div>
-    </td>
-</tr>
-<tr>
-    <td>$kendo-breadcrumb-sizes</td>
-    <td>Map</td>
-    <td><code>(
-    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
-    )
-)</code></td>
-    <td><code>(sm: (link-padding-x: 0.5rem, link-padding-y: 0.25rem, icon-link-padding-x: 0.375rem, icon-link-padding-y: 0.375rem, font-size: 0.875rem, line-height: 1.5), md: (link-padding-x: 0.5rem, link-padding-y: 0.375rem, icon-link-padding-x: 0.5rem, icon-link-padding-y: 0.5rem, font-size: 1rem, line-height: 1.5), lg: (link-padding-x: 0.5rem, link-padding-y: 0.5rem, icon-link-padding-x: 0.75rem, icon-link-padding-y: 0.75rem, font-size: 1.25rem, line-height: 1.75))</code></td>
-</tr>
-<tr>
-    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The sizes map for the Breadcrumb.</div></div>
-    </td>
-</tr>
-</tbody>
-</table>
-
 ### Captcha
 
 <table class="theme-variables">
diff --git a/packages/nouvelle/scss/breadcrumb/_layout.scss b/packages/nouvelle/scss/breadcrumb/_layout.scss
index adb7711b540..664b7d107e4 100644
--- a/packages/nouvelle/scss/breadcrumb/_layout.scss
+++ b/packages/nouvelle/scss/breadcrumb/_layout.scss
@@ -11,8 +11,8 @@
         box-sizing: border-box;
         outline: 0;
         font-family: var( --kendo-breadcrumb-font-family, #{k-if-var( $kendo-breadcrumb-font-family, inherit )} );
-        font-size: var( --INTERNAL--kendo-breadcrumb-font-size, #{$kendo-breadcrumb-font-size} );
-        line-height: var( --INTERNAL--kendo-breadcrumb-line-height, #{$kendo-breadcrumb-line-height} );
+        font-size: var( --kendo-breadcrumb-font-size, #{k-if-var( $kendo-breadcrumb-font-size, 1rem )} );
+        line-height: var( --kendo-breadcrumb-line-height, #{k-if-var( $kendo-breadcrumb-line-height, normal )} );
         display: flex;
         flex-direction: row;
         -webkit-touch-callout: none;
@@ -64,8 +64,8 @@
     .k-breadcrumb-link,
     .k-breadcrumb-root-link {
         @include border-radius( var( --kendo-breadcrumb-border-radius, #{k-if-var( $kendo-breadcrumb-link-border-radius, 0 )} ) );
-        padding-inline: var( --INTERNAL--kendo-breadcrumb-link-padding-x, #{k-if-var( $kendo-breadcrumb-link-padding-x, 0 )} );
-        padding-block: var( --INTERNAL--kendo-breadcrumb-link-padding-y, #{k-if-var( $kendo-breadcrumb-link-padding-y, 0 )} );
+        padding-inline: var( --kendo-breadcrumb-link-padding-x, #{k-if-var( $kendo-breadcrumb-link-padding-x, 0 )} );
+        padding-block: var( --kendo-breadcrumb-link-padding-y, #{k-if-var( $kendo-breadcrumb-link-padding-y, 0 )} );
         color: inherit;
         text-decoration: none;
         white-space: nowrap;
@@ -79,6 +79,10 @@
         transition: var( --kendo-transition, none );
     }
 
+    .k-breadcrumb-root-link {
+        margin-inline-end: var( --kendo-breadcrumb-root-link-spacing, #{k-if-var( $kendo-breadcrumb-root-link-spacing, 0 )} );
+    }
+
     .k-breadcrumb-link > .k-image,
     .k-breadcrumb-icontext-link .k-icon,
     .k-breadcrumb-icontext-link .k-svg-icon {
@@ -86,8 +90,8 @@
     }
 
     .k-breadcrumb-icon-link {
-        padding-inline: var( --INTERNAL--kendo-breadcrumb-icon-link-padding-x, #{k-if-var( $kendo-breadcrumb-icon-link-padding-x, 0 )} );
-        padding-block: var( --INTERNAL--kendo-breadcrumb-icon-link-padding-y, #{k-if-var( $kendo-breadcrumb-icon-link-padding-y, 0 )} );
+        padding-inline: var( --kendo-breadcrumb-icon-link-padding-x, #{k-if-var( $kendo-breadcrumb-icon-link-padding-x, 0 )} );
+        padding-block: var( --kendo-breadcrumb-icon-link-padding-y, #{k-if-var( $kendo-breadcrumb-icon-link-padding-y, 0 )} );
     }
 
 
@@ -107,32 +111,4 @@
         }
     }
 
-    // Sizing
-    @each $size, $size-props in $kendo-breadcrumb-sizes {
-        $_link-padding-x: k-map-get( $size-props, link-padding-x );
-        $_link-padding-y: k-map-get( $size-props, link-padding-y );
-        $_icon-link-padding-x: k-map-get( $size-props, icon-link-padding-x );
-        $_icon-link-padding-y: k-map-get( $size-props, icon-link-padding-y );
-        $_font-size: k-map-get( $size-props, font-size );
-        $_line-height: k-map-get( $size-props, line-height );
-
-        // Breadcrumb sizes
-        .k-breadcrumb-#{$size} {
-            --INTERNAL--kendo-breadcrumb-font-size: var( --kendo-breadcrumb-#{$size}-font-size, #{$_font-size} );
-            --INTERNAL--kendo-breadcrumb-line-height: var( --kendo-breadcrumb-#{$size}-line-height, #{$_line-height} );
-
-            // Breadcrumb links
-            .k-breadcrumb-link,
-            .k-breadcrumb-root-link {
-                --INTERNAL--kendo-breadcrumb-link-padding-x: var( --kendo-breadcrumb-#{$size}-link-padding-x, #{$_link-padding-x} );
-                --INTERNAL--kendo-breadcrumb-link-padding-y: var( --kendo-breadcrumb-#{$size}-link-padding-y, #{$_link-padding-y} );
-            }
-
-            // Breadcrumb icon links
-            .k-breadcrumb-icon-link {
-                --INTERNAL--kendo-breadcrumb-icon-link-padding-x: var( --kendo-breadcrumb-#{$size}-icon-link-padding-x, #{$_icon-link-padding-x} );
-                --INTERNAL--kendo-breadcrumb-icon-link-padding-y: var( --kendo-breadcrumb-#{$size}-icon-link-padding-y, #{$_icon-link-padding-y} );
-            }
-        }
-    }
 }
diff --git a/packages/nouvelle/scss/breadcrumb/_variables.scss b/packages/nouvelle/scss/breadcrumb/_variables.scss
index e834c641df4..df5157e210a 100644
--- a/packages/nouvelle/scss/breadcrumb/_variables.scss
+++ b/packages/nouvelle/scss/breadcrumb/_variables.scss
@@ -1,152 +1,28 @@
 // Breadcrumb
 
-/// The width of the border around the Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-border-width: 0px !default;
-
-/// The horizontal margin of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-margin-x: null !default;
-/// The vertical margin of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-margin-y: null !default;
-
-/// The horizontal padding of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-padding-x: null !default;
-/// The vertical padding of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-padding-y: null !default;
+$kendo-breadcrumb-border-width: 0px !default;
 
-/// The font family of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-font-family: $kendo-font-family !default;
-
-/// The font size of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-font-size: $kendo-font-size-md !default;
-/// The font size of the small Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-font-size: $kendo-font-size-sm !default;
-/// The font size of the medium Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-md-font-size: $kendo-breadcrumb-font-size !default;
-/// The font size of the large Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-font-size: $kendo-font-size-lg !default;
-
-/// The line-height of the Breadcrumb.
-/// @group breadcrumb
 $kendo-breadcrumb-line-height: $kendo-line-height-md !default;
-/// The line-height of the small Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-line-height: $kendo-line-height-md !default;
-/// The line-height of the medium Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-md-line-height: $kendo-breadcrumb-line-height !default;
-/// The line-height of the height Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-line-height: $kendo-line-height-lg !default;
-
-/// The box shadow of the focused Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-focus-shadow: $kendo-focus-shadow !default;
 
-/// The horizontal padding of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-/// The horizontal padding of the small Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-/// The horizontal padding of the medium Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
-/// The horizontal padding of the large Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-
-/// The vertical padding of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
-/// The vertical padding of the small Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
-/// The vertical padding of the medium Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-link-padding-y !default;
-/// The vertical padding of the large Breadcrumb link.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-
-/// The border-radius of the Breadcrumb link.
-/// @group breadcrumb
 $kendo-breadcrumb-link-border-radius: k-map-get( $kendo-border-radii, md ) !default;
 
-/// The vertical padding of the Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-icon-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-/// The vertical padding of the small Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-icon-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
-/// The vertical padding of the medium Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y !default;
-/// The vertical padding of the large Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-icon-link-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
-
-/// The horizontal padding of the Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-y !default;
-/// The horizontal padding of the small Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-y !default;
-/// The horizontal padding of the medium Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-md-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-x !default;
-/// The horizontal padding of the large Breadcrumb link icon.
-/// @group breadcrumb
-$kendo-breadcrumb-lg-icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-y !default;
+$kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
+$kendo-breadcrumb-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-x !default;
 
-/// The spacing of the Breadcrumb root link.
-/// @group breadcrumb
 $kendo-breadcrumb-root-link-spacing: $kendo-breadcrumb-link-padding-x !default;
-/// The spacing of the Breadcrumb link icon.
-/// @group breadcrumb
 $kendo-breadcrumb-link-icon-spacing: $kendo-icon-spacing !default;
 
-/// The box shadow of the focused Breadcrumb link.
-/// @group breadcrumb
+$kendo-breadcrumb-focus-shadow: $kendo-focus-shadow !default;
 $kendo-breadcrumb-link-focus-shadow: $kendo-focus-shadow !default;
 
-/// The sizes map for the Breadcrumb.
-/// @group breadcrumb
-$kendo-breadcrumb-sizes: (
-    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
-    )
-) !default;
 
 // Breadcrumb theme
 $kendo-breadcrumb-ui-states: (