diff --git a/packages/default/scss/breadcrumb/_layout.scss b/packages/default/scss/breadcrumb/_layout.scss index ebcfe34a080..ac6bcaddab5 100644 --- a/packages/default/scss/breadcrumb/_layout.scss +++ b/packages/default/scss/breadcrumb/_layout.scss @@ -65,6 +65,7 @@ margin-right: $breadcrumb-root-link-spacing; } + .k-breadcrumb-link > .k-image, .k-breadcrumb-icontext-link .k-icon { margin-right: $breadcrumb-link-icon-spacing; } @@ -87,6 +88,19 @@ width: 100%; height: 100%; } + + &.k-breadcrumb-wrap { + .k-breadcrumb-root-item-container { + margin: 0; + padding: 0; + list-style: none; + overflow: hidden; + + display: flex; + align-items: flex-start; + flex: 0 0 auto; + } + } } .k-ie9 { @@ -105,6 +119,12 @@ .k-breadcrumb { &[dir="rtl"], .k-rtl & { + .k-breadcrumb-root-link { + margin-right: 0; + margin-left: $breadcrumb-root-link-spacing; + } + + .k-breadcrumb-link > .k-image, .k-breadcrumb-icontext-link .k-icon { margin-right: 0; margin-left: $breadcrumb-link-icon-spacing; diff --git a/tests/visual/breadcrumb-rtl.html b/tests/visual/breadcrumb-rtl.html index 66e5890af8e..ea398093e45 100644 --- a/tests/visual/breadcrumb-rtl.html +++ b/tests/visual/breadcrumb-rtl.html @@ -15,6 +15,138 @@
+ +

Wrapping -> collapseMode=wrap

+ +
    +
  1. + + + Start item + +
    2. +
+ +
    +
  1. + + + + First item + +
    2. +
  2. + + + + Second item + +
    3. +
  3. + + Third item +
    4. +
  4. + + + + +
    5. +
  5. + + + Fifth item + +
    6. +
+ + + +
    +
  1. + + Start item + +
    2. +
+ +
    +
  1. + + + + First item + +
    2. +
  2. + + + + Second item + +
    3. +
  3. + + Third item +
    4. +
  4. + + + + +
    5. +
  5. + + + Fifth item + +
    6. +
+ + + +
    +
  1. + + + +
    2. +
+
    +
  1. + + + + First item + +
    2. +
  2. + + + + Second item + +
    3. +
  3. + + Third item +
    4. +
  4. + + + + +
    5. +
  5. + + + Fifth item + +
    6. +
+ + +

Navigation Mode