diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 33c006b4cdb..74b74af4eb5 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -13,6 +13,7 @@
- `n-dynamic-input` adds `action` slot, closes [#3981](https://github.com/tusen-ai/naive-ui/issues/3981).
- `n-dynamic-input` add `disabled` prop, closes [#4055](https://github.com/tusen-ai/naive-ui/issues/4055).
- `n-data-table` adds `titleAlign` prop, closes [#3954](https://github.com/tusen-ai/naive-ui/issues/3954).
+- `n-breadcrumb` supports RTL.
## 2.34.3
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 23f2404fb81..4cde28ddee3 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -13,6 +13,7 @@
- `n-dynamic-input` 新增 `action` slot,关闭 [#3981](https://github.com/tusen-ai/naive-ui/issues/3981)
- `n-dynamic-input` 新增 `disabled` 属性,关闭 [#4055](https://github.com/tusen-ai/naive-ui/issues/4055)
- `n-data-table` 新增 `titleAlign` 属性,关闭 [#3954](https://github.com/tusen-ai/naive-ui/issues/3954)
+- `n-breadcrumb` 支持 RTL
## 2.34.3
diff --git a/src/breadcrumb/demos/zhCN/index.demo-entry.md b/src/breadcrumb/demos/zhCN/index.demo-entry.md
index 0f1b9ab5c1e..967e76c48bf 100644
--- a/src/breadcrumb/demos/zhCN/index.demo-entry.md
+++ b/src/breadcrumb/demos/zhCN/index.demo-entry.md
@@ -9,6 +9,7 @@ basic.vue
custom.vue
separator.vue
separator-per-item.vue
+rtl-debug.vue
```
## API
diff --git a/src/breadcrumb/demos/zhCN/rtl-debug.demo.vue b/src/breadcrumb/demos/zhCN/rtl-debug.demo.vue
new file mode 100644
index 00000000000..a44bac1e7e8
--- /dev/null
+++ b/src/breadcrumb/demos/zhCN/rtl-debug.demo.vue
@@ -0,0 +1,36 @@
+
+# Rtl Debug
+
+
+
+
+
+ Rtl
+
+
+
+ 北京总行
+
+ 天津分行
+
+ 平山道支行
+
+
+
+
+
+
diff --git a/src/breadcrumb/src/Breadcrumb.tsx b/src/breadcrumb/src/Breadcrumb.tsx
index 9ba588fdfd8..485790caa9f 100644
--- a/src/breadcrumb/src/Breadcrumb.tsx
+++ b/src/breadcrumb/src/Breadcrumb.tsx
@@ -7,7 +7,7 @@ import {
Ref,
toRef
} from 'vue'
-import { useConfig, useTheme, useThemeClass } from '../../_mixins'
+import { useConfig, useRtl, useTheme, useThemeClass } from '../../_mixins'
import type { ThemeProps } from '../../_mixins'
import { breadcrumbLight } from '../styles'
import type { BreadcrumbTheme } from '../styles'
@@ -36,7 +36,8 @@ export default defineComponent({
name: 'Breadcrumb',
props: breadcrumbProps,
setup (props) {
- const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props)
+ const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } =
+ useConfig(props)
const themeRef = useTheme(
'Breadcrumb',
'-breadcrumb',
@@ -45,6 +46,7 @@ export default defineComponent({
props,
mergedClsPrefixRef
)
+ const rtlEnabledRef = useRtl('Breadcrumb', mergedRtlRef, mergedClsPrefixRef)
provide(breadcrumbInjectionKey, {
separatorRef: toRef(props, 'separator'),
mergedClsPrefixRef
@@ -88,14 +90,19 @@ export default defineComponent({
mergedClsPrefix: mergedClsPrefixRef,
cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
themeClass: themeClassHandle?.themeClass,
- onRender: themeClassHandle?.onRender
+ onRender: themeClassHandle?.onRender,
+ rtlEnabled: rtlEnabledRef
}
},
render () {
this.onRender?.()
return (