@syncfusion/ej2-navigations 19.3.53 → 19.4.38

package/styles/breadcrumb/_bootstrap-dark-definition.scss

@@ -22,6 +22,12 @@ $breadcrumb-sibling-separator-margin-left: -5px !default;
 $breadcrumb-icon-item-padding: 3px 0 !default;
 $breadcrumb-icon-only-item-padding: 10px 11px !default;
 $breadcrumb-icon-only-item-bigger-padding: 10px 11px !default;
+$breadcrumb-scroll-mode-lineheight: normal !default;
+$breadcrumb-popup-item-padding: 0 14px !default;
+$breadcrumb-popup-border-radius: 4px !default;
+$breadcrumb-popup-item-height: 26px !default;
+$cmenu-li-hover-outline-offset: 0 !default;
+$breadcrumb-popup-item-bigger-height: 40px !default;
 
 // Color variables
 $breadcrumb-item-color: $brand-primary !default;
@@ -39,3 +45,11 @@ $breadcrumb-collapsed-icon-hover-color: $grey-cc !default;
 $breadcrumb-disabled-item-color: $grey-lighter !default;
 $breadcrumb-bgcolor: $gray-dark !default;
 $breadcrumb-icon-interaction-color: $brand-primary !default;
+$breadcrumb-popup-item-color: $grey-dark-font !default;
+$breadcrumb-popup-border: 1px solid $grey-99 !default;
+$breadcrumb-popup-bgcolor: $grey !default;
+$breadcrumb-popup-box-shadow: 0 5px 15px rgba($base-font, .5) !default;
+$breadcrumb-popup-item-hover-bgcolor: $grey-88 !default;
+$breadcrumb-popup-item-hover-color: $grey-dark-font !default;
+$breadcrumb-popup-item-hover-outline: 0 solid $grey-99 !default;
+

package/styles/breadcrumb/_bootstrap-definition.scss

@@ -22,6 +22,12 @@ $breadcrumb-sibling-separator-margin-left: -5px !default;
 $breadcrumb-icon-item-padding: 3px 0 !default;
 $breadcrumb-icon-only-item-padding: 10px 11px !default;
 $breadcrumb-icon-only-item-bigger-padding: 10px 11px !default;
+$breadcrumb-scroll-mode-lineheight: normal !default;
+$breadcrumb-popup-item-padding: 0 14px !default;
+$breadcrumb-popup-border-radius: 4px !default;
+$breadcrumb-popup-item-height: 26px !default;
+$cmenu-li-hover-outline-offset: 0 !default;
+$breadcrumb-popup-item-bigger-height: 40px !default;
 
 // Color variables
 $breadcrumb-item-color: $brand-primary !default;
@@ -39,3 +45,10 @@ $breadcrumb-collapsed-icon-hover-color: $gray-light !default;
 $breadcrumb-disabled-item-color: $grey-ad !default;
 $breadcrumb-bgcolor: $grey-f5 !default;
 $breadcrumb-icon-interaction-color: $brand-primary-darken-15 !default;
+$breadcrumb-popup-item-color: $gray-light !default;
+$breadcrumb-popup-border: 1px solid $grey-cc !default;
+$breadcrumb-popup-bgcolor: $grey-white !default;
+$breadcrumb-popup-box-shadow: 0 6px 12px rgba($grey-base, .175) !default;
+$breadcrumb-popup-item-hover-bgcolor: $grey-f5 !default;
+$breadcrumb-popup-item-hover-color: $grey !default;
+$breadcrumb-popup-item-hover-outline: 0 solid $grey-e6 !default;

package/styles/breadcrumb/_bootstrap4-definition.scss

@@ -22,6 +22,12 @@ $breadcrumb-sibling-separator-margin-left: -7px !default;
 $breadcrumb-icon-item-padding: 3px 0 !default;
 $breadcrumb-icon-only-item-padding: 10px 11px !default;
 $breadcrumb-icon-only-item-bigger-padding: 10px 11px !default;
+$breadcrumb-scroll-mode-lineheight: normal !default;
+$breadcrumb-popup-item-padding: 0 20px !default;
+$breadcrumb-popup-border-radius: 4px !default;
+$breadcrumb-popup-item-height: 26px !default;
+$cmenu-li-hover-outline-offset: 0 !default;
+$breadcrumb-popup-item-bigger-height: 32px !default;
 
 // Color variables
 $breadcrumb-item-color: $primary !default;
