diff --git a/packages/main/src/Breadcrumbs.ts b/packages/main/src/Breadcrumbs.ts
index b56b1f1442f2..7a0f26d01120 100644
--- a/packages/main/src/Breadcrumbs.ts
+++ b/packages/main/src/Breadcrumbs.ts
@@ -18,7 +18,7 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j
import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
import BreadcrumbsDesign from "./types/BreadcrumbsDesign.js";
-import BreadcrumbsSeparatorStyle from "./types/BreadcrumbsSeparatorStyle.js";
+import BreadcrumbsSeparator from "./types/BreadcrumbsSeparator.js";
import BreadcrumbsItem from "./BreadcrumbsItem.js";
import {
BREADCRUMB_ITEM_POS,
@@ -153,8 +153,8 @@ class Breadcrumbs extends UI5Element {
* @default "Slash"
* @public
*/
- @property({ type: BreadcrumbsSeparatorStyle, defaultValue: BreadcrumbsSeparatorStyle.Slash })
- separatorStyle!: `${BreadcrumbsSeparatorStyle}`;
+ @property({ type: BreadcrumbsSeparator, defaultValue: BreadcrumbsSeparator.Slash })
+ separators!: `${BreadcrumbsSeparator}`;
/**
* Holds the number of items in the overflow.
diff --git a/packages/main/src/themes/Breadcrumbs.css b/packages/main/src/themes/Breadcrumbs.css
index 768084d182a4..d6da30b4a073 100644
--- a/packages/main/src/themes/Breadcrumbs.css
+++ b/packages/main/src/themes/Breadcrumbs.css
@@ -76,22 +76,22 @@
}
/* separator styles */
-:host([separator-style="DoubleSlash"]) .ui5-breadcrumbs-separator::after {
+:host([separators="DoubleSlash"]) .ui5-breadcrumbs-separator::after {
content: "//";
}
-:host([separator-style="BackSlash"]) .ui5-breadcrumbs-separator::after {
+:host([separators="BackSlash"]) .ui5-breadcrumbs-separator::after {
content: "\\\\";
}
-:host([separator-style="DoubleBackSlash"]) .ui5-breadcrumbs-separator::after {
+:host([separators="DoubleBackSlash"]) .ui5-breadcrumbs-separator::after {
content: "\\\\\\\\";
}
-:host([separator-style="GreaterThan"]) .ui5-breadcrumbs-separator::after {
+:host([separators="GreaterThan"]) .ui5-breadcrumbs-separator::after {
content: ">";
}
-:host([separator-style="DoubleGreaterThan"]) .ui5-breadcrumbs-separator::after {
+:host([separators="DoubleGreaterThan"]) .ui5-breadcrumbs-separator::after {
content: ">>";
}
\ No newline at end of file
diff --git a/packages/main/src/types/BreadcrumbsSeparatorStyle.ts b/packages/main/src/types/BreadcrumbsSeparator.ts
similarity index 82%
rename from packages/main/src/types/BreadcrumbsSeparatorStyle.ts
rename to packages/main/src/types/BreadcrumbsSeparator.ts
index fe034967fc1c..42bca6abfa33 100644
--- a/packages/main/src/types/BreadcrumbsSeparatorStyle.ts
+++ b/packages/main/src/types/BreadcrumbsSeparator.ts
@@ -1,8 +1,8 @@
/**
- * Different Breadcrumbs separator styles.
+ * Different Breadcrumbs separators.
* @public
*/
-enum BreadcrumbsSeparatorStyle {
+enum BreadcrumbsSeparator {
/**
* The separator appears as "/".
@@ -41,4 +41,4 @@ enum BreadcrumbsSeparatorStyle {
GreaterThan = "GreaterThan",
}
-export default BreadcrumbsSeparatorStyle;
+export default BreadcrumbsSeparator;
diff --git a/packages/main/test/pages/Breadcrumbs.html b/packages/main/test/pages/Breadcrumbs.html
index 796c6dbaeaec..56b8777fd264 100644
--- a/packages/main/test/pages/Breadcrumbs.html
+++ b/packages/main/test/pages/Breadcrumbs.html
@@ -79,7 +79,7 @@ <h2>Breadcrumbs with no current location</h2>
<ui5-breadcrumbs-item href="#">Link7</ui5-breadcrumbs-item>
</ui5-breadcrumbs>
- <h2>Breadcrumbs with specific separator style</h2>
+ <h2>Breadcrumbs with specific separators</h2>
<ui5-select id="selectSeparator">
<ui5-option>Slash</ui5-option>
<ui5-option>BackSlash</ui5-option>
@@ -234,7 +234,7 @@ <h2>Breadcrumbs with hardcoded width</h2>
selectSeparator.addEventListener("ui5-change", function(e) {
let separator = e.detail.selectedOption.textContent;
- breadcrumbs4.setAttribute("separator-style", separator);
+ breadcrumbs4.setAttribute("separators", separator);
});
</script>
diff --git a/packages/main/test/samples/Breadcrumbs.sample.html b/packages/main/test/samples/Breadcrumbs.sample.html
index b3389feb28fd..92aa2ae00ecb 100644
--- a/packages/main/test/samples/Breadcrumbs.sample.html
+++ b/packages/main/test/samples/Breadcrumbs.sample.html
@@ -47,42 +47,42 @@ <h3>Breadcrumbs with no current page</h3>
<h3>Breadcrumbs with specific separator</h3>
<div class="snippet">
<div>
- <ui5-breadcrumbs separator-style="Slash">
+ <ui5-breadcrumbs separators="Slash">
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
</ui5-breadcrumbs>
</div>
<div>
- <ui5-breadcrumbs separator-style="BackSlash">
+ <ui5-breadcrumbs separators="BackSlash">
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
</ui5-breadcrumbs>
</div>
<div>
- <ui5-breadcrumbs separator-style="DoubleBackSlash">
+ <ui5-breadcrumbs separators="DoubleBackSlash">
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
</ui5-breadcrumbs>
</div>
<div>
- <ui5-breadcrumbs separator-style="DoubleGreaterThan">
+ <ui5-breadcrumbs separators="DoubleGreaterThan">
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
</ui5-breadcrumbs>
</div>
<div>
- <ui5-breadcrumbs separator-style="DoubleSlash">
+ <ui5-breadcrumbs separators="DoubleSlash">
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
</ui5-breadcrumbs>
</div>
<div>
- <ui5-breadcrumbs separator-style="GreaterThan">
+ <ui5-breadcrumbs separators="GreaterThan">
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
@@ -90,32 +90,32 @@ <h3>Breadcrumbs with specific separator</h3>
</div>
</div>
<pre class="prettyprint lang-html"><xmp>
-<ui5-breadcrumbs separator-style="Slash">
+<ui5-breadcrumbs separators="Slash">
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
</ui5-breadcrumbs>
-<ui5-breadcrumbs separator-style="BackSlash">
+<ui5-breadcrumbs separators="BackSlash">
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
</ui5-breadcrumbs>
-<ui5-breadcrumbs separator-style="DoubleBackSlash">
+<ui5-breadcrumbs separators="DoubleBackSlash">
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
</ui5-breadcrumbs>
-<ui5-breadcrumbs separator-style="DoubleGreaterThan">
+<ui5-breadcrumbs separators="DoubleGreaterThan">
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
</ui5-breadcrumbs>
-<ui5-breadcrumbs separator-style="DoubleSlash">
+<ui5-breadcrumbs separators="DoubleSlash">
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
</ui5-breadcrumbs>
-<ui5-breadcrumbs separator-style="GreaterThan">
+<ui5-breadcrumbs separators="GreaterThan">
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page </ui5-breadcrumbs-item>
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
<ui5-breadcrumbs-item>Current Page</ui5-breadcrumbs-item>
diff --git a/packages/playground/_stories/main/Breadcrumbs/Breadcrumbs.stories.ts b/packages/playground/_stories/main/Breadcrumbs/Breadcrumbs.stories.ts
index 92b1d68fd7f1..7ec69b5c6159 100644
--- a/packages/playground/_stories/main/Breadcrumbs/Breadcrumbs.stories.ts
+++ b/packages/playground/_stories/main/Breadcrumbs/Breadcrumbs.stories.ts
@@ -17,7 +17,7 @@ export default {
const Template: UI5StoryArgs<Breadcrumbs, StoryArgsSlots> = (args) =>
html`<ui5-breadcrumbs
design="${ifDefined(args.design)}"
- separator-style="${ifDefined(args.separatorStyle)}"
+ separators="${ifDefined(args.separators)}"
>
${unsafeHTML(args.default)}
</ui5-breadcrumbs>`;
@@ -30,9 +30,9 @@ Basic.args = {
`,
};
-export const SeparatorStyle: StoryFn = () => html`
+export const Separators: StoryFn = () => html`
<div>
- <ui5-breadcrumbs design ="NoCurrentPage" separator-style="Slash">
+ <ui5-breadcrumbs design ="NoCurrentPage" separators="Slash">
<ui5-breadcrumbs-item href="https://www.sap.com"
>Root Page
</ui5-breadcrumbs-item>
@@ -43,7 +43,7 @@ export const SeparatorStyle: StoryFn = () => html`
</ui5-breadcrumbs>
</div>
<div>
- <ui5-breadcrumbs separator-style="BackSlash">
+ <ui5-breadcrumbs separators="BackSlash">
<ui5-breadcrumbs-item href="https://www.sap.com"
>Root Page
</ui5-breadcrumbs-item>
@@ -54,7 +54,7 @@ export const SeparatorStyle: StoryFn = () => html`
</ui5-breadcrumbs>
</div>
<div>
- <ui5-breadcrumbs separator-style="DoubleBackSlash">
+ <ui5-breadcrumbs separators="DoubleBackSlash">
<ui5-breadcrumbs-item href="https://www.sap.com"
>Root Page
</ui5-breadcrumbs-item>
@@ -65,7 +65,7 @@ export const SeparatorStyle: StoryFn = () => html`
</ui5-breadcrumbs>
</div>
<div>
- <ui5-breadcrumbs separator-style="DoubleGreaterThan">
+ <ui5-breadcrumbs separators="DoubleGreaterThan">
<ui5-breadcrumbs-item href="https://www.sap.com"
>Root Page
</ui5-breadcrumbs-item>
@@ -76,7 +76,7 @@ export const SeparatorStyle: StoryFn = () => html`
</ui5-breadcrumbs>
</div>
<div>
- <ui5-breadcrumbs separator-style="DoubleSlash">
+ <ui5-breadcrumbs separators="DoubleSlash">
<ui5-breadcrumbs-item href="https://www.sap.com"
>Root Page
</ui5-breadcrumbs-item>
@@ -87,7 +87,7 @@ export const SeparatorStyle: StoryFn = () => html`
</ui5-breadcrumbs>
</div>
<div>
- <ui5-breadcrumbs separator-style="GreaterThan">
+ <ui5-breadcrumbs separators="GreaterThan">
<ui5-breadcrumbs-item href="https://www.sap.com"
>Root Page
</ui5-breadcrumbs-item>
diff --git a/packages/website/docs/_samples/main/Breadcrumbs/BreadcrumbsStyles/sample.html b/packages/website/docs/_samples/main/Breadcrumbs/BreadcrumbsStyles/sample.html
index a5e8abed930c..a0dcccc28599 100644
--- a/packages/website/docs/_samples/main/Breadcrumbs/BreadcrumbsStyles/sample.html
+++ b/packages/website/docs/_samples/main/Breadcrumbs/BreadcrumbsStyles/sample.html
@@ -12,7 +12,7 @@
<!-- playground-fold-end -->
<div>
- <ui5-breadcrumbs separator-style="BackSlash">
+ <ui5-breadcrumbs separators="BackSlash">
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page
</ui5-breadcrumbs-item>
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
@@ -20,7 +20,7 @@
</ui5-breadcrumbs>
</div>
<div>
- <ui5-breadcrumbs separator-style="DoubleBackSlash">
+ <ui5-breadcrumbs separators="DoubleBackSlash">
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page
</ui5-breadcrumbs-item>
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
@@ -28,7 +28,7 @@
</ui5-breadcrumbs>
</div>
<div>
- <ui5-breadcrumbs separator-style="DoubleGreaterThan">
+ <ui5-breadcrumbs separators="DoubleGreaterThan">
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page
</ui5-breadcrumbs-item>
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
@@ -36,7 +36,7 @@
</ui5-breadcrumbs>
</div>
<div>
- <ui5-breadcrumbs separator-style="DoubleSlash">
+ <ui5-breadcrumbs separators="DoubleSlash">
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page
</ui5-breadcrumbs-item>
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>
@@ -44,7 +44,7 @@
</ui5-breadcrumbs>
</div>
<div>
- <ui5-breadcrumbs separator-style="GreaterThan">
+ <ui5-breadcrumbs separators="GreaterThan">
<ui5-breadcrumbs-item href="https://www.sap.com">Root Page
</ui5-breadcrumbs-item>
<ui5-breadcrumbs-item href="https://www.sap.com">Parent Page</ui5-breadcrumbs-item>