{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/navigation/breadcrumb","result":{"data":{"current":{"frontmatter":{"title":"Breadcrumb 面包屑","order":56,"brief":"面包屑是用户界面中的一种辅助导航，可以显示当前页面在层级架构中的位置，并能返回之前的页面。","icon":"doc-breadcrumb"},"fields":{"type":"navigation"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#带图标的","title":"带图标的"},{"url":"#尺寸","title":"尺寸"},{"url":"#自定义的分隔符","title":"自定义的分隔符"},{"url":"#截断逻辑","title":"截断逻辑"},{"url":"#自定义省略号区域","title":"自定义省略号区域"},{"url":"#路由对象","title":"路由对象"}]},{"url":"#api-参考","title":"API 参考","items":[{"url":"#breadcrumb","title":"Breadcrumb"},{"url":"#breadcrumbitem","title":"Breadcrumb.Item"},{"url":"#route","title":"Route"}]},{"url":"#accessibility","title":"Accessibility"},{"url":"#文案规范","title":"文案规范"},{"url":"#设计变量","title":"设计变量"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"zh-CN\",\n  \"order\": 56,\n  \"category\": \"导航类\",\n  \"title\": \"Breadcrumb 面包屑\",\n  \"icon\": \"doc-breadcrumb\",\n  \"brief\": \"面包屑是用户界面中的一种辅助导航，可以显示当前页面在层级架构中的位置，并能返回之前的页面。\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { Breadcrumb } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Breadcrumb } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Breadcrumb>\\n        <Breadcrumb.Item>Semi-ui</Breadcrumb.Item>\\n        <Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>\\n        <Breadcrumb.Item>Default</Breadcrumb.Item>\\n    </Breadcrumb>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5E26\\u56FE\\u6807\\u7684\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u652F\\u6301\\u6807\\u9898\\u53EA\\u663E\\u793A\\u56FE\\u6807\\u6216\\u8005\\u540C\\u65F6\\u663E\\u793A\\u56FE\\u6807\\u548C\\u6587\\u672C\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Breadcrumb } from '@douyinfe/semi-ui';\\nimport { IconHome, IconArticle } from '@douyinfe/semi-icons';\\n\\n() => (\\n    <Breadcrumb>\\n        <Breadcrumb.Item icon={<IconHome size=\\\"small\\\" />}></Breadcrumb.Item>\\n        <Breadcrumb.Item icon={<IconArticle size=\\\"small\\\" />}>Breadcrumb</Breadcrumb.Item>\\n        <Breadcrumb.Item>With Icon</Breadcrumb.Item>\\n    </Breadcrumb>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5C3A\\u5BF8\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u9ED8\\u8BA4\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"compact\"), \"\\uFF0C\\u8BBE\\u7F6E\\u5C5E\\u6027\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"false\"), \" \\u53EF\\u4F7F\\u56FE\\u6807\\u548C\\u6587\\u5B57\\u5C3A\\u5BF8\\u589E\\u52A0\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Breadcrumb } from '@douyinfe/semi-ui';\\nimport { IconHome } from '@douyinfe/semi-icons';\\n\\n() => (\\n    <div>\\n        <Breadcrumb compact>\\n            <Breadcrumb.Item icon={<IconHome size=\\\"small\\\" />}></Breadcrumb.Item>\\n            <Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>\\n            <Breadcrumb.Item>Loose</Breadcrumb.Item>\\n        </Breadcrumb>\\n        <br/>\\n        <Breadcrumb compact={false}>\\n            <Breadcrumb.Item icon={<IconHome size=\\\"small\\\" />}></Breadcrumb.Item>\\n            <Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>\\n            <Breadcrumb.Item>Loose</Breadcrumb.Item>\\n        </Breadcrumb>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u7684\\u5206\\u9694\\u7B26\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u9ED8\\u8BA4\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"/\"), \"\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Breadcrumb, Tag } from '@douyinfe/semi-ui';\\nimport { IconArrowRight } from '@douyinfe/semi-icons';\\n\\n() => (\\n    <div>\\n        <Breadcrumb separator={'>'}>\\n            <Breadcrumb.Item>Semi-ui</Breadcrumb.Item>\\n            <Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>\\n            <Breadcrumb.Item>Default</Breadcrumb.Item>\\n        </Breadcrumb>\\n        <br/>\\n        <Breadcrumb separator={<IconArrowRight size={'small'} />}>\\n            <Breadcrumb.Item>Semi-ui</Breadcrumb.Item>\\n            <Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>\\n            <Breadcrumb.Item>Default</Breadcrumb.Item>\\n        </Breadcrumb>\\n        <br/>\\n        <Tag>{`v>=1.16.0`}</Tag>\\n        <br/>\\n        <Breadcrumb size={'small'} >\\n            <Breadcrumb.Item separator=\\\":\\\">Semi-ui</Breadcrumb.Item>\\n            <Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>\\n            <Breadcrumb.Item>Default</Breadcrumb.Item>\\n        </Breadcrumb>\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u622A\\u65AD\\u903B\\u8F91\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5728 \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"0.34.0\"), \" \\u7248\\u672C\\u4E4B\\u540E\\uFF0C\\u5F53\\u7EA7\\u522B\\u540D\\u5B57\\u6EA2\\u51FA\\u8BBE\\u5B9A\\u5BBD\\u5EA6\\u540E\\u7701\\u7565\\u622A\\u65AD\\u3002\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showTooltip\"), \" \\u5C5E\\u6027\\u8BBE\\u7F6E\\u76F8\\u5173\\u53C2\\u6570\\u3002\\u9ED8\\u8BA4\\u5BBD\\u5EA6150px\\uFF0C\\u9F20\\u6807\\u60AC\\u505C\\u65F6\\u663E\\u793A Tooltip \\u5B8C\\u6574\\u663E\\u793A\\u7EA7\\u522B\\u540D\\u79F0\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Breadcrumb, Typography } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const routes = ['\\u9996\\u9875', '\\u5F53\\u8FD9\\u4E2A\\u9875\\u9762\\u6807\\u9898\\u5F88\\u957F\\u5F88\\u957F\\u5F88\\u957F\\u65F6\\u9700\\u8981\\u7701\\u7565', '\\u8BE6\\u60C5\\u9875'];\\n    const { Text } = Typography;\\n    return (\\n        <>\\n            <Text size=\\\"small\\\">\\u9ED8\\u8BA4\\u884C\\u4E3A</Text>\\n            <Breadcrumb\\n                routes={routes}\\n            />\\n            <br/>\\n            <Text size=\\\"small\\\">\\u7701\\u7565\\u4F46\\u4E0D\\u663E\\u793ATooltip</Text>\\n            <Breadcrumb\\n                showTooltip={false}\\n                routes={routes}\\n            />\\n            <br/>\\n            <Text size=\\\"small\\\">\\u4E0D\\u622A\\u65AD</Text>\\n            <Breadcrumb\\n                showTooltip={{ width: 'auto' }}\\n                routes={routes}\\n            />\\n            <br/>\\n            <Text size=\\\"small\\\">\\u4ECE\\u6807\\u9898\\u4E2D\\u95F4\\u5F00\\u59CB\\u7701\\u7565</Text>\\n            <Breadcrumb\\n                showTooltip={{ ellipsisPos: 'middle' }}\\n                routes={routes}\\n            />\\n            <br/>\\n            <Text size=\\\"small\\\">\\u81EA\\u5B9A\\u4E49 Tooltip \\u53C2\\u6570</Text>\\n            <Breadcrumb\\n                showTooltip={{ opts: { position: 'topLeft' } }}\\n                routes={routes}\\n            />\\n        </>\\n    );\\n};\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5F53\\u8DEF\\u5F84\\u5C42\\u7EA7\\u8D85\\u8FC7 4 \\u4E2A\\u7EA7\\u522B\\uFF0C\\u5219\\uFF1A\\u7B2C\\u4E8C\\u5C42\\u81F3\\u5012\\u6570\\u7B2C\\u4E09\\u5C42\\u7701\\u7565\\uFF0C\\u70B9\\u51FB\\u7701\\u7565\\u53F7\\u5C55\\u5F00\\u663E\\u793A\\u5168\\u90E8\\u7EA7\\u522B\\uFF1B\\u5982\\u679C\\u8FC7\\u957F\\u5219\\u81EA\\u52A8\\u6362\\u884C\\u3002\\n\\u5728 \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"v>=1.9.0\"), \" \\u4E4B\\u540E\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"maxItemCount\"), \" \\u6765\\u63A7\\u5236\\u8D85\\u8FC7\\u591A\\u5C11\\u4E2A\\u7EA7\\u522B\\u8FDB\\u884C\\u6298\\u53E0\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Breadcrumb } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Breadcrumb>\\n        <Breadcrumb.Item>\\u9996\\u9875</Breadcrumb.Item>\\n        <Breadcrumb.Item>\\u5F53\\u5C42\\u7EA7\\u5F88\\u591A\\u7684\\u65F6\\u5019</Breadcrumb.Item>\\n        <Breadcrumb.Item>\\u53C8\\u4E00\\u5C42</Breadcrumb.Item>\\n        <Breadcrumb.Item>\\u518D\\u4E00\\u5C42</Breadcrumb.Item>\\n        <Breadcrumb.Item>\\u4E0A\\u4E0A\\u4E00\\u5C42</Breadcrumb.Item>\\n        <Breadcrumb.Item>\\u4E0A\\u4E00\\u5C42</Breadcrumb.Item>\\n        <Breadcrumb.Item>\\u8BE6\\u60C5\\u9875</Breadcrumb.Item>\\n    </Breadcrumb>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u7701\\u7565\\u53F7\\u533A\\u57DF\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7EC4\\u4EF6\\u5185\\u90E8\\u63D0\\u4F9B\\u4E86\\u4E24\\u79CD\\u7701\\u7565\\u53F7\\u533A\\u57DF\\u6E32\\u67D3\\u7684\\u7C7B\\u578B\\uFF0C\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"moreType\"), \" \\u6765\\u8BBE\\u7F6E\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"moreType\"), \" \\u7684\\u53EF\\u9009\\u503C\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"default\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"popover\"), \"\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Breadcrumb } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Breadcrumb moreType='popover'>\\n        <Breadcrumb.Item>\\u9996\\u9875</Breadcrumb.Item>\\n        <Breadcrumb.Item>\\u5F53\\u5C42\\u7EA7\\u5F88\\u591A\\u7684\\u65F6\\u5019</Breadcrumb.Item>\\n        <Breadcrumb.Item>\\u53C8\\u4E00\\u5C42</Breadcrumb.Item>\\n        <Breadcrumb.Item>\\u518D\\u4E00\\u5C42</Breadcrumb.Item>\\n        <Breadcrumb.Item>\\u4E0A\\u4E0A\\u4E00\\u5C42</Breadcrumb.Item>\\n        <Breadcrumb.Item>\\u4E0A\\u4E00\\u5C42</Breadcrumb.Item>\\n        <Breadcrumb.Item>\\u8BE6\\u60C5\\u9875</Breadcrumb.Item>\\n    </Breadcrumb>\\n);\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u679C\\u60F3\\u8981\\u4E3A\\u7701\\u7565\\u53F7\\u533A\\u57DF\\u81EA\\u5B9A\\u4E49\\u5176\\u4ED6\\u5F62\\u5F0F\\u7684\\u6E32\\u67D3\\uFF0C\\u5219\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderMore()\"), \" \\u65B9\\u6CD5\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Breadcrumb, Popover } from '@douyinfe/semi-ui';\\nimport { IconMore } from '@douyinfe/semi-icons';\\n\\nfunction Demo() {\\n    const separator = '-'; // \\u7528\\u4E8E\\u62FC\\u63A5 restItem \\u6570\\u7EC4\\u9879\\u7684\\u5206\\u9694\\u7B26\\n    const renderMore = restItem => {\\n        const content = (\\n            <>\\n                {\\n                    restItem.map((item, idx) => (\\n                        <React.Fragment key={`restItem-${idx}`}>\\n                            {item}\\n                            {idx !== restItem.length - 1 &&\\n                                <span style={{ color: 'var(--semi-color-text-2)', marginRight: '6px' }}>\\n                                    {separator}\\n                                </span>\\n                            }\\n                        </React.Fragment>\\n                    ))\\n                }\\n            </>\\n        );\\n        return (\\n            <Popover\\n                content={content}\\n                style={{ padding: 12 }}\\n                showArrow\\n            >\\n                <IconMore />\\n            </Popover>\\n        );\\n    };\\n    return (\\n        <>\\n            <Breadcrumb\\n                renderMore={restItem => renderMore(restItem)}\\n                onClick={(item, e) => console.log(item, e)}\\n            >\\n                <Breadcrumb.Item>\\u9996\\u9875</Breadcrumb.Item>\\n                <Breadcrumb.Item>\\u5F53\\u5C42\\u7EA7\\u5F88\\u591A\\u7684\\u65F6\\u5019</Breadcrumb.Item>\\n                <Breadcrumb.Item>\\u53C8\\u4E00\\u5C42</Breadcrumb.Item>\\n                <Breadcrumb.Item>\\u518D\\u4E00\\u5C42</Breadcrumb.Item>\\n                <Breadcrumb.Item>\\u4E0A\\u4E0A\\u4E00\\u5C42</Breadcrumb.Item>\\n                <Breadcrumb.Item>\\u4E0A\\u4E00\\u5C42</Breadcrumb.Item>\\n                <Breadcrumb.Item>\\u8BE6\\u60C5\\u9875</Breadcrumb.Item>\\n            </Breadcrumb>\\n        </>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u8DEF\\u7531\\u5BF9\\u8C61\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Breadcrumb \\u652F\\u6301\\u901A\\u8FC7 routes \\u4F20\\u5165\\u8DEF\\u7531\\u5BF9\\u8C61 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"route: { name, path, href, icon }\"), \" \\u6216\\u5B57\\u7B26\\u4E32\\u7EC4\\u6210\\u7684\\u6570\\u7EC4\\u3002\\u53EF\\u4EE5\\u914D\\u5408 renderItem \\u6765\\u6E32\\u67D3\\u8282\\u70B9\\u3002\\u901A\\u8FC7\\u8FD9\\u6837\\u5B9E\\u73B0\\u7684 Breadcrumb \\u540C\\u6837\\u4F1A\\u8FDB\\u884C\\u622A\\u65AD\\u5904\\u7406\\u3002\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"name \\u4E3A\\u5C55\\u793A\\u7684\\u540D\\u79F0\\uFF0C\\u4E0D\\u4F20\\u5165\\u65F6\\u4E3A\\u7A7A\\u5B57\\u7B26\\u4E32\\u3002\\u5F53 route \\u4E3A\\u5B57\\u7B26\\u4E32\\u65F6\\uFF0C\\u9ED8\\u8BA4\\u5C06\\u5B57\\u7B26\\u4E32\\u8BBE\\u7F6E\\u4E3A\\u540D\\u79F0\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"path \\u4E3A\\u8DEF\\u7531\\u8DEF\\u5F84\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"href \\u4E3A\\u94FE\\u63A5\\u76EE\\u7684\\u5730\\uFF0C\\u6302\\u8F7D\\u5728 a \\u6807\\u7B7E\\u4E0A\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"icon \\u4E3A\\u6807\\u7B7E\\u7684\\u663E\\u793A\\u56FE\\u6807\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true hideInDSM\",\n    \"live\": \"true\",\n    \"hideInDSM\": true\n  }, \"import React from 'react';\\nimport { Breadcrumb } from '@douyinfe/semi-ui';\\nimport { IconHome, IconArticle } from '@douyinfe/semi-icons';\\n\\n() => (\\n    <div>\\n        <Breadcrumb\\n            routes={['Semi-ui', 'Breadcrumb', 'Default']}\\n        />\\n        <br />\\n        <Breadcrumb\\n            routes={\\n                [\\n                    {\\n                        path: '/',\\n                        href: '/',\\n                        icon: <IconHome size=\\\"small\\\" />\\n                    },\\n                    {\\n                        path: '/breadcrumb',\\n                        href: '/zh-CN/navigation/breadcrumb',\\n                        name: 'breadcrumb',\\n                        icon: <IconArticle size=\\\"small\\\" />\\n                    },\\n                    'with icon'\\n                ]\\n            }\\n        />\\n        <br />\\n        <Breadcrumb\\n            routes={['\\u9996\\u9875', '\\u5F53\\u8FD9\\u4E2A\\u9875\\u9762\\u6807\\u9898\\u5F88\\u957F\\u65F6\\u9700\\u8981\\u7701\\u7565', '\\u8BE6\\u60C5\\u9875']}\\n        />\\n    </div>\\n);\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Breadcrumb\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"activeIndex\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53D7\\u63A7\\u4F7F\\u7528\\uFF0C\\u5F53\\u524D\\u9009\\u62E9\\u7684\\u5BFC\\u822A\\u5E8F\\u53F7\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.61.0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"autoCollapse\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u8D85\\u51FAmaxItemCount\\u540E\\u81EA\\u52A8\\u6298\\u53E0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.9.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"compact\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u663E\\u793A\\u5C3A\\u5BF8\\uFF0C\\u662F\\u5426\\u7D27\\u51D1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"maxItemCount\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8D85\\u51FA\\u591A\\u5C11\\u4E2A\\u8FDB\\u884C\\u81EA\\u52A8\\u6298\\u53E0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.9.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"moreType\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5185\\u7F6E\\u7684...\\u533A\\u57DF\\u7684\\u6E32\\u67D3\\u7C7B\\u578B\\uFF0C\\u53EF\\u9009\\u503C\\u4E3A 'default'\\u3001'popover'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'default'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.27.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderItem\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u94FE\\u63A5\\u51FD\\u6570\\uFF0C\\u914D\\u5408 routes \\u4F7F\\u7528\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(Route: \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#Route\"\n  }, \"Route\"), \") => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0.27.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderMore\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49...\\u533A\\u57DF\\u7684\\u6E32\\u67D3\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(restItem: ReactNode[]) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.27.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"routes\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"router \\u7684\\u8DEF\\u7531\\u4FE1\\u606F\\uFF0C\\u7531\\u8DEF\\u7531\\u5BF9\\u8C61\\u6216\\u5B57\\u7B26\\u4E32\\u7EC4\\u6210\\u7684\\u6570\\u7EC4\\uFF0C\\u8DEF\\u7531\\u5BF9\\u8C61\\u683C\\u5F0F\\u53C2\\u8003: \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#Route\"\n  }, \"Route\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Array<\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#Route\"\n  }, \"Route\"), \" \", \"|\", \" string\", \">\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"separator\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u7684\\u5206\\u9694\\u7B26\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'/'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showTooltip\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5C55\\u793A Tooltip \\u53CA\\u76F8\\u5173\\u914D\\u7F6E: width\\uFF0C\\u6EA2\\u51FA\\u5BBD\\u5EA6\\uFF1B   ellipsisPos\\uFF0C\\u622A\\u65AD\\u65B9\\u5F0F\\uFF0C\\u4ECE\\u4E2D\\u95F4/\\u672B\\u5C3E\\u622A\\u65AD\\uFF1B                         opts\\uFF0C\\u900F\\u4F20\\u7ED9Tooltip\\u7684\\u5C5E\\u6027\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean \", \"|\", \" showToolTipProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{width: 150, ellipsisPos: 'end', opts: { autoAdjustOverflow: true, position: \\\"bottomLeft\\\" }}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0.34.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5185\\u8054\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5355\\u51FB\\u4E8B\\u4EF6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(item: \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#Route\"\n  }, \"Route\"), \" , e: Event) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0.27.0\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Breadcrumb.Item\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"href\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u94FE\\u63A5\\u7684\\u76EE\\u7684\\u5730\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"icon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6807\\u7B7E\\u7684\\u663E\\u793A\\u56FE\\u6807\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5355\\u51FB\\u4E8B\\u4EF6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(item: Route, e: Event)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0.27.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"separator\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5206\\u9694\\u7B26\\uFF0C\\u53EF\\u4EE5\\u8986\\u76D6\\u7236\\u7EA7\\u7684\\u5206\\u9694\\u7B26\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.16.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"noLink\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u79FB\\u9664 hover \\u548C active \\u7684\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.16.0\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Route\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"href\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u94FE\\u63A5\\u76EE\\u7684\\u5730\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0.27.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"icon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6807\\u7B7E\\u7684\\u663E\\u793A\\u56FE\\u6807\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8DEF\\u7531\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"path\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8DEF\\u7531\\u8DEF\\u5F84\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })))), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"v>=1.16.0\"), \" \\u4E4B\\u540E Route \\u652F\\u6301 Breadcrumb.Item \\u4E0A\\u7684\\u76F8\\u5E94\\u5C5E\\u6027\\u3002\")), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Accessibility\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Breadcrumb \\u652F\\u6301\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\"), \" \\u6765\\u8868\\u793A\\u8BE5 Breadcrumb \\u4F5C\\u7528\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Breadcrumb \\u4F1A\\u5BF9\\u5F53\\u524D\\u9879\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-current='page'\")))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u6587\\u6848\\u89C4\\u8303\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6BCF\\u4E2A\\u9875\\u9762\\u94FE\\u63A5\\u90FD\\u5E94\\u8BE5\\u5F88\\u7B80\\u77ED\\uFF0C\\u5E76\\u4E14\\u6E05\\u695A\\u5730\\u53CD\\u6620\\u5B83\\u94FE\\u63A5\\u5230\\u7684\\u4F4D\\u7F6E\\u6216\\u94FE\\u63A5\\u7684\\u5B9E\\u4F53\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6309\\u53E5\\u5B50\\u5927\\u5C0F\\u5199\\u4E66\\u5199\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/navigation/breadcrumb","next":{"fields":{"slug":"en-US/navigation/navigation"},"id":"55e70fab-9205-5760-ad9e-c2cf385c203f","frontmatter":{"title":"Navigation","localeCode":"en-US","icon":"doc-navigation","showNew":null}},"previous":{"fields":{"slug":"en-US/navigation/breadcrumb"},"id":"3bda8e66-2240-5f71-b948-dc24221e2052","frontmatter":{"title":"Breadcrumb","localeCode":"en-US","icon":"doc-breadcrumb","showNew":null}}}},"staticQueryHashes":["1348983216108720","1477422646108720","3245198693108720","417590761108720","63159454108720"]}