{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/navigation/breadcrumb","result":{"data":{"current":{"frontmatter":{"title":"Breadcrumb","order":56,"brief":"Breadcrumbs allow users to make selections from a range of values and provide an auxiliary navigation that can return to previous page.","icon":"doc-breadcrumb"},"fields":{"type":"navigation"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic Usage"},{"url":"#with-icons","title":"With Icons"},{"url":"#size","title":"Size"},{"url":"#custom-separator","title":"Custom Separator"},{"url":"#truncated-logic","title":"Truncated Logic"},{"url":"#custom-ellipsis","title":"Custom Ellipsis"},{"url":"#route-object","title":"Route Object"}]},{"url":"#api-reference","title":"API reference","items":[{"url":"#breadcrumb","title":"Breadcrumb"},{"url":"#breadcrumbitem","title":"Breadcrumb.Item"},{"url":"#route","title":"Route"}]},{"url":"#accessibility","title":"Accessibility"},{"url":"#content-guidelines","title":"Content Guidelines"},{"url":"#design-tokens","title":"Design Tokens"}]},"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\": \"en-US\",\n \"order\": 56,\n \"category\": \"Navigation\",\n \"title\": \"Breadcrumb\",\n \"subTitle\": \"Breadcrumb\",\n \"icon\": \"doc-breadcrumb\",\n \"brief\": \"Breadcrumbs allow users to make selections from a range of values and provide an auxiliary navigation that can return to previous page.\"\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 }, \"Demos\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"How to import\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, \"import { Breadcrumb } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Basic Usage\"), 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 \\n Semi-ui\\n Breadcrumb\\n Default\\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"With Icons\"), 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 \\n }>\\n }>Breadcrumb\\n With Icon\\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Size\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can set the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"compact\"), \" property to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"false\"), \" to increase the size of icons and texts.\"), 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
\\n \\n }>\\n Breadcrumb\\n Loose\\n \\n
\\n \\n }>\\n Breadcrumb\\n Loose\\n \\n
\\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Custom Separator\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Default separator is \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"/\"), \".\"), 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
\\n '}>\\n Semi-ui\\n Breadcrumb\\n Default\\n \\n
\\n }>\\n Semi-ui\\n Breadcrumb\\n Default\\n \\n {`v>=1.16.0`}\\n
\\n \\n Semi-ui\\n Breadcrumb\\n Default\\n \\n
\\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Truncated Logic\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"After \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"v0.34.0\"), \", the truncation happens if the text is overflowed. Default max-width is set to 150px. You could use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"showTooltip\"), \" to customize ellipsis behavior.\"), 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 = ['Home', 'The is a very very very very long title', 'Detail'];\\n const { Text } = Typography;\\n return (\\n <>\\n Default\\n \\n
\\n No tooltip\\n \\n
\\n No truncation\\n \\n
\\n Ellipsis from middle of text\\n \\n
\\n Customize tooltip\\n \\n \\n );\\n};\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"When the path exceeds 4 levels, the second level to the penultimate one will be replaced by ellipsis. You can click the ellipsis to reveal all levels.\\nFor \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"v>=1.9.0\"), \" , you could use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"maxItemCount\"), \" to set the number exceeded to trigger auto collapse.\"), 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 \\n Home\\n Many levels\\n Another level\\n Another level again\\n Here is another one\\n Penultimate\\n Detail\\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Custom Ellipsis\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"There are two ellipsis area rendering types provided inside the component. You can set and select the desired rendering type through \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"moreType\"), \". The optional values of \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"moreType\"), \" are \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"default\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"popover\"), \".\"), 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 \\n Home\\n Many levels\\n Another level\\n Another level again\\n Here is another one\\n Penultimate\\n Detail\\n \\n);\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"If you want to customize other forms of rendering for the ellipsis area, you can use the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderMore()\"), \" method.\"), 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 = '-'; // Separator for splicing restItem array items\\n const renderMore = restItem => {\\n const content = (\\n <>\\n {\\n restItem.map((item, idx) => (\\n \\n {item}\\n {idx !== restItem.length - 1 &&\\n \\n {separator}\\n \\n }\\n \\n ))\\n }\\n \\n );\\n return (\\n \\n \\n \\n );\\n };\\n return (\\n <>\\n renderMore(restItem)}\\n onClick={(item, e) => console.log(item, e)}\\n >\\n Home\\n Many levels\\n Another level\\n Another level again\\n Here is another one\\n Penultimate\\n Detail\\n \\n \\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Route Object\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Breadcrumb supports passing in an array of strings or route objects consisting of \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"{ name, path, href, icon }\"), \". You can also use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"renderItem\"), \" to render React.nodes. Breadcrumbs created in this way will also be truncated.\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"name\"), \": Name displayed, default with an empty string. When route passed in is a string only, it is set to name property.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"path\"), \": Routing path.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"href\"), \": Link destination and is mounted on the \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\"), \" tag.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"icon\"), \": Icon displayed.\")), 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
\\n \\n
\\n \\n },\\n { \\n path: '/breadcrumb', \\n href: '/en-US/navigation/breadcrumb', \\n name: 'breadcrumb', \\n icon: \\n },\\n 'with icon'\\n ]\\n }\\n />\\n
\\n \\n
\\n);\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"API reference\"), 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 }, \"Properties\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Instructions\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"type\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"version\"))), 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 }, \"Controlled use, currently selected navigation index\"), 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 }, \"Toggle whether to auto collapse when exceed maxItemCount\"), 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 }, \"Class name\"), 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 }, \"Compact sizing\"), 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 }, \"Set the number of item when reached to collapse\"), 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 }, \"...area rendering type\\uFF0Cone of '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 }, \"Custom function, used with routes\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"(Route: \", mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"#Route\"\n }, \"Route\"), \") => React Node\"), 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 }, \"Custom ... area rendering\"), 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 }, \"Routing information, an array of route objects or strings, format reference: \", 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 }, \"Customized delimiter\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), 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 }, \"Toggle whether to show tooltip if text overflowed. If passed in as an object: width, overflowed width; ellipsisPos, ways of truncation; opts, passed directly to Tooltip component\"), 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 }, \"Inline style\"), 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 }, \"Click event\"), 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 }, \"Properties\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Instructions\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"type\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"version\"))), 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 }, \"Destinations for links\"), 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 }, \"Displayed icon\"), 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 }, \"Click event\"), 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 }, \"Separator, used to override parent separator\"), 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 }, \"To remove hover and active effect on an item\"), 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 }, \"Properties\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Instructions\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"type\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"version\"))), 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 }, \"Link destinations\"), 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 }, \"Displayed icon\"), 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 }, \"Routing name\"), 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 }, \"Routing path\"), 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 }, \"After \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"v>=1.16.0\"), \", other props in Breadcrumb.Item are also supported correspondingly.\")), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Accessibility\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Breadcrumb supports the \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-label\"), \" props to indicate the function of the Breadcrumb\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Breadcrumb will set \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-current='page'\"), \" for the current item\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Content Guidelines\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Each page link should be short and clearly reflect the location or entity it links to\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Write in sentence case\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Design Tokens\"), mdx(DesignToken, {\n mdxType: \"DesignToken\"\n })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/navigation/breadcrumb","next":{"fields":{"slug":"zh-CN/navigation/breadcrumb"},"id":"d20f0170-c352-5235-b930-2e70c98d5be7","frontmatter":{"title":"Breadcrumb 面包屑","localeCode":"zh-CN","icon":"doc-breadcrumb","showNew":null}},"previous":{"fields":{"slug":"zh-CN/navigation/backtop"},"id":"634b085e-0f84-55bf-a711-85632aa6f2a2","frontmatter":{"title":"BackTop 回到顶部","localeCode":"zh-CN","icon":"doc-backtop","showNew":null}}}},"staticQueryHashes":["1348983216229725","1477422646229725","3245198693229725","417590761229725","63159454229725"]}