@@ -39,3 +45,10 @@ $breadcrumb-collapsed-icon-hover-color: $gray-700 !default;
 $breadcrumb-disabled-item-color: $gray-500 !default;
 $breadcrumb-bgcolor: $gray-200 !default;
 $breadcrumb-icon-interaction-color: $indigo !default;
+$breadcrumb-popup-item-color: $gray-600 !default;
+$breadcrumb-popup-border: 1px solid rgba($black, .15) !default;
+$breadcrumb-popup-bgcolor: $content-popup-bg !default;
+$breadcrumb-popup-box-shadow: none !default;
+$breadcrumb-popup-item-hover-bgcolor: darken($gray-100, 2%) !default;
+$breadcrumb-popup-item-hover-color: $gray-900 !default;
+$breadcrumb-popup-item-hover-outline: 0 solid $gray-200 !default;

package/styles/breadcrumb/_bootstrap5-definition.scss

@@ -5,10 +5,10 @@ $breadcrumb-font-size: $text-sm !default;
 $breadcrumb-bigger-font-size: $text-base !default;
 $breadcrumb-icon-font-size: $text-sm !default;
 $breadcrumb-icon-bigger-font-size: $text-base !default;
-$breadcrumb-padding: 2px !default;
+$breadcrumb-padding: 4px 2px !default;
 $breadcrumb-padding-left: 0 !default;
 $breadcrumb-padding-right: 0 !default;
-$breadcrumb-bigger-padding: 2px !default;
+$breadcrumb-bigger-padding: 4px 2px !default;
 $breadcrumb-separator-padding: 0 8px !default;
 $breadcrumb-separator-bigger-padding: 0 8px !default;
 $breadcrumb-icon-color: $icon-color !default;
@@ -28,6 +28,12 @@ $breadcrumb-icon-only-item-focus-padding: 2px 4px !default;
 $breadcrumb-icon-only-item-next-separator-padding-left: 5px;
 $breadcrumb-icon-only-item-bigger-padding: 2px 4px !default;
 $breadcrumb-icon-only-item-focus-bigger-padding: 1px 3px !default;
+$breadcrumb-scroll-mode-lineheight: 30px !default;
+$breadcrumb-popup-item-padding: 0 12px !default;
+$breadcrumb-popup-border-radius: 4px !default;
+$breadcrumb-popup-item-height: 32px !default;
+$cmenu-li-hover-outline-offset: 0 !default;
+$breadcrumb-popup-item-bigger-height: 36px !default;
 
 // Color variables
 $breadcrumb-separator-color: $content-text-color-alt3 !default;
@@ -44,3 +50,10 @@ $breadcrumb-collapsed-icon-hover-color: $icon-color !default;
 $breadcrumb-disabled-item-color: $content-text-color-disabled !default;
 $breadcrumb-icon-interaction-color: $icon-color !default;
 $breadcrumb-item-focus-border: 1px solid darken($primary-outline, 10%) !default;
+$breadcrumb-popup-item-color: $content-text-color-alt3 !default;
+$breadcrumb-popup-border: 1px solid $border-light !default;
+$breadcrumb-popup-bgcolor: $flyout-bg-color !default;
+$breadcrumb-popup-box-shadow: $shadow-lg !default;
+$breadcrumb-popup-item-hover-bgcolor: $flyout-bg-color-hover !default;
+$breadcrumb-popup-item-hover-color: $content-text-color-focus !default;
+$breadcrumb-popup-item-hover-outline: 0 solid $border-light !default;

package/styles/breadcrumb/_fabric-dark-definition.scss

@@ -24,6 +24,12 @@ $breadcrumb-collapsed-icon-focus-padding: 4px 7px !default;
 $breadcrumb-collapsed-icon-focus-bigger-padding: 6px 7px !default;
 $breadcrumb-item-focus-padding: 3px 3px !default;
 $breadcrumb-item-focus-bigger-padding: 3px 3px !default;
+$breadcrumb-scroll-mode-lineheight: 30px !default;
+$breadcrumb-popup-item-padding: 0 10px !default;
+$breadcrumb-popup-border-radius: 0 !default;
+$breadcrumb-popup-item-height: 36px !default;
+$cmenu-li-hover-outline-offset: 0 !default;
+$breadcrumb-popup-item-bigger-height: 48px !default;
 
 // Color variables
 $breadcrumb-item-color: $neutral-light-font !default;
