diff --git a/packages/main/src/Breadcrumbs.hbs b/packages/main/src/Breadcrumbs.hbs
index 28e4f2fb3a0a..02d66770d3e9 100644
--- a/packages/main/src/Breadcrumbs.hbs
+++ b/packages/main/src/Breadcrumbs.hbs
@@ -4,7 +4,7 @@
@keydown="{{_onkeydown}}"
@keyup="{{_onkeyup}}">
-
{{#each _linksData}}
-
+
ol {
- margin: 0;
- padding: 0;
- list-style-type: none;
- display: -webkit-box;
- display: -webkit-flex;
- display: flex;
-}
-
-.ui5-breadcrumbs-root > ol > li {
- display: inline;
-}
-
-.ui5-breadcrumbs-current-location {
- min-width: 1%;
- -webkit-flex: 1;
- -webkit-box-flex: 1;
- flex: 1 1 auto;
-}
-
-.ui5-breadcrumbs-current-location > span:focus {
- outline-offset: -1px;
- outline: 1px dotted var(--sapContent_FocusColor);
-}
-
-.ui5-breadcrumbs-dropdown-arrow-link-wrapper[hidden] {
- display: none
-}
-
-.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon] {
- width: var(--sapFontSize);
- height: var(--sapFontSize);
- padding-left: .675rem;
- vertical-align: text-top;
- color: var(--sapLinkColor);
-}
-
-.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon]::before {
- content: "...";
- vertical-align: middle;
- position: absolute;
- left: 0;
- bottom: 0;
-}
-
-/* underline icon on hover */
-.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-link][focused] [ui5-icon]::after,
-.ui5-breadcrumbs-dropdown-arrow-link-wrapper:hover [ui5-icon]::after {
- content: "";
- position: absolute;
- border-bottom: 0.0625rem solid;
- top: 0;
- left: 0;
- bottom: 1px;
- right: 0;
-}
-
-/* links separator */
-[ui5-link]::after {
- content: "/"; /* default separator is "Slash" */
- padding: 0 .25rem;
- cursor: auto;
- color: var(--sapContent_LabelColor);
- display: flex;
- align-items: flex-end;
-}
-
-.ui5-breadcrumbs-popover-footer {
- display: flex;
- justify-content: flex-end;
- width: 100%;
-}
-
-/* separator styles */
-:host([separator-style="BackSlash"]) [ui5-link]::after {
- content: "\\";
-}
-
-:host([separator-style="DoubleBackSlash"]) [ui5-link]::after {
- content: "\\\\";
-}
-
-:host([separator-style="DoubleGreaterThan"]) [ui5-link]::after {
- content: ">>";
-}
-
-:host([separator-style="DoubleSlash"]) [ui5-link]::after {
- content: "//";
-}
-
-:host([separator-style="GreaterThan"]) [ui5-link]::after {
- content: ">";
-}
\ No newline at end of file
+.ui5-breadcrumbs-root {
+ white-space: nowrap;
+ outline: none;
+ margin: 0 0 0.5rem 0;
+}
+
+.ui5-breadcrumbs-root > ol {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: flex;
+}
+
+.ui5-breadcrumbs-root > ol > li {
+ display: inline;
+}
+
+.ui5-breadcrumbs-current-location {
+ min-width: 1%;
+ -webkit-flex: 1;
+ -webkit-box-flex: 1;
+ flex: 1 1 auto;
+}
+
+.ui5-breadcrumbs-current-location > span:focus {
+ outline-offset: -1px;
+ outline: 1px dotted var(--sapContent_FocusColor);
+}
+
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper[hidden] {
+ display: none
+}
+
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon] {
+ width: var(--sapFontSize);
+ height: var(--sapFontSize);
+ padding-left: .675rem;
+ vertical-align: text-top;
+ color: var(--sapLinkColor);
+}
+
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-icon]::before {
+ content: "...";
+ vertical-align: middle;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+}
+
+/* underline icon on hover */
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper [ui5-link][focused] [ui5-icon]::after,
+.ui5-breadcrumbs-dropdown-arrow-link-wrapper:hover [ui5-icon]::after {
+ content: "";
+ position: absolute;
+ border-bottom: 0.0625rem solid;
+ top: 0;
+ left: 0;
+ bottom: 1px;
+ right: 0;
+}
+
+/* links separator */
+li:not(.ui5-breadcrumbs-current-location)::after {
+ content: "/"; /* default separator is "Slash" */
+ padding: 0 .25rem;
+ cursor: auto;
+ color: var(--sapContent_LabelColor);
+ display: inline-block;
+ font-family: "72override",var(--sapFontFamily);
+ font-size: var(--sapFontSize);
+}
+
+.ui5-breadcrumbs-popover-footer {
+ display: flex;
+ justify-content: flex-end;
+ width: 100%;
+}
+
+/* separator styles */
+:host([separator-style="BackSlash"]) li:not(.ui5-breadcrumbs-current-location)::after {
+ content: "\\";
+}
+
+:host([separator-style="DoubleBackSlash"]) li:not(.ui5-breadcrumbs-current-location)::after {
+ content: "\\\\";
+}
+
+:host([separator-style="DoubleGreaterThan"]) li:not(.ui5-breadcrumbs-current-location)::after {
+ content: ">>";
+}
+
+:host([separator-style="DoubleSlash"]) li:not(.ui5-breadcrumbs-current-location)::after {
+ content: "//";
+}
+
+:host([separator-style="GreaterThan"]) li:not(.ui5-breadcrumbs-current-location)::after {
+ content: ">";
+}