diff --git a/src/components/Breadcrumbs/Breadcrumbs.scss b/src/components/Breadcrumbs/Breadcrumbs.scss
index 7c7551bd..98208020 100644
--- a/src/components/Breadcrumbs/Breadcrumbs.scss
+++ b/src/components/Breadcrumbs/Breadcrumbs.scss
@@ -1,31 +1,40 @@
.deriv-breadcrumbs {
+ width: 100%;
margin: 0;
padding: 0;
&__item {
float: left;
list-style-type: none;
- }
- &__text {
- color: var(--du-text-less-prominent, #999999);
-
- &--active {
- color: var(--du-text-prominent, #333333);
+ @include rtl {
+ float: right;
}
&:not(:last-child) {
cursor: pointer;
- &:hover {
+ .deriv-breadcrumbs__text:hover {
color: var(--du-text-general, #333333);
}
}
}
+ &__text {
+ color: var(--du-text-less-prominent, #999999);
+
+ &--active {
+ color: var(--du-text-prominent, #333333);
+ }
+ }
+
+ &__separator-container {
+ cursor: default;
+ }
+
&__chevron-icon {
margin: 0 5px;
- vertical-align: middle;
+ vertical-align: sub;
path {
fill: var(--du-text-less-prominent, #999999);
@@ -34,5 +43,9 @@
@include mobile {
margin: 0 2.5px;
}
+
+ @include rtl {
+ transform: rotate(180deg);
+ }
}
}
diff --git a/src/components/Breadcrumbs/index.tsx b/src/components/Breadcrumbs/index.tsx
index d70bf7f7..0b5fdd58 100644
--- a/src/components/Breadcrumbs/index.tsx
+++ b/src/components/Breadcrumbs/index.tsx
@@ -43,13 +43,16 @@ export const Breadcrumbs = ({
>
{item.text}
- {!isLastItem &&
- (separator ?? (
-
- ))}
+ {!isLastItem && (
+
+ {separator || (
+
+ )}
+
+ )}
);
})}
diff --git a/src/styles/abstracts/_layout.scss b/src/styles/abstracts/_layout.scss
new file mode 100644
index 00000000..a11ecbcf
--- /dev/null
+++ b/src/styles/abstracts/_layout.scss
@@ -0,0 +1,7 @@
+/*RTL Language Mixin*/
+
+@mixin rtl {
+ [dir="rtl"] & {
+ @content;
+ }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index c8936e0c..48b22d6a 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,4 +1,5 @@
@import "./base/reset";
+@import "./abstracts/layout";
@import "./abstracts/variables";
@import "./abstracts/typography";
@import "./abstracts/devices";