@@ -44,3 +50,10 @@ $breadcrumb-collapsed-icon-focus-border: 1px solid $neutral-secondary-alt !defau
 $breadcrumb-item-hover-bgcolor: $neutral-quintenaryalt !default;
 $breadcrumb-item-active-bgcolor: $neutral-tertiary-alt !default;
 $breadcrumb-item-focus-border: 1px solid $neutral-secondary-alt !default;
+$breadcrumb-popup-item-color: $neutral-black !default;
+$breadcrumb-popup-border: 1px solid $neutral-light !default;
+$breadcrumb-popup-bgcolor: $neutral-lighter-alt !default;
+$breadcrumb-popup-box-shadow: 0 3px 8px 0 rgba($shadow, .26) !default;
+$breadcrumb-popup-item-hover-bgcolor: $neutral-light !default;
+$breadcrumb-popup-item-hover-color: $neutral-light-fontalt !default;
+$breadcrumb-popup-item-hover-outline: 0 solid $neutral-light !default;

package/styles/breadcrumb/_fabric-definition.scss

@@ -24,6 +24,12 @@ $breadcrumb-collapsed-icon-focus-padding: 5px 7px 3px 7px !default;
 $breadcrumb-collapsed-icon-focus-bigger-padding: 6px 7px 4px 7px !default;
 $breadcrumb-item-focus-padding: 3px 3px !default;
 $breadcrumb-item-focus-bigger-padding: 3px 3px !default;
+$breadcrumb-scroll-mode-lineheight: 30px !default;
+$breadcrumb-popup-item-padding: 0 10px !default;
+$breadcrumb-popup-border-radius: 0 !default;
+$breadcrumb-popup-item-height: 36px !default;
+$cmenu-li-hover-outline-offset: 0 !default;
+$breadcrumb-popup-item-bigger-height: 48px !default;
 
 // Color variables
 $breadcrumb-item-color: $theme-light-font !default;
@@ -44,3 +50,10 @@ $breadcrumb-collapsed-icon-focus-border: 1px solid $neutral-secondary-alt !defau
 $breadcrumb-item-hover-bgcolor: $neutral-lighter !default;
 $breadcrumb-item-active-bgcolor: $neutral-tertiary-alt !default;
 $breadcrumb-item-focus-border: 1px solid $neutral-secondary-alt !default;
+$breadcrumb-popup-item-color: $theme-light-font !default;
+$breadcrumb-popup-border: 1px solid $neutral-light !default;
+$breadcrumb-popup-bgcolor: $neutral-white !default;
+$breadcrumb-popup-box-shadow: 0 0 10px 0 rgba($neutral-black, .2) !default;
+$breadcrumb-popup-item-hover-bgcolor: $neutral-lighter !default;
+$breadcrumb-popup-item-hover-color: $theme-light-font !default;
+$breadcrumb-popup-item-hover-outline: 0 solid $neutral-light !default;

package/styles/breadcrumb/_fluent-definition.scss

