rsuite · simonguo · Apr 28, 2025 · Apr 24, 2025
diff --git a/docs/pages/components/breadcrumb/en-US/index.md b/docs/pages/components/breadcrumb/en-US/index.md
@@ -10,22 +10,32 @@ Used to display the current page path and quickly return to the history page.

 ### Basic

+A basic example of breadcrumb navigation.
+
 <!--{include:`basic.md`}-->

 ### Size

+Breadcrumbs are available in different sizes to match your design needs.
+
 <!--{include:`size.md`}-->

 ### With Icons

+Add icons to breadcrumb items for enhanced visual cues.
+
 <!--{include:`icons.md`}-->

 ### With Background

+Add background color to make breadcrumbs stand out on the page.
+
 <!--{include:`background.md`}-->

 ### Custom separator

+Replace the default separator with custom elements or icons.
+
 <!--{include:`separator.md`}-->

 ### With Expand
@@ -34,6 +44,12 @@ Should automatically collapse if there are more than 5 items. Use `maxItems` to

 <!--{include:`max-items.md`}-->

+### Dropdown
+
+Integrate dropdown menus with breadcrumb items for additional navigation options.
+
+<!--{include:`dropdown.md`}-->
+
 ### Routing Library

 The `Breadcrumb.Item` component can be used with other routing libraries (such as Next.js, React Router) through the `as` prop. See the [Composition Guide](https://rsuitejs.com/guide/composition/#react-router-dom) for details.

diff --git a/docs/pages/components/breadcrumb/fragments/dropdown.md b/docs/pages/components/breadcrumb/fragments/dropdown.md
@@ -0,0 +1,31 @@
+<!--start-code-->
+
+```js
+import ArrowDownLineIcon from '@rsuite/icons/ArrowDownLine';
+import { Breadcrumb, Dropdown, HStack } from 'rsuite';
+
+const App = () => (
+  <Breadcrumb>
+    <Breadcrumb.Item>Home</Breadcrumb.Item>
+    <Breadcrumb.Item>
+      <Dropdown
+        renderToggle={(props, ref) => (
+          <HStack {...props} ref={ref}>
+            Components
+            <ArrowDownLineIcon />
+          </HStack>
+        )}
+      >
+        <Dropdown.Item>Guides</Dropdown.Item>
+        <Dropdown.Item>Components</Dropdown.Item>
+        <Dropdown.Item>Tools</Dropdown.Item>
+      </Dropdown>
+    </Breadcrumb.Item>
+    <Breadcrumb.Item active>Breadcrumb</Breadcrumb.Item>
+  </Breadcrumb>
+);
+
+ReactDOM.render(<App />, document.getElementById('root'));
+```
+
+<!--end-code-->
diff --git a/docs/pages/components/breadcrumb/index.tsx b/docs/pages/components/breadcrumb/index.tsx
@@ -3,7 +3,8 @@ import Link from 'next/link';
 import DefaultPage from '@/components/layout/Page';
 import ArrowRightLineIcon from '@rsuite/icons/ArrowRightLine';
 import ImportGuide from '@/components/ImportGuide';
-import { Breadcrumb, VStack, Box } from 'rsuite';
+import ArrowDownLineIcon from '@rsuite/icons/ArrowDownLine';
+import { Breadcrumb, VStack, Box, Dropdown, HStack } from 'rsuite';
 import { MdHome, MdArrowRightAlt } from 'react-icons/md';
 import { GoHomeFill } from 'react-icons/go';

@@ -21,6 +22,9 @@ export default function Page() {
        Link,
        ArrowRightLineIcon,
        Box,
+        Dropdown,
+        HStack,
+        ArrowDownLineIcon,
        GoHomeFill,
        MdHome,
        MdArrowRightAlt

diff --git a/docs/pages/components/breadcrumb/zh-CN/index.md b/docs/pages/components/breadcrumb/zh-CN/index.md
@@ -10,22 +10,32 @@

 ### 默认

+面包屑导航的基本示例。
+
 <!--{include:`basic.md`}-->

 ### 尺寸

+面包屑提供不同的尺寸以满足您的设计需求。
+
 <!--{include:`size.md`}-->

 ### 图标

+为面包屑项添加图标，提供更直观的视觉提示。
+
 <!--{include:`icons.md`}-->

 ### 背景色

+添加背景色使面包屑在页面上更加突出。
+
 <!--{include:`background.md`}-->

 ### 自定义分隔符

+用自定义元素或图标替换默认分隔符。
+
 <!--{include:`separator.md`}-->

 ### 自动折叠
@@ -34,6 +44,12 @@

 <!--{include:`max-items.md`}-->

+### 下拉菜单
+
+将下拉菜单与面包屑项集成，提供额外的导航选项。
+
+<!--{include:`dropdown.md`}-->
+
 ### 路由

 `Breadcrumb.Item` 组件可通过 `as` 属性与其他路由库（如 Next.js、React Router）结合使用。详见[组合指南](/zh/guide/composition/#code-react-router-dom-code)。