@@ -0,0 +1,59 @@
+// Size variables
+$breadcrumb-skin: 'FluentUI' !default;
+$breadcrumb-last-item-font-weight: $font-weight-normal !default;
+$breadcrumb-font-size: $text-base !default;
+$breadcrumb-bigger-font-size: $text-lg !default;
+$breadcrumb-icon-font-size: $text-base !default;
+$breadcrumb-icon-bigger-font-size: $text-lg !default;
+$breadcrumb-padding: 2px !default;
+$breadcrumb-padding-left: 0 !default;
+$breadcrumb-padding-right: 0 !default;
+$breadcrumb-bigger-padding: 2px !default;
+$breadcrumb-separator-padding: 0 4px !default;
+$breadcrumb-separator-bigger-padding: 0 8px !default;
+$breadcrumb-icon-color: $icon-color !default;
+$breadcrumb-icon-right-padding: 4px !default;
+$breadcrumb-icon-bigger-right-padding: 8px !default;
+$breadcrumb-collapsed-icon-padding: 4px 4px !default;
+$breadcrumb-collapsed-icon-bigger-padding: 5px 5px !default;
+$breadcrumb-sibling-separator-padding: 0 !default;
+$breadcrumb-sibling-separator-margin-left: -8px !default;
+$breadcrumb-icon-item-padding: 0 !default;
+$breadcrumb-collapsed-icon-font-size: 16px !default;
+$breadcrumb-collapsed-icon-bigger-font-size: 18px !default;
+$breadcrumb-item-focus-padding: 1px !default;
+$breadcrumb-item-focus-bigger-padding: 1px !default;
+$breadcrumb-icon-only-item-padding: 3px 5px !default;
+$breadcrumb-icon-only-item-focus-padding: 2px 4px !default;
+$breadcrumb-icon-only-item-next-separator-padding-left: 5px;
+$breadcrumb-icon-only-item-bigger-padding: 2px 4px !default;
+$breadcrumb-icon-only-item-focus-bigger-padding: 1px 3px !default;
+$breadcrumb-scroll-mode-lineheight: 30px !default;
+$breadcrumb-popup-item-padding: 0 12px !default;
+$breadcrumb-popup-border-radius: 4px !default;
+$breadcrumb-popup-item-height: 32px !default;
+$cmenu-li-hover-outline-offset: 0 !default;
+$breadcrumb-popup-item-bigger-height: 36px !default;
+
+// Color variables
+$breadcrumb-separator-color: $content-text-color-alt3 !default;
+$breadcrumb-item-color: $content-text-color-alt3 !default;
+$breadcrumb-item-hover-color: $content-text-color-alt3 !default;
+$breadcrumb-item-focus-color: $content-text-color-alt1 !default;
+$breadcrumb-item-active-color: $content-text-color-alt1 !default;
+$breadcrumb-last-item-font-color: $content-text-color-alt1 !default;
+$breadcrumb-collapsed-icon-hover-bgcolor: $content-bg-color-alt2 !default;
+$breadcrumb-collapsed-icon-active-bgcolor: $content-bg-color-alt3 !default;
+$breadcrumb-collapsed-icon-focus-bgcolor: $content-bg-color-focus !default;
+$breadcrumb-collapsed-icon-color: $icon-color !default;
+$breadcrumb-collapsed-icon-hover-color: $icon-color !default;
+$breadcrumb-disabled-item-color: $content-text-color-disabled !default;
+$breadcrumb-icon-interaction-color: $icon-color !default;
+$breadcrumb-item-focus-border: $content-text-color-alt3 !default;
+$breadcrumb-popup-item-color: $content-text-color-alt3 !default;
+$breadcrumb-popup-border: 1px solid $border-light !default;
+$breadcrumb-popup-bgcolor: $flyout-bg-color !default;
+$breadcrumb-popup-box-shadow: $shadow-lg !default;
+$breadcrumb-popup-item-hover-bgcolor: $flyout-bg-color-hover !default;
+$breadcrumb-popup-item-hover-color: $content-text-color-focus !default;
+$breadcrumb-popup-item-hover-outline: 0 solid $border-light !default;

package/styles/breadcrumb/_highcontrast-definition.scss

@@ -24,6 +24,12 @@ $breadcrumb-collapsed-icon-focus-padding: 5px 7px 3px 7px !default;
 $breadcrumb-collapsed-icon-focus-bigger-padding: 6px 7px 4px 7px !default;
 $breadcrumb-item-focus-padding: 3px 3px !default;
 $breadcrumb-item-focus-bigger-padding: 3px 3px !default;
+$breadcrumb-scroll-mode-lineheight: 30px !default;
+$breadcrumb-popup-item-padding: 0 10px !default;
+$breadcrumb-popup-border-radius: 0 !default;
+$breadcrumb-popup-item-height: 36px !default;
+$cmenu-li-hover-outline-offset: -1px !default;
+$breadcrumb-popup-item-bigger-height: 48px !default;
 
 // Color variables
 $breadcrumb-item-color: $content-font !default;
@@ -46,3 +52,10 @@ $breadcrumb-item-active-bgcolor: $selection-bg !default;
 $breadcrumb-item-focus-border: 1px solid $selection-border !default;
 $breadcrumb-icon-hover-color: $content-font !default;
 $breadcrumb-icon-active-color: $selection-font !default;
+$breadcrumb-popup-item-color: $content-font !default;
+$breadcrumb-popup-border: 1px solid $border-default !default;
+$breadcrumb-popup-bgcolor: $bg-base-0 !default;
+$breadcrumb-popup-box-shadow: 0 0 10px 0 rgba($bg-base-0, .2) !default;
+$breadcrumb-popup-item-hover-bgcolor: $hover-bg !default;
+$breadcrumb-popup-item-hover-color: $content-font !default;
+$breadcrumb-popup-item-hover-outline: 1px solid $border-default !default;

package/styles/breadcrumb/_highcontrast-light-definition.scss

@@ -24,6 +24,12 @@ $breadcrumb-collapsed-icon-focus-padding: 5px 7px 3px 7px !default;
 $breadcrumb-collapsed-icon-focus-bigger-padding: 6px 7px 4px 7px !default;
 $breadcrumb-item-focus-padding: 3px 3px !default;
 $breadcrumb-item-focus-bigger-padding: 3px 3px !default;
+$breadcrumb-scroll-mode-lineheight: 30px !default;
+$breadcrumb-popup-item-padding: 0 10px !default;
+$breadcrumb-popup-border-radius: 0 !default;
+$breadcrumb-popup-item-height: 36px !default;
+$cmenu-li-hover-outline-offset: -1px !default;
+$breadcrumb-popup-item-bigger-height: 48px !default;
 
 // Color variables
 $breadcrumb-item-color: $content-font !default;
@@ -46,3 +52,10 @@ $breadcrumb-item-active-bgcolor: $selection-bg !default;
 $breadcrumb-item-focus-border: 1px solid $selection-border !default;
 $breadcrumb-icon-hover-color: $content-font !default;
 $breadcrumb-icon-active-color: $selection-font !default;
+$breadcrumb-popup-item-color: $content-font !default;
+$breadcrumb-popup-border: 1px solid $border-default;
+$breadcrumb-popup-bgcolor: $bg-base-0;
+$breadcrumb-popup-box-shadow: 0 0 10px 0 rgba($bg-base-0, .2);
+$breadcrumb-popup-item-hover-bgcolor: $hover-bg !default;
+$breadcrumb-popup-item-hover-color: $content-font !default;
+$breadcrumb-popup-item-hover-outline: 1px solid $border-default !default;

package/styles/breadcrumb/_layout.scss

@@ -3,6 +3,27 @@
   .e-breadcrumb {
     display: block;
 
+    &.e-breadcrumb-wrap-mode {
+      display: flex;
+    }
+
+    .e-breadcrumb-first-ol {
+      align-items: flex-start;
+      flex-shrink: 0;
+      padding-right: 0;
+    }
+
+    .e-breadcrumb-wrapped-ol {
+      flex-wrap: wrap;
+      overflow: hidden;
+      padding-left: 0;
+    }
+
+    &.e-breadcrumb-scroll-mode {
+      line-height: $breadcrumb-scroll-mode-lineheight;
+      overflow: auto;
+    }
+
     ol {
       align-items: center;
       display: inline-flex;
@@ -26,20 +47,24 @@
     .e-breadcrumb-item {
       align-items: center;
       display: flex;
-      padding: $breadcrumb-padding;
+      flex-shrink: 0;
 
-      @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' or $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'tailwind' {
-        &.e-focus {
-          padding: $breadcrumb-item-focus-padding;
+      .e-breadcrumb-text {
+        padding: $breadcrumb-padding;
 
-          @if $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'tailwind' {
-            &.e-icon-item {
-              padding: $breadcrumb-icon-only-item-focus-padding;
-            }
+        @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' or $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'tailwind' {
+          &:focus {
+            padding: $breadcrumb-item-focus-padding;
           }
         }
       }
 
+      @if $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'tailwind' {
+        &.e-icon-item .e-breadcrumb-text:focus {
+          padding: $breadcrumb-icon-only-item-focus-padding;
+        }
+      }
+
       .e-breadcrumb-text {
         align-items: center;
         display: flex;
@@ -123,7 +148,9 @@
 
       @if $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'tailwind' or $breadcrumb-skin == 'bootstrap' {
         &.e-icon-item {
-          padding: $breadcrumb-icon-only-item-padding;
+          .e-breadcrumb-text {
+            padding: $breadcrumb-icon-only-item-padding;
+          }
 
           @if $breadcrumb-skin == 'bootstrap' {
             margin-left: -16px;
@@ -162,7 +189,8 @@
       }
     }
 
-    .e-breadcrumb-collapsed {
+    .e-breadcrumb-collapsed,
+    .e-breadcrumb-menu {
       cursor: pointer;
       font-size: $breadcrumb-collapsed-icon-font-size;
       padding: $breadcrumb-collapsed-icon-padding;
@@ -173,6 +201,18 @@
           padding: $breadcrumb-collapsed-icon-focus-padding;
         }
       }
+
+      @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' or $breadcrumb-skin == 'bootstrap5' {
+        margin-top: 2px;
+      }
+    }
+
+    .e-breadcrumb-menu {
+      display: inline-block;
+    }
+
+    .e-breadcrumb-item-wrapper {
+      display: flex;
     }
 
     &.e-icon-right,
@@ -188,7 +228,8 @@
       }
     }
 
-    &.e-rtl .e-icon-right {
+    &.e-rtl.e-icon-right .e-breadcrumb-icon,
+    &.e-rtl .e-icon-right .e-breadcrumb-icon {
       padding-left: 0;
       padding-right: $breadcrumb-icon-right-padding;
 
@@ -202,31 +243,138 @@
 
       .e-breadcrumb-item,
       .e-breadcrumb-separator,
-      .e-breadcrumb-collapsed {
+      .e-breadcrumb-collapsed,
+      .e-breadcrumb-menu {
         pointer-events: none;
       }
     }
   }
 
+  .e-breadcrumb-popup {
+    border: $breadcrumb-popup-border;
+    border-radius: $breadcrumb-popup-border-radius;
+    box-shadow: $breadcrumb-popup-box-shadow;
+    position: absolute;
+
+    ul {
+      margin: 0;
+      padding: 0;
+    }
+
+    .e-breadcrumb-item {
+      list-style-type: none;
+      white-space: nowrap;
+
+      .e-breadcrumb-text {
+        align-items: center;
+        display: flex;
+        font-size: $breadcrumb-font-size;
+        height: $breadcrumb-popup-item-height;
+        line-height: $breadcrumb-popup-item-height;
+        padding: $breadcrumb-popup-item-padding;
+        width: 100%;
+
+        .e-anchor-wrap {
+          align-items: inherit;
+          display: inherit;
+          width: inherit;
+        }
+      }
+
+      .e-breadcrumb-icon {
+        font-size: $breadcrumb-icon-font-size;
+        padding-right: $breadcrumb-icon-right-padding;
+      }
+
+      &.e-icon-item .e-breadcrumb-icon {
+        padding: 0;
+      }
+
+      a.e-breadcrumb-text {
+        text-decoration: none;
+      }
+    }
+
+    &.e-icon-right,
+    .e-icon-right,
+    &.e-rtl {
+      .e-breadcrumb-icon {
+        padding-left: $breadcrumb-icon-right-padding;
+        padding-right: 0;
+      }
+    }
+
+    &.e-icon-right,
+    .e-icon-right {
+      .e-breadcrumb-icon {
+        display: flex;
+        flex-grow: 1;
+        justify-content: end;
+     }
+   }
+
+    &.e-rtl.e-icon-right .e-breadcrumb-icon,
+    &.e-rtl .e-icon-right .e-breadcrumb-icon {
+      padding-left: 0;
+      padding-right: $breadcrumb-icon-right-padding;
+    }
+  }
+
+  .e-bigger.e-breadcrumb-popup,
+  .e-bigger .e-breadcrumb-popup {
+    .e-breadcrumb-text {
+      font-size: $breadcrumb-bigger-font-size;
+      height: $breadcrumb-popup-item-bigger-height;
+      line-height: $breadcrumb-popup-item-bigger-height;
+
+      .e-breadcrumb-icon {
+        font-size: $breadcrumb-icon-bigger-font-size;
+        padding-right: $breadcrumb-icon-bigger-right-padding;
+      }
+    }
+
+    .e-icon-item .e-breadcrumb-text .e-breadcrumb-icon {
+      padding: 0;
+    }
+
+    &.e-icon-right,
+    .e-icon-right,
+    &.e-rtl {
+      .e-breadcrumb-icon {
+        padding-left: $breadcrumb-icon-bigger-right-padding;
+        padding-right: 0;
+      }
+    }
+
+    &.e-rtl.e-icon-right .e-breadcrumb-icon,
+    &.e-rtl .e-icon-right .e-breadcrumb-icon {
+      padding-left: 0;
+      padding-right: $breadcrumb-icon-bigger-right-padding;
+    }
+  }
+
   .e-bigger.e-breadcrumb,
   .e-bigger .e-breadcrumb {
     .e-breadcrumb-item {
-      padding: $breadcrumb-bigger-padding;
 
-      @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' or $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'tailwind' {
-        &.e-focus {
-          padding: $breadcrumb-item-focus-bigger-padding;
+      .e-breadcrumb-text {
+        padding: $breadcrumb-bigger-padding;
 
-          @if $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'tailwind' {
-            &.e-icon-item {
-              padding: $breadcrumb-icon-only-item-focus-bigger-padding;
-            }
+        @if $breadcrumb-skin == 'fabric' or $breadcrumb-skin == 'highcontrast' or $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'tailwind' {
+          &:focus {
+            padding: $breadcrumb-item-focus-bigger-padding;
           }
         }
       }
 
+      @if $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'tailwind' {
+        &.e-icon-item .e-breadcrumb-text:focus {
+          padding: $breadcrumb-icon-only-item-focus-bigger-padding;
+        }
+      }
+
       @if $breadcrumb-skin == 'bootstrap5' or $breadcrumb-skin == 'tailwind' or $breadcrumb-skin == 'bootstrap' {
-        &.e-icon-item {
+        &.e-icon-item .e-breadcrumb-text {
           padding: $breadcrumb-icon-only-item-bigger-padding;
         }
       }
@@ -268,7 +416,8 @@
       padding-left: nth($breadcrumb-separator-bigger-padding, 2);
     }
 
-    .e-breadcrumb-collapsed {
+    .e-breadcrumb-collapsed,
+    .e-breadcrumb-menu {
       font-size: $breadcrumb-collapsed-icon-bigger-font-size;
       padding: $breadcrumb-collapsed-icon-bigger-padding;
 

package/styles/breadcrumb/_material-dark-definition.scss

@@ -20,6 +20,12 @@ $breadcrumb-collapsed-icon-bigger-font-size: 18px !default;
 $breadcrumb-sibling-separator-padding: 0 !default;
 $breadcrumb-sibling-separator-margin-left: -4px !default;
 $breadcrumb-icon-item-padding: 2px 0 !default;
+$breadcrumb-scroll-mode-lineheight: 26px !default;
+$breadcrumb-popup-item-padding: 0 16px !default;
+$breadcrumb-popup-border-radius: 0 !default;
+$breadcrumb-popup-item-height: 36px !default;
+$cmenu-li-hover-outline-offset: 0 !default;
+$breadcrumb-popup-item-bigger-height: 48px !default;
 
 // Color variables
 $breadcrumb-item-color: rgba($grey-dark-font, .65) !default;
@@ -35,3 +41,10 @@ $breadcrumb-collapsed-icon-focus-bgcolor: $grey-600 !default;
 $breadcrumb-collapsed-icon-color: $grey-400 !default;
 $breadcrumb-collapsed-icon-hover-color: $grey-400 !default;
 $breadcrumb-disabled-item-color: rgba($grey-dark-font, 26) !default;
+$breadcrumb-popup-item-color: $grey-300 !default;
+$breadcrumb-popup-border: none !default;
+$breadcrumb-popup-bgcolor: $grey-800 !default;
+$breadcrumb-popup-box-shadow: 0 8px 10px 0 rgba($grey-black, .24) !default;
+$breadcrumb-popup-item-hover-bgcolor: rgba($grey-white, .1) !default;
+$breadcrumb-popup-item-hover-color: $grey-dark-font !default;
+$breadcrumb-popup-item-hover-outline: 0 solid $grey-700 !default;

package/styles/breadcrumb/_material-definition.scss

@@ -20,6 +20,12 @@ $breadcrumb-collapsed-icon-bigger-font-size: 18px !default;
 $breadcrumb-sibling-separator-padding: 0 !default;
 $breadcrumb-sibling-separator-margin-left: -4px !default;
 $breadcrumb-icon-item-padding: 2px 0 !default;
+$breadcrumb-scroll-mode-lineheight: 26px !default;
+$breadcrumb-popup-item-padding: 0 16px !default;
+$breadcrumb-popup-border-radius: 0 !default;
+$breadcrumb-popup-item-height: 36px !default;
+$cmenu-li-hover-outline-offset: 0 !default;
+$breadcrumb-popup-item-bigger-height: 48px !default;
 
 // Color variables
 $breadcrumb-item-color: rgba($grey-light-font, .65) !default;
@@ -35,3 +41,10 @@ $breadcrumb-collapsed-icon-focus-bgcolor: $grey-100 !default;
 $breadcrumb-collapsed-icon-color: rgba($grey-light-font, .54) !default;
 $breadcrumb-collapsed-icon-hover-color: rgba($grey-light-font, .87) !default;
 $breadcrumb-disabled-item-color: rgba($grey-light-font, .26) !default;
+$breadcrumb-popup-item-color: $grey-700 !default;
+$breadcrumb-popup-border: none !default;
+$breadcrumb-popup-bgcolor: $grey-white !default;
+$breadcrumb-popup-box-shadow: 0 5px 5px -3px rgba($grey-black, .2), 0 8px 10px 1px rgba($grey-black, .14), 0 3px 14px 2px rgba($grey-black, .12) !default;
+$breadcrumb-popup-item-hover-bgcolor: $grey-200 !default;
+$breadcrumb-popup-item-hover-color: rgba($grey-light-font, .87) !default;
+$breadcrumb-popup-item-hover-outline: 0 solid rgba($grey-light-font, .12) !default;

package/styles/breadcrumb/_tailwind-dark-definition.scss

@@ -27,6 +27,12 @@ $breadcrumb-icon-only-item-padding: 3px 5px !default;
 $breadcrumb-icon-only-item-focus-padding: 2px 4px !default;
 $breadcrumb-icon-only-item-bigger-padding: 3px 5px !default;
 $breadcrumb-icon-only-item-focus-bigger-padding: 2px 4px !default;
+$breadcrumb-scroll-mode-lineheight: 26px !default;
+$breadcrumb-popup-item-padding: 0 12px !default;
+$breadcrumb-popup-border-radius: 4px !default;
+$breadcrumb-popup-item-height: 32px !default;
+$cmenu-li-hover-outline-offset: 0 !default;
+$breadcrumb-popup-item-bigger-height: 36px !default;
 
 // Color variables
 $breadcrumb-item-color: $content-text-color-alt2 !default;
@@ -45,3 +51,10 @@ $breadcrumb-collapsed-icon-color: $icon-color !default;
 $breadcrumb-collapsed-icon-hover-color: $content-text-color-alt2 !default;
 $breadcrumb-disabled-item-color: $content-text-color-disabled !default;
 $breadcrumb-item-focus-border: 1px solid $content-text-color-alt1 !default;
+$breadcrumb-popup-item-color: $cool-gray-100 !default;
+$breadcrumb-popup-border: 1px solid $border-light !default;
+$breadcrumb-popup-bgcolor: $flyout-bg-color !default;
+$breadcrumb-popup-box-shadow: $shadow-lg !default;
+$breadcrumb-popup-item-hover-bgcolor: $content-bg-color-focus !default;
+$breadcrumb-popup-item-hover-color: $content-text-color-focus !default;
+$breadcrumb-popup-item-hover-outline: 0 solid $border-light !default;

package/styles/breadcrumb/_tailwind-definition.scss

@@ -27,6 +27,12 @@ $breadcrumb-icon-only-item-padding: 3px 5px !default;
 $breadcrumb-icon-only-item-focus-padding: 2px 4px !default;
 $breadcrumb-icon-only-item-bigger-padding: 3px 5px !default;
 $breadcrumb-icon-only-item-focus-bigger-padding: 2px 4px !default;
+$breadcrumb-scroll-mode-lineheight: 26px !default;
+$breadcrumb-popup-item-padding: 0 12px !default;
+$breadcrumb-popup-border-radius: 4px !default;
+$breadcrumb-popup-item-height: 32px !default;
+$cmenu-li-hover-outline-offset: 0 !default;
+$breadcrumb-popup-item-bigger-height: 36px !default;
 
 // Color variables
 $breadcrumb-item-color: $content-text-color-alt2 !default;
@@ -45,3 +51,10 @@ $breadcrumb-collapsed-icon-color: $icon-color !default;
 $breadcrumb-collapsed-icon-hover-color: $content-text-color-alt2 !default;
 $breadcrumb-disabled-item-color: $content-text-color-disabled !default;
 $breadcrumb-item-focus-border: 1px solid $content-text-color-alt1 !default;
+$breadcrumb-popup-item-color: $content-text-color-alt2 !default;
+$breadcrumb-popup-border: 1px solid $border-light !default;
+$breadcrumb-popup-bgcolor: $flyout-bg-color !default;
+$breadcrumb-popup-box-shadow: $shadow-lg !default;
+$breadcrumb-popup-item-hover-bgcolor: $content-bg-color-focus !default;
+$breadcrumb-popup-item-hover-color: $content-text-color-focus !default;
+$breadcrumb-popup-item-hover-outline: 0 solid $border-light !default;