{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/navigation/navigation","result":{"data":{"current":{"frontmatter":{"title":"Navigation 导航","order":57,"brief":"为页面和功能提供导航的菜单列表。","icon":"doc-navigation"},"fields":{"type":"navigation"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本使用","title":"基本使用"},{"url":"#导航样式定义","title":"导航样式定义"},{"url":"#jsx-写法","title":"JSX 写法"},{"url":"#配合-react-router-等路由组件","title":"配合 react-router 等路由组件"},{"url":"#垂直与水平布局","title":"垂直与水平布局","items":[{"url":"#垂直布局","title":"垂直布局"},{"url":"#水平布局","title":"水平布局"},{"url":"#水平加垂直","title":"水平加垂直"}]},{"url":"#展开收起箭头位置","title":"展开收起箭头位置"},{"url":"#导航缩进","title":"导航缩进"},{"url":"#非受控属性","title":"非受控属性"},{"url":"#受控属性","title":"受控属性"}]},{"url":"#api-参考","title":"API 参考","items":[{"url":"#nav","title":"Nav"},{"url":"#navitem","title":"Nav.Item"},{"url":"#navsub","title":"Nav.Sub"},{"url":"#navheader","title":"Nav.Header"},{"url":"#navfooter","title":"Nav.Footer"}]},{"url":"#accessibility","title":"Accessibility"},{"url":"#文案规范","title":"文案规范"},{"url":"#设计变量","title":"设计变量"},{"url":"#相关物料","title":"相关物料"},{"url":"#faq","title":"FAQ"}]},"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\": 57,\n  \"category\": \"导航类\",\n  \"title\": \"Navigation 导航\",\n  \"icon\": \"doc-navigation\",\n  \"width\": \"650px\",\n  \"dir\": \"column\",\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 ApiType = makeShortcode(\"ApiType\");\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 { Nav } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u4F7F\\u7528\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7\\u4F20\\u9012 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"items\"), \" \\u53C2\\u6570\\uFF0C\\u4F60\\u80FD\\u591F\\u5FEB\\u901F\\u5F97\\u5230\\u4E00\\u4E2A\\u5BFC\\u822A\\u680F\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u6BCF\\u4E2A\\u5BFC\\u822A\\u9879\\u76EE\\u5305\\u62EC\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"itemKey\"), \"\\uFF1A\\u5BFC\\u822A\\u9879\\u76EE\\u7684\\u552F\\u4E00\\u6807\\u8BC6\\uFF08\\u5FC5\\u987B\\uFF09\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"text\"), \"\\uFF1A\\u5BFC\\u822A\\u6587\\u6848\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"icon\"), \"\\uFF1A\\u5BFC\\u822A\\u56FE\\u6807\\uFF0C\\u4F60\\u53EF\\u4EE5\\u4ECE \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"@douyinfe/semi-icons\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"@douyinfe/semi-icons-lab\"), \" \\u4E2D\\u81EA\\u7531\\u9009\\u62E9\\u4F60\\u559C\\u6B22\\u7684\\u56FE\\u6807\\uFF0C\\u8BE6\\u60C5\\u53EF\\u67E5\\u9605 \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https:/lf3-static.semi.design/obj/semi-tos/semi_main/zh-CN/basic/icon\"\n  }, \"Icon \\u7EC4\\u4EF6\\u6587\\u6863\"))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53C2\\u6570\\u542B\\u4E49\\u8BE6\\u89C1 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#Nav.Item\"\n  }, \"Nav.Item\"), \" \\u6216 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#Nav.Sub\"\n  }, \"Nav.Sub\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5F00\\u53D1\\u8005\\u53EF\\u80FD\\u4F1A\\u7ECF\\u5E38\\u5B9A\\u4E49 Logo \\u533A\\u57DF\\u548C\\u6536\\u8D77\\u6309\\u94AE\\u533A\\u57DF\\uFF0CNavigation \\u5219\\u63D0\\u4F9B\\u4E86\\u8FD9\\u6837\\u7684\\u5BB9\\u5668\\u65B9\\u4FBF\\u5F00\\u53D1\\u8005\\u5FEB\\u901F\\u5B9A\\u4E49\\u5BFC\\u822A\\u5934\\u90E8\\u548C\\u5E95\\u90E8\\uFF0C\\u4F60\\u4EC5\\u9700\\u6309\\u8981\\u6C42\\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"header\"), \" \\u6216 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"footer\"), \" \\u5373\\u53EF\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5BF9\\u4E8E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"footer\"), \"\\uFF0Csemi-ui \\u989D\\u5916\\u5C01\\u88C5\\u4E86\\u4E00\\u4E2A\\u6536\\u8D77\\u529F\\u80FD\\u6309\\u94AE\\uFF0C\\u5F00\\u53D1\\u8005\\u53EF\\u4EE5\\u901A\\u8FC7\\u4F20\\u9012 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"collapseButton = true\"), \" \\u5F00\\u542F\\u6B64\\u529F\\u80FD\\uFF0C\\u4E0D\\u8FC7\\u8BE5\\u53C2\\u6570\\u4EC5\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"mode = \\\"vertical\\\"\"), \" \\uFF08\\u5782\\u76F4\\u5BFC\\u822A\\uFF09\\u751F\\u6548\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53C2\\u6570\\u8BE6\\u89C1 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#Nav.Header\"\n  }, \"Nav.Header\"), \" \\u548C \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"#Nav.Footer\"\n  }, \"Nav.Footer\"), \"\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=78%\",\n    \"live\": \"true\",\n    \"width\": \"78%\"\n  }, \"import React from 'react';\\nimport { Nav } from '@douyinfe/semi-ui';\\nimport { IconSemiLogo } from '@douyinfe/semi-icons';\\nimport { IconDescriptions, IconIntro, IconTree, IconAvatar, IconTreeSelect, IconTabs } from '@douyinfe/semi-icons-lab';\\n\\nclass NavApp extends React.Component {\\n    render() {\\n        return (\\n            <Nav\\n                bodyStyle={{ height: 320 }}\\n                items={[\\n                    { itemKey: 'user', text: '\\u7528\\u6237\\u7BA1\\u7406', icon: <IconAvatar /> },\\n                    { itemKey: 'union', text: '\\u6D3B\\u52A8\\u7BA1\\u7406', icon: <IconDescriptions /> },\\n                    {\\n                        text: '\\u4EFB\\u52A1\\u5E73\\u53F0',\\n                        icon: <IconTree />,\\n                        itemKey: 'job',\\n                        items: ['\\u4EFB\\u52A1\\u7BA1\\u7406', '\\u7528\\u6237\\u4EFB\\u52A1\\u67E5\\u8BE2'],\\n                    },\\n                ]}\\n                header={{\\n                    logo: <IconSemiLogo style={{ height: '36px', fontSize: 36 }} />,\\n                    text: 'Semi \\u8FD0\\u8425\\u540E\\u53F0'\\n                }}\\n                footer={{\\n                    collapseButton: true,\\n                }}\\n                onSelect={data => console.log('trigger onSelect: ', data)}\\n                onClick={data => console.log('trigger onClick: ', data)}\\n            />\\n        );\\n    }\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5BFC\\u822A\\u6837\\u5F0F\\u5B9A\\u4E49\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Navigation \\u76EE\\u524D\\u63D0\\u4F9B\\u4E86\\u4E2A\\u4E24\\u4E2A\\u53C2\\u6570\\u7528\\u4E8E\\u5B9A\\u4E49\\u5BFC\\u822A\\u6837\\u5F0F\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"style\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"bodyStyle\"), \"\\uFF0C\\u5176\\u4E2D \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"style\"), \" \\u7528\\u4E8E\\u5B9A\\u4E49\\u5BFC\\u822A\\u7EC4\\u4EF6\\u6700\\u5916\\u5C42\\u7684\\u6837\\u5F0F\\uFF0C\\u800C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"bodyStyle\"), \" \\u7528\\u4E8E\\u5B9A\\u4E49\\u5BFC\\u822A\\u5217\\u8868\\u7684\\u6837\\u5F0F\\u3002\\uFF08\\u5BFC\\u822A\\u5934\\u90E8\\u548C\\u5BFC\\u822A\\u5E95\\u90E8\\u5219\\u90FD\\u63A5\\u53D7\\u5404\\u81EA\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"style\"), \" \\u53C2\\u6570\\uFF09\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F8B\\u5982\\u4F60\\u9700\\u8981\\u4E00\\u4E2A\\u4E2D\\u95F4\\u5217\\u8868\\u53EF\\u4EE5\\u6EDA\\u52A8\\uFF0C\\u5BFC\\u822A\\u5934\\u90E8\\u548C\\u5E95\\u90E8\\u56FA\\u5B9A\\u7684\\u5BFC\\u822A\\u7EC4\\u4EF6\\uFF0C\\u53EF\\u4EE5\\u8FD9\\u4E48\\u4F7F\\u7528\\uFF1A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=78%\",\n    \"live\": \"true\",\n    \"width\": \"78%\"\n  }, \"import React from 'react';\\nimport { Nav } from '@douyinfe/semi-ui';\\nimport { IconSemiLogo } from '@douyinfe/semi-icons';\\nimport { IconTreeSelect, IconForm, IconTree, IconBanner, IconBadge, IconNotification,IconSteps, IconTree, IconTabs, IconNavigation } from '@douyinfe/semi-icons-lab';\\n\\nclass NavApp extends React.Component {\\n    render() {\\n        return (\\n            <Nav\\n                style={{ height: 520 }}\\n                bodyStyle={{ height: 300 }}\\n                items={[\\n                    { itemKey: 'user', text: '\\u7528\\u6237\\u7BA1\\u7406', icon: <IconBadge /> },\\n                    { itemKey: '2', text: '\\u8BA2\\u5355\\u7BA1\\u7406', icon: <IconBanner /> },\\n                    { itemKey: '3', text: '\\u8D44\\u6E90\\u7BA1\\u7406', icon: <IconTreeSelect /> },\\n                    {\\n                        text: '\\u4EFB\\u52A1\\u5E73\\u53F0',\\n                        icon: <IconForm />,\\n                        itemKey: '4',\\n                        items: ['\\u4EFB\\u52A1\\u7BA1\\u7406', '\\u7528\\u6237\\u4EFB\\u52A1\\u67E5\\u8BE2'],\\n                    },\\n                    { itemKey: '5', text: '\\u63A8\\u9001\\u901A\\u77E5', icon: <IconNotification /> },\\n                    { itemKey: '6', text: '\\u4EFB\\u52A1', icon: <IconSteps /> },\\n                    { itemKey: '7', text: '\\u6D3B\\u52A8\\u7BA1\\u7406', icon: <IconTree /> },\\n                    { itemKey: '8', text: '\\u5185\\u5BB9\\u5DE5\\u5177', icon: <IconTabs /> },\\n                    { itemKey: '9', text: '\\u5FEB\\u6377\\u5BFC\\u822A', icon: <IconNavigation /> },\\n                ]}\\n                onSelect={key => console.log(key)}\\n                header={{\\n                    logo: <IconSemiLogo style={{ height: '36px', fontSize: 36 }} />,\\n                    text: 'Semi \\u8FD0\\u8425\\u540E\\u53F0'\\n                }}\\n                footer={{\\n                    collapseButton: true,\\n                }}\\n            />\\n        );\\n    }\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"JSX \\u5199\\u6CD5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u4F7F\\u7528 JSX \\u5199\\u6CD5\\u5B9A\\u4E49\\u5BFC\\u822A\\u5934\\u90E8\\u3001\\u5BFC\\u822A\\u9879\\u4EE5\\u53CA\\u5BFC\\u822A\\u5E95\\u90E8\\u3002\\u4F7F\\u7528 JSX\\u5199\\u6CD5\\u65F6\\uFF0C\\u5728 Nav \\u7684 children \\u5C42\\u7EA7\\uFF0C\\u4F60\\u9664\\u4E86\\u53EF\\u4EE5\\u4F7F\\u7528 Nav.Header\\u3001Nav.Item\\u3001Nav.Sub\\u3001Nav.Footer\\u5916\\uFF0C\\u4F60\\u4E5F\\u53EF\\u4EE5\\u7F6E\\u5165\\u5176\\u4ED6\\u81EA\\u5B9A\\u4E49\\u7684 ReactNode \\u5143\\u7D20\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=78%\",\n    \"live\": \"true\",\n    \"width\": \"78%\"\n  }, \"import React from 'react';\\nimport { Nav } from '@douyinfe/semi-ui';\\nimport { IconStar, IconUser, IconUserGroup, IconSemiLogo } from '@douyinfe/semi-icons';\\nimport { IconDescriptions, IconForm, IconTree, IconBanner, IconBadge } from '@douyinfe/semi-icons-lab';\\n\\nclass NavApp extends React.Component {\\n    render() {\\n        return (\\n            <Nav\\n                bodyStyle={{ height: 300 }}\\n                defaultOpenKeys={['user', 'union']}\\n                onSelect={data => console.log('trigger onSelect: ', data)}\\n                onClick={data => console.log('trigger onClick: ', data)}\\n            >\\n                <Nav.Header logo={<IconSemiLogo style={{ height: '36px', fontSize: 36 }} />} text={'Semi \\u8FD0\\u8425\\u540E\\u53F0'} />\\n                <Nav.Item itemKey={'union'} text={'\\u6D3B\\u52A8\\u7BA1\\u7406'} icon={<IconForm />} />\\n                <Nav.Sub itemKey={'user'} text=\\\"\\u7528\\u6237\\u7BA1\\u7406\\\" icon={<IconBadge />}>\\n                    <Nav.Item itemKey={'active'} text={'\\u6D3B\\u8DC3\\u7528\\u6237'} />\\n                    <Nav.Item itemKey={'negative'} text={'\\u975E\\u6D3B\\u8DC3\\u7528\\u6237'} />\\n                </Nav.Sub>\\n                <Nav.Sub itemKey={'union-management'} text=\\\"\\u4EFB\\u52A1\\u7BA1\\u7406\\\" icon={<IconTree />}>\\n                    <Nav.Item itemKey={'notice'} text={'\\u4EFB\\u52A1\\u8BBE\\u7F6E'} />\\n                    <Nav.Item itemKey={'query'} text={'\\u4EFB\\u52A1\\u67E5\\u8BE2'} />\\n                    <Nav.Item itemKey={'info'} text={'\\u4FE1\\u606F\\u5F55\\u5165'} />\\n                </Nav.Sub>\\n                <Nav.Footer collapseButton={true} />\\n            </Nav>\\n        );\\n    }\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u914D\\u5408 react-router \\u7B49\\u8DEF\\u7531\\u7EC4\\u4EF6\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4E3A\\u4E86\\u5728\\u4F7F\\u7528 react-router \\u7B49\\u8DEF\\u7531\\u7EC4\\u4EF6\\u65F6\\uFF0C\\u80FD\\u5C06 NavItem \\u5305\\u88F9\\u5728\\u8DEF\\u7531\\u7EC4\\u4EF6\\u63D0\\u4F9B\\u7684 Link \\u6216\\u8005 NavLink \\u4E2D\\u6765\\u8BA9\\u7528\\u6237\\u70B9\\u51FB NavItem \\u65F6\\u5019\\u89E6\\u53D1\\u8DEF\\u7531\\u7EC4\\u4EF6\\u7684\\u70B9\\u51FB\\u4E8B\\u4EF6\\uFF0C \\u6211\\u4EEC\\u9700\\u8981\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 renderWrapper \\u5728\\u6BCF\\u4E2A\\u5BFC\\u822A\\u9879\\u5916\\u5305\\u88F9\\u81EA\\u5B9A\\u4E49\\u5BFC\\u822A\\u7EC4\\u4EF6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://codesandbox.io/s/semi-navigation-with-react-router-9kk9dm?file=/src/App.js\"\n  }, \"\\u67E5\\u770B\\u6B64 CodeSandBox\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\"\n  }, \"import { Link } from \\\"react-router-dom\\\";\\nimport React from 'react';\\nimport { Nav } from '@douyinfe/semi-ui';\\n\\n() => {\\n    return (\\n        <Nav\\n            renderWrapper={({ itemElement, isSubNav, isInSubNav, props }) => {\\n                const routerMap = {\\n                    Home: \\\"/\\\",\\n                    About: \\\"/about\\\",\\n                    Dashboard: \\\"/dashboard\\\",\\n                    \\\"Nothing Here\\\": \\\"/nothing-here\\\"\\n                };\\n                return (\\n                    <Link\\n                        style={{ textDecoration: \\\"none\\\" }}\\n                        to={routerMap[props.itemKey]}\\n                    >\\n                        {itemElement}\\n                    </Link>\\n                );\\n            }}\\n            items={[\\n                { itemKey: \\\"Home\\\", text: \\\"Home\\\" },\\n                { itemKey: \\\"About\\\", text: \\\"About\\\" },\\n                {\\n                    text: \\\"Sub\\\",\\n                    itemKey: \\\"Sub\\\",\\n                    items: [\\\"Dashboard\\\", \\\"Nothing Here\\\"]\\n                }\\n            ]}\\n        ></Nav>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5782\\u76F4\\u4E0E\\u6C34\\u5E73\\u5E03\\u5C40\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Navigation \\u76EE\\u524D\\u63D0\\u4F9B\\u4E24\\u79CD\\u65B9\\u5411\\u7684\\u5BFC\\u822A\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5782\\u76F4\\u5E03\\u5C40\\uFF08\\u9ED8\\u8BA4\\uFF09 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"mode = \\\"vertical\\\"\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6C34\\u5E73\\u5E03\\u5C40 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"mode = \\\"horizontal\\\"\"))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7279\\u522B\\u6CE8\\u610F\\u7684\\u662F\\uFF0C\\u6709\\u4E00\\u4E9B\\u529F\\u80FD\\uFF08\\u53C2\\u6570\\uFF09\\u4EC5\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"mode = \\\"vertical\\\"\"), \" \\u65F6\\u6709\\u6548\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"isCollapsed\"), \" \\uFF08\\u5BFC\\u822A\\u6536\\u8D77\\u5230\\u4FA7\\u8FB9\\uFF09\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"defaultOpenKeys\"), \" | \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"openKeys\"), \" \\uFF08\\u6307\\u5B9A\\u9ED8\\u8BA4\\u7684\\u4EE5\\u53CA\\u53D7\\u63A7\\u7684\\u5C55\\u5F00\\u5B50\\u5BFC\\u822A\\u9879 key \\u6570\\u7EC4\\uFF0C\\u8FD9\\u4E2A\\u53C2\\u6570\\u4EC5\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"mode = \\\"vertical\\\"\"), \" \\u4E14 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"isCollapsed = false\"), \" \\u6709\\u6548\\uFF09\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Footer\"), \" \\u7EC4\\u4EF6\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"collapseButton\"), \" \\u6536\\u8D77\\u4FA7\\u8FB9\\u680F\\u529F\\u80FD\\u6309\\u94AE\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u5782\\u76F4\\u5E03\\u5C40\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=78%\",\n    \"live\": \"true\",\n    \"width\": \"78%\"\n  }, \"import React from 'react';\\nimport { Nav } from '@douyinfe/semi-ui';\\nimport { IconSemiLogo } from '@douyinfe/semi-icons';\\nimport { IconTreeSelect, IconForm, IconTree, IconBanner, IconBadge, IconNotification,IconSteps, IconTree, IconTabs, IconNavigation } from '@douyinfe/semi-icons-lab';\\n\\n\\nclass NavApp extends React.Component {\\n    render() {\\n        return (\\n            <div style={{ width: '100%' }}>\\n                <Nav\\n                    bodyStyle={{ height: 300 }}\\n                    items={[\\n                        { itemKey: 'user', text: '\\u7528\\u6237\\u7BA1\\u7406', icon: <IconBadge /> },\\n                        { itemKey: 'union', text: '\\u6D3B\\u52A8\\u7BA1\\u7406', icon: <IconTreeSelect/> },\\n                        {\\n                            itemKey: 'union-management',\\n                            text: '\\u4EFB\\u52A1\\u7BA1\\u7406',\\n                            icon: <IconForm />,\\n                            items: ['\\u4EFB\\u52A1\\u8BBE\\u7F6E', '\\u4EFB\\u52A1\\u67E5\\u8BE2', '\\u4FE1\\u606F\\u5F55\\u5165']\\n                        },\\n                        {\\n                            text: '\\u516C\\u544A\\u7BA1\\u7406',\\n                            icon: <IconBanner />,\\n                            itemKey: 'job',\\n                            items: ['\\u63A8\\u9001\\u7BA1\\u7406', '\\u5DF2\\u63A8\\u9001\\u67E5\\u8BE2'],\\n                        },\\n                    ]}\\n                    onSelect={key => console.log(key)}\\n                    header={{\\n                        logo: <IconSemiLogo style={{ height: '36px', fontSize: 36 }} />,\\n                        text: 'Semi \\u8FD0\\u8425\\u540E\\u53F0'\\n                    }}\\n                    footer={{\\n                        collapseButton: true,\\n                    }}\\n                />\\n            </div>\\n        );\\n    }\\n}\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u6C34\\u5E73\\u5E03\\u5C40\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Nav, Avatar, Dropdown } from '@douyinfe/semi-ui';\\nimport { IconStar, IconUser, IconUserGroup, IconSetting, IconEdit, IconSemiLogo } from '@douyinfe/semi-icons';\\nimport { IconTreeSelect, IconForm, IconBreadcrumb, IconBanner, IconBadge, IconNotification, IconSteps, IconTree, IconTabs, IconNavigation } from '@douyinfe/semi-icons-lab';\\n\\n\\nclass NavApp extends React.Component {\\n    render() {\\n        return (\\n            <div style={{ width: '100%' }}>\\n                <Nav\\n                    mode={'horizontal'}\\n                    items={[\\n                        { itemKey: 'user', text: '\\u7528\\u6237\\u7BA1\\u7406', icon: <IconBadge /> },\\n                        { itemKey: 'union', text: '\\u6D3B\\u52A8\\u7BA1\\u7406', icon: <IconTreeSelect /> },\\n                        {\\n                            itemKey: 'approve-management',\\n                            text: '\\u5BA1\\u6279\\u7BA1\\u7406',\\n                            icon: <IconBreadcrumb />,\\n                            items: [\\n                                '\\u5165\\u9A7B\\u5BA1\\u6838',\\n                                {\\n                                    itemKey: 'operation-management',\\n                                    text: '\\u8FD0\\u8425\\u7BA1\\u7406',\\n                                    items: [\\n                                        '\\u4EBA\\u5458\\u7BA1\\u7406',\\n                                        '\\u4EBA\\u5458\\u53D8\\u66F4'\\n                                    ]\\n                                }\\n                            ]\\n                        },\\n                        {\\n                            text: '\\u4EFB\\u52A1\\u5E73\\u53F0',\\n                            icon: <IconSteps />,\\n                            itemKey: 'job',\\n                            items: ['\\u4EFB\\u52A1\\u7BA1\\u7406', '\\u7528\\u6237\\u4EFB\\u52A1\\u67E5\\u8BE2'],\\n                        },\\n                    ]}\\n                    onSelect={key => console.log(key)}\\n                    header={{\\n                        logo: <IconSemiLogo style={{ height: '36px', fontSize: 36 }} />,\\n                        text: 'Semi \\u8FD0\\u8425\\u540E\\u53F0'\\n                    }}\\n                    footer={\\n                        <Dropdown\\n                            position=\\\"bottomRight\\\"\\n                            render={\\n                                <Dropdown.Menu>\\n                                    <Dropdown.Item>\\u8BE6\\u60C5</Dropdown.Item>\\n                                    <Dropdown.Item>\\u9000\\u51FA</Dropdown.Item>\\n                                </Dropdown.Menu>\\n                            }\\n                        >\\n                            <Avatar size=\\\"small\\\" color='light-blue' style={{ margin: 4 }}>BD</Avatar>\\n                            <span>Bytedancer</span>\\n                        </Dropdown>\\n                    }\\n                />\\n            </div>\\n        );\\n    }\\n}\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"\\u6C34\\u5E73\\u52A0\\u5782\\u76F4\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4E00\\u822C\\u7684\\u5E73\\u53F0\\u8BBE\\u8BA1\\u4F1A\\u91C7\\u53D6\\u6C34\\u5E73\\u52A0\\u5782\\u76F4\\u5BFC\\u822A\\u7684\\u6A21\\u5F0F\\uFF0C\\u8FD9\\u91CC\\u6709\\u4E00\\u4E2A\\u6BD4\\u8F83\\u5E38\\u89C1\\u7684\\u4F8B\\u5B50\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Nav, Avatar, Dropdown, Select, Button, Layout, Breadcrumb, Skeleton } from '@douyinfe/semi-ui';\\nimport { IconStar, IconLanguage, IconSemiLogo, IconBytedanceLogo, IconBell, IconHelpCircle } from '@douyinfe/semi-icons';\\nimport { IconTreeSelect, IconForm, IconBreadcrumb, IconBanner, IconBadge, IconNotification, IconSteps, IconTree, IconTabs, IconNavigation } from '@douyinfe/semi-icons-lab';\\n\\n() => {\\n    const { Header, Footer, Sider, Content } = Layout;\\n\\n    const TopHeader = () => (\\n        <Header style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>\\n            <div>\\n                <Nav\\n                    mode={'horizontal'}\\n                    items={[\\n                        { itemKey: 'user', text: '\\u7528\\u6237\\u7BA1\\u7406', icon: <IconBadge /> },\\n                        { itemKey: 'union', text: '\\u6D3B\\u52A8\\u7BA1\\u7406', icon: <IconTreeSelect /> },\\n                        {\\n                            itemKey: 'approve-management',\\n                            text: '\\u5BA1\\u6279\\u7BA1\\u7406',\\n                            icon: <IconBreadcrumb />,\\n                            items: [\\n                                '\\u5165\\u9A7B\\u5BA1\\u6838',\\n                                {\\n                                    itemKey: 'operation-management',\\n                                    text: '\\u8FD0\\u8425\\u7BA1\\u7406',\\n                                    items: [\\n                                        '\\u4EBA\\u5458\\u7BA1\\u7406',\\n                                        '\\u4EBA\\u5458\\u53D8\\u66F4'\\n                                    ]\\n                                }\\n                            ]\\n                        },\\n                        {\\n                            text: '\\u4EFB\\u52A1\\u5E73\\u53F0',\\n                            icon: <IconSteps />,\\n                            itemKey: 'job',\\n                            items: ['\\u4EFB\\u52A1\\u7BA1\\u7406', '\\u7528\\u6237\\u4EFB\\u52A1\\u67E5\\u8BE2'],\\n                        },\\n                    ]}\\n                    onSelect={key => console.log(key)}\\n                    header={{\\n                        logo: <IconSemiLogo style={{ height: '36px', fontSize: 36 }} />,\\n                        text: 'Semi \\u8FD0\\u8425\\u540E\\u53F0'\\n                    }}\\n                    footer={\\n                        <Dropdown\\n                            position=\\\"bottomRight\\\"\\n                            render={\\n                                <Dropdown.Menu>\\n                                    <Dropdown.Item>\\u8BE6\\u60C5</Dropdown.Item>\\n                                    <Dropdown.Item>\\u9000\\u51FA</Dropdown.Item>\\n                                </Dropdown.Menu>\\n                            }\\n                        >\\n                            <Avatar size=\\\"small\\\" color='light-blue' style={{ margin: 4 }}>BD</Avatar>\\n                            <span>Bytedancer</span>\\n                        </Dropdown>\\n                    }\\n                />\\n            </div>\\n        </Header>\\n    );\\n\\n    const LeftNav = () => (\\n        <Nav\\n            style={{ maxWidth: 220, height: '100%' }}\\n            defaultSelectedKeys={['Home']}\\n            items={[\\n                {\\n                    itemKey: 'approve-management',\\n                    text: '\\u5BA1\\u6279\\u7BA1\\u7406',\\n                    icon: <IconBreadcrumb />,\\n                    items: [\\n                        '\\u5165\\u9A7B\\u5BA1\\u6838',\\n                        {\\n                            itemKey: 'operation-management',\\n                            text: '\\u8FD0\\u8425\\u7BA1\\u7406',\\n                            items: [\\n                                '\\u4EBA\\u5458\\u7BA1\\u7406',\\n                                '\\u4EBA\\u5458\\u53D8\\u66F4'\\n                            ]\\n                        }\\n                    ]\\n                },\\n                {\\n                    text: '\\u4EFB\\u52A1\\u5E73\\u53F0',\\n                    icon: <IconSteps />,\\n                    itemKey: 'job',\\n                    items: ['\\u4EFB\\u52A1\\u7BA1\\u7406', '\\u7528\\u6237\\u4EFB\\u52A1\\u67E5\\u8BE2'],\\n                },\\n                { itemKey: 'user', text: '\\u7528\\u6237\\u7BA1\\u7406', icon: <IconBadge /> },\\n                { itemKey: 'union', text: '\\u6D3B\\u52A8\\u7BA1\\u7406', icon: <IconTreeSelect /> },\\n            ]}\\n            footer={{\\n                collapseButton: true,\\n            }}\\n        />\\n    );\\n\\n    const FooterContent = () => (\\n        <>\\n            <span\\n                style={{\\n                    display: 'flex',\\n                    alignItems: 'center',\\n                }}\\n            >\\n                <IconBytedanceLogo size=\\\"large\\\" style={{ marginRight: '8px' }} />\\n                <span>Copyright \\xA9 {new Date().getFullYear()} ByteDance. All Rights Reserved. </span>\\n            </span>\\n            <span>\\n                <span style={{ marginRight: '24px' }}>\\u5E73\\u53F0\\u5BA2\\u670D</span>\\n                <span>\\u53CD\\u9988\\u5EFA\\u8BAE</span>\\n            </span>\\n        </>\\n    );\\n    return (\\n        <Layout style={{ border: '1px solid var(--semi-color-border)' }}>\\n            <TopHeader />\\n            <Layout>\\n                <Sider style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>\\n                    <LeftNav />\\n                </Sider>\\n                <Content\\n                    style={{\\n                        padding: '24px',\\n                        backgroundColor: 'var(--semi-color-bg-0)',\\n                    }}\\n                >\\n                    <Breadcrumb\\n                        style={{\\n                            marginBottom: '24px',\\n                        }}\\n                        routes={['\\u9996\\u9875', '\\u5F53\\u8FD9\\u4E2A\\u9875\\u9762\\u6807\\u9898\\u5F88\\u957F\\u65F6\\u9700\\u8981\\u7701\\u7565', '\\u4E0A\\u4E00\\u9875', '\\u8BE6\\u60C5\\u9875']}\\n                    />\\n                    <div\\n                        style={{\\n                            borderRadius: '10px',\\n                            border: '1px solid var(--semi-color-border)',\\n                            height: '376px',\\n                            padding: '32px',\\n                        }}\\n                    >\\n                        <Skeleton placeholder={<Skeleton.Paragraph rows={2} />} loading={true}>\\n                            <p>Hi, Bytedance dance dance.</p>\\n                            <p>Hi, Bytedance dance dance.</p>\\n                        </Skeleton>\\n                    </div>\\n                </Content>\\n            </Layout>\\n            <Footer\\n                style={{\\n                    display: 'flex',\\n                    justifyContent: 'space-between',\\n                    padding: '20px',\\n                    color: 'var(--semi-color-text-2)',\\n                    backgroundColor: 'rgba(var(--semi-grey-0), 1)',\\n                }}\\n            >\\n                <FooterContent />\\n            </Footer>\\n        </Layout>\\n    );\\n};\\n\\n\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5C55\\u5F00\\u6536\\u8D77\\u7BAD\\u5934\\u4F4D\\u7F6E\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"toggleIconPosition\"), \" \\u6539\\u53D8 NavSub \\u5C55\\u5F00\\u6536\\u8D77\\u7BAD\\u5934\\u7684\\u4F4D\\u7F6E\\uFF0C\\u9ED8\\u8BA4\\u4E3A 'right' \\u53F3\\u4FA7\\u5C55\\u793A\\uFF0C\\u53EF\\u6539\\u4E3A 'left'\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=78%\",\n    \"live\": \"true\",\n    \"width\": \"78%\"\n  }, \"import React from 'react';\\nimport { Nav } from '@douyinfe/semi-ui';\\nimport { IconUser, IconStar, IconSetting, IconSemiLogo } from '@douyinfe/semi-icons';\\nimport { IconForm, IconBadge, IconBanner, IconAvatar, IconTree, IconTabs } from '@douyinfe/semi-icons-lab';\\n\\nclass NavApp extends React.Component {\\n    render() {\\n        return (\\n            <Nav\\n                toggleIconPosition={'left'}\\n                defaultOpenKeys={['job']}\\n                bodyStyle={{ height: 300 }}\\n                items={[\\n                    { itemKey: 'user', text: '\\u7528\\u6237\\u7BA1\\u7406', icon: <IconBadge /> },\\n                    { itemKey: 'union', text: '\\u6D3B\\u52A8\\u7BA1\\u7406', icon: <IconBanner /> },\\n                    {\\n                        text: '\\u4EFB\\u52A1\\u5E73\\u53F0',\\n                        icon: <IconForm />,\\n                        itemKey: 'job',\\n                        items: ['\\u4EFB\\u52A1\\u7BA1\\u7406', '\\u7528\\u6237\\u4EFB\\u52A1\\u67E5\\u8BE2'],\\n                    },\\n                ]}\\n                onSelect={key => console.log(key)}\\n                header={{\\n                    logo: <IconSemiLogo style={{ height: '36px', fontSize: 36 }} />,\\n                    text: 'Semi \\u8FD0\\u8425\\u540E\\u53F0'\\n                }}\\n                footer={{\\n                    collapseButton: true,\\n                }}\\n            />\\n        );\\n    }\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5BFC\\u822A\\u7F29\\u8FDB\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u9ED8\\u8BA4\\u5BFC\\u822A\\u7F29\\u8FDB\\u76EE\\u524D\\u4EC5\\u5BF9\\u7B2C\\u4E00\\u7EA7\\u5BFC\\u822A\\u6709\\u6548\\u679C\\u3002\\n\\u5982\\u679C\\u4F60\\u5E0C\\u671B\\u5BF9\\u591A\\u7EA7\\u5BFC\\u822A\\uFF0C\\u6309\\u5C42\\u7EA7\\u7F29\\u8FDB\\uFF0C\\u8BF7\\u5148\\u5C06 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"limitIndent\"), \" \\u8BBE\\u7F6E\\u4E3A false (\\u53EA\\u5728\\u7AD6\\u76F4\\u65B9\\u5411\\u751F\\u6548)\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5F53\\u4EE5 Jsx \\u65B9\\u5F0F\\u7528 Nav.Item \\u4F20\\u5165\\u5BFC\\u822A\\u9879\\u65F6\\uFF0C\\u8BF7\\u624B\\u52A8\\u7ED9 Nav.Item \\u4F20\\u5165 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"level\"), \" props\\u3002\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4EE5 items \\u65B9\\u5F0F\\u4F20\\u5165\\u5BFC\\u822A\\u9879\\u65F6\\uFF0C\\u65E0\\u9700\\u5173\\u5FC3 level\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=78%\",\n    \"live\": \"true\",\n    \"width\": \"78%\"\n  }, \"import React from 'react';\\nimport { Nav } from '@douyinfe/semi-ui';\\nimport { IconUser, IconStar, IconSetting, IconSemiLogo } from '@douyinfe/semi-icons';\\nimport { IconForm, IconBadge, IconBanner, IconAvatar, IconTree, IconTabs } from '@douyinfe/semi-icons-lab';\\n\\nclass NavApp extends React.Component {\\n    render() {\\n        return (\\n            <Nav\\n                limitIndent={false}\\n                defaultOpenKeys={['job', 'mission1']}\\n                bodyStyle={{ height: 300 }}\\n                items={[\\n                    { itemKey: 'user', text: '\\u7528\\u6237\\u7BA1\\u7406', icon: <IconBadge /> },\\n                    {\\n                        text: '\\u4EFB\\u52A1\\u5E73\\u53F0',\\n                        icon: <IconBanner />,\\n                        itemKey: 'job',\\n                        items: ['\\u4EFB\\u52A1\\u7BA1\\u7406', {\\n                            text: '\\u4EFB\\u52A11',\\n                            icon: <IconForm />,\\n                            itemKey: 'mission1',\\n                            items: ['\\u4EFB\\u52A12',\\n                                {\\n                                    text: '\\u4EFB\\u52A13\\u62C6\\u89E3',\\n                                    icon: <IconTabs />,\\n                                    itemKey: 'mission3',\\n                                    items: ['\\u5B50\\u4EFB\\u52A11', '\\u5B50\\u4EFB\\u52A12'],\\n                                }\\n                            ],\\n                        }],\\n                    },\\n                ]}\\n                onSelect={key => console.log(key)}\\n                header={{\\n                    logo: <IconSemiLogo style={{ height: '36px', fontSize: 36 }} />,\\n                    text: 'Semi \\u8FD0\\u8425\\u540E\\u53F0'\\n                }}\\n                footer={{\\n                    collapseButton: true,\\n                }}\\n            />\\n        );\\n    }\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u975E\\u53D7\\u63A7\\u5C5E\\u6027\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5305\\u62EC\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"defaultSelectedKeys\"), \"\\uFF08\\u9ED8\\u8BA4\\u88AB\\u9009\\u4E2D\\u7684\\u5BFC\\u822A\\u9879 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"key\"), \" \\u6570\\u7EC4\\uFF09\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"defaultOpenKeys\"), \"\\uFF08\\u9ED8\\u8BA4\\u5C55\\u5F00\\u7684\\u5BFC\\u822A\\u9879 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"key\"), \" \\u6570\\u7EC4\\uFF0C\\u4EC5 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"mode = \\\"vertical\\\"\"), \" \\u4E14 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"isCollapsed\"), \" | \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"defaultIsCollapsed = false\"), \" \\u7684\\u60C5\\u51B5\\u4E0B\\u6709\\u6548\\uFF09\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"defaultIsCollapsed\"), \"\\uFF08\\u4FA7\\u8FB9\\u680F\\u9ED8\\u8BA4\\u662F\\u5426\\u6536\\u8D77\\uFF0C\\u4EC5 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"mode = \\\"vertical\\\"\"), \" \\u65F6\\u6709\\u6548\\uFF09\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=78%\",\n    \"live\": \"true\",\n    \"width\": \"78%\"\n  }, \"import React from 'react';\\nimport { Nav } from '@douyinfe/semi-ui';\\nimport { IconSemiLogo } from '@douyinfe/semi-icons';\\nimport { IconForm, IconBadge, IconBanner, IconAvatar, IconTree, IconTabs } from '@douyinfe/semi-icons-lab';\\n\\nclass NavApp extends React.Component {\\n    render() {\\n        return (\\n            <Nav\\n                defaultOpenKeys={['job']}\\n                defaultSelectedKeys={['\\u4FE1\\u606F\\u5F55\\u5165']}\\n                defaultIsCollapsed={true}\\n                bodyStyle={{ height: 300 }}\\n                items={[\\n                    { itemKey: 'user', text: '\\u7528\\u6237\\u7BA1\\u7406', icon: <IconBadge /> },\\n                    { itemKey: 'union', text: '\\u6D3B\\u52A8\\u7BA1\\u7406', icon: <IconBanner /> },\\n                    {\\n                        itemKey: 'union-management',\\n                        text: '\\u4EFB\\u52A1\\u7BA1\\u7406',\\n                        icon: <IconForm />,\\n                        items: ['\\u516C\\u544A\\u8BBE\\u7F6E', '\\u4EFB\\u52A1\\u67E5\\u8BE2', '\\u4FE1\\u606F\\u5F55\\u5165']\\n                    },\\n                    {\\n                        text: '\\u4EFB\\u52A1\\u5E73\\u53F0',\\n                        icon: <IconTree />,\\n                        itemKey: 'job',\\n                        items: ['\\u4EFB\\u52A1\\u7BA1\\u7406', '\\u7528\\u6237\\u4EFB\\u52A1\\u67E5\\u8BE2'],\\n                    },\\n                ]}\\n                header={{\\n                    logo: <IconSemiLogo style={{ height: '36px', fontSize: 36 }} />,\\n                    text: 'Semi \\u8FD0\\u8425\\u540E\\u53F0'\\n                }}\\n                footer={{\\n                    collapseButton: true\\n                }}\\n            />\\n        );\\n    }\\n}\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u53D7\\u63A7\\u5C5E\\u6027\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Navigation \\u7EC4\\u4EF6\\u63D0\\u4F9B\\u4E86\\u51E0\\u4E2A\\u53D7\\u63A7\\u5C5E\\u6027\\uFF0C\\u914D\\u5408\\u5404\\u79CD\\u56DE\\u8C03\\uFF0C\\u53EF\\u4EE5\\u5F88\\u8F7B\\u677E\\u5730\\u63A7\\u5236\\u5BFC\\u822A\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u76EE\\u524D\\u53D7\\u63A7\\u7684\\u5C5E\\u6027\\u4E3A\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"isCollapsed\"), \"\\uFF08\\u4FA7\\u8FB9\\u680F\\u662F\\u5426\\u6536\\u8D77\\uFF0C\\u4EC5 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"mode =\\\" vertical\\\"\"), \" \\u65F6\\u751F\\u6548\\uFF09\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"selectedKeys\"), \"\\uFF08\\u5F53\\u524D\\u9009\\u4E2D\\u7684\\u5BFC\\u822A\\u9879 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"key\"), \" \\u6570\\u7EC4\\uFF09\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"openKeys\"), \" \\uFF08\\u5F53\\u524D\\u5C55\\u5F00\\u7684\\u5BFC\\u822A\\u9879\\u6570\\u7EC4\\uFF0C\\u4EC5 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"mode = \\\"vertical\\\"\"), \" \\u4E14 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"isCollapsed = false\"), \" \\u6709\\u6548\\uFF09\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5BF9\\u5E94\\u7684\\u56DE\\u8C03\\u4E3A\\uFF1A\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onCollapseChange(isCollapsed: boolean): void\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onSelect({ itemKey: string, selectedKeys: string[], domEvent: MouseEvent, isOpen: boolean }): void\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onOpenChange({ itemKey: string, openKeys: string[], domEvent: MouseEvent, isOpen: boolean }): void\"))), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=78%\",\n    \"live\": \"true\",\n    \"width\": \"78%\"\n  }, \"import React, { useMemo, useState } from 'react';\\nimport { Nav } from '@douyinfe/semi-ui';\\nimport { IconSemiLogo } from '@douyinfe/semi-icons';\\nimport { IconForm, IconBadge, IconBanner, IconAvatar, IconTree, IconTabs } from '@douyinfe/semi-icons-lab';\\n\\nfunction NavApp (props = {}) {\\n    const [openKeys, setOpenKeys] = useState(['union-management', 'job']);\\n    const [selectedKeys, setSelectedKeys] = useState(['\\u516C\\u544A\\u8BBE\\u7F6E']);\\n    const [isCollapsed, setIsCollapsed] = useState(true);\\n\\n    const onSelect = data => {\\n        console.log('trigger onSelect: ', data);\\n        setSelectedKeys([...data.selectedKeys]);\\n    };\\n    const onOpenChange = data => {\\n        console.log('trigger onOpenChange: ', data);\\n        setOpenKeys([...data.openKeys]);\\n    };\\n\\n    const onCollapseChange = isCollapsed => {\\n        setIsCollapsed(isCollapsed);\\n    };\\n\\n    const items = useMemo(() => [\\n        { itemKey: 'user', text: '\\u7528\\u6237\\u7BA1\\u7406', icon: <IconBadge /> },\\n        { itemKey: 'union', text: '\\u6D3B\\u52A8\\u7BA1\\u7406', icon: <IconBanner /> },\\n        {\\n            itemKey: 'union-management',\\n            text: '\\u4EFB\\u52A1\\u7BA1\\u7406',\\n            icon: <IconForm />,\\n            items: ['\\u516C\\u544A\\u8BBE\\u7F6E', '\\u4EFB\\u52A1\\u67E5\\u8BE2', '\\u4FE1\\u606F\\u5F55\\u5165']\\n        },\\n        {\\n            text: '\\u4EFB\\u52A1\\u5E73\\u53F0',\\n            icon: <IconTree />,\\n            itemKey: 'job',\\n            items: ['\\u4EFB\\u52A1\\u7BA1\\u7406', '\\u7528\\u6237\\u4EFB\\u52A1\\u67E5\\u8BE2'],\\n        },\\n    ], []);\\n\\n    return (\\n        <Nav\\n            isCollapsed={isCollapsed}\\n            openKeys={openKeys}\\n            selectedKeys={selectedKeys}\\n            bodyStyle={{ height: 300 }}\\n            items={items}\\n            header={{\\n                logo: <IconSemiLogo style={{ height: '36px', fontSize: 36 }} />,\\n                text: 'Semi \\u8FD0\\u8425\\u540E\\u53F0'\\n            }}\\n            footer={{\\n                collapseButton: true\\n            }}\\n            onCollapseChange={onCollapseChange}\\n            onOpenChange={onOpenChange}\\n            onSelect={onSelect}\\n        />\\n    );\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Nav\"), 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  }, \"\\u63CF\\u8FF0\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"bodyStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BFC\\u822A\\u9879\\u5217\\u8868\\u7684\\u81EA\\u5B9A\\u4E49\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), 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  }, \"\\u6700\\u5916\\u5C42\\u5143\\u7D20\\u7684\\u6837\\u5F0F\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultIsCollapsed\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u662F\\u5426\\u5904\\u4E8E\\u6536\\u8D77\\u72B6\\u6001\\uFF0C\\u4EC5 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"mode = \\\"vertical\\\"\"), \" \\u65F6\\u6709\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultOpenKeys\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u521D\\u59CB\\u6253\\u5F00\\u7684\\u5B50\\u5BFC\\u822A \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"itemKey\"), \" \\u6570\\u7EC4\\uFF0C\\u4EC5 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"mode = \\\"vertical\\\"\"), \" \\u4E14\\u4FA7\\u8FB9\\u680F\\u5904\\u4E8E\\u5C55\\u5F00\\u72B6\\u6001\\u65F6\\u6709\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"[]\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultSelectedKeys\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u521D\\u59CB\\u9009\\u4E2D\\u7684\\u5BFC\\u822A\\u9879 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"itemKey\"), \" \\u6570\\u7EC4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"[]\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"subDropdownProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7528\\u4E8E\\u63A7\\u5236 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"horizontal\"), \" \\u6216\\u8005 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"vertical && isCollapsed\"), \" \\u4E0B nav.sub \\u4E2D\\u7684 dropdown \\u53C2\\u6570(v >= 2.69)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"DropdownProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"expandIcon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u4E0B\\u62C9\\u7BAD\\u5934Icon, v>=2.36\"), 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  }, \"footer\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5E95\\u90E8\\u533A\\u57DF\\u914D\\u7F6E\\u5BF9\\u8C61\\u6216\\u5143\\u7D20\\uFF0C\\u8BE6\\u89C1 \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#Nav.Footer\"\n  }, \"Nav.Footer\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\", \"|\", \"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  }, \"getPopupContainer\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5782\\u76F4 Nav \\u6298\\u53E0\\u6216 \\u6C34\\u5E73 Nav\\u4E2D Dropdown \\u7684 getPopupContainer \\u914D\\u7F6E\\uFF0C\\u53EF\\u6307\\u5B9A\\u5F39\\u51FA\\u5C42\\u5BB9\\u5668 \\u8FD9\\u4F1A\\u6539\\u53D8\\u6D6E\\u5C42 DOM \\u6811\\u4F4D\\u7F6E\\uFF0C\\u4F46\\u4E0D\\u4F1A\\u6539\\u53D8\\u89C6\\u56FE\\u6E32\\u67D3\\u4F4D\\u7F6E\\u3002 v>=2.24.0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Function\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"header\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5934\\u90E8\\u533A\\u57DF\\u914D\\u7F6E\\u5BF9\\u8C61\\u6216\\u5143\\u7D20\\uFF0C\\u8BE6\\u89C1 \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#Nav.Header\"\n  }, \"Nav.Header\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\", \"|\", \"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  }, \"isCollapsed\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5904\\u4E8E\\u6536\\u8D77\\u72B6\\u6001\\u7684\\u53D7\\u63A7\\u5C5E\\u6027\\uFF0C\\u4EC5 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"mode = \\\"vertical\\\"\"), \" \\u65F6\\u6709\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"items\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BFC\\u822A\\u9879\\u76EE\\u5217\\u8868\\uFF0C\\u6BCF\\u4E00\\u9879\\u53EF\\u4EE5\\u7EE7\\u7EED\\u5E26\\u6709 items \\u5C5E\\u6027\\u3002\\u5982\\u679C\\u4E3A string \\u6570\\u7EC4\\uFF0C\\u5219\\u4F1A\\u53D6\\u6BCF\\u4E00\\u9879\\u4F5C\\u4E3A text \\u548C itemKey\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\", \"|\", \" string[]\", \"|\", \" \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#Nav.Item\"\n  }, \"Item\"), \"[] \", \"|\", \" \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"#Nav.Sub\"\n  }, \"Sub\"), \"[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"limitIndent\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u89E3\\u9664\\u7F29\\u8FDB\\u9650\\u5236\\uFF0C\\u53EF\\u4F7F\\u7528 level \\u81EA\\u5B9A\\u4E49\\u5BFC\\u822A\\u9879\\u7F29\\u8FDB\\uFF0C\\u6C34\\u5E73\\u6A21\\u5F0F\\u53EA\\u80FD\\u4E3Atrue\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"mode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BFC\\u822A\\u7C7B\\u578B\\uFF0C\\u76EE\\u524D\\u652F\\u6301\\u6A2A\\u5411\\u4E0E\\u7AD6\\u76F4\\uFF0C\\u53EF\\u9009\\u503C\\uFF1A\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"vertical\"), \"\\u6216\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"horizontal\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"vertical\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"openKeys\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53D7\\u63A7\\u7684\\u6253\\u5F00\\u7684\\u5B50\\u5BFC\\u822A \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"itemKey\"), \" \\u6570\\u7EC4\\uFF0C\\u914D\\u5408 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"onOpenChange\"), \" \\u56DE\\u8C03\\u63A7\\u5236\\u5B50\\u5BFC\\u822A\\u9879\\u5C55\\u5F00\\uFF0C\\u4EC5 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"mode = \\\"vertical\\\"\"), \" \\u4E14\\u4FA7\\u8FB9\\u680F\\u5904\\u4E8E\\u5C55\\u5F00\\u72B6\\u6001\\u65F6\\u6709\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"prefixCls\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u540D\\u524D\\u7F00\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"semi\"))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderWrapper\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5BFC\\u822A\\u9879\\u5916\\u5C42\\u7EC4\\u4EF6\\uFF0Cv>=2.24.0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(ApiType, {\n    detail: \"(data:{ itemElement:ReactElement, isSubNav:boolean, isInSubNav:boolean, props:SubNavProps\\\\| ItemProps }) => ReactNode\",\n    mdxType: \"ApiType\"\n  }, \"(data) => 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  }, \"selectedKeys\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53D7\\u63A7\\u7684\\u5BFC\\u822A\\u9879 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"itemKey\"), \" \\u6570\\u7EC4\\uFF0C\\u914D\\u5408 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"onSelect\"), \" \\u56DE\\u8C03\\u63A7\\u5236\\u5BFC\\u822A\\u9879\\u9009\\u62E9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), 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  }, \"\\u6700\\u5916\\u5C42\\u5143\\u7D20\\u7684\\u81EA\\u5B9A\\u4E49\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"subNavCloseDelay\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5B50\\u5BFC\\u822A\\u6D6E\\u5C42\\u5173\\u95ED\\u7684\\u5EF6\\u8FDF\\u3002collapse \\u4E3A true \\u6216 mode \\u4E3A \\\"horizontal\\\" \\u65F6\\u6709\\u6548\\uFF0C\\u5355\\u4F4D\\u4E3A ms\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"100\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"subNavMotion\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5B50\\u5BFC\\u822A\\u6298\\u53E0\\u52A8\\u753B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"subNavOpenDelay\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5B50\\u5BFC\\u822A\\u6D6E\\u5C42\\u663E\\u793A\\u7684\\u5EF6\\u8FDF\\u3002collapse \\u4E3A true \\u6216 mode \\u4E3A \\\"horizontal\\\" \\u65F6\\u6709\\u6548\\uFF0C\\u5355\\u4F4D\\u4E3A ms\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"toggleIconPosition\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5E26\\u6709\\u5B50\\u5BFC\\u822A\\u9879\\u7684\\u7684\\u7236\\u7EA7\\u5BFC\\u822A\\u9879\\u7BAD\\u5934\\u4F4D\\u7F6E\\uFF0C\\u53EF\\u9009 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"left\"), \"\\u6216 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"right\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'right'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"tooltipHideDelay\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"tooltip \\u9690\\u85CF\\u7684\\u5EF6\\u8FDF\\uFF0Ccollapse \\u4E3A true \\u65F6\\u6709\\u6548\\uFF0C\\u5355\\u4F4D\\u4E3A ms\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"100\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"tooltipShowDelay\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"tooltip \\u663E\\u793A\\u7684\\u5EF6\\u8FDF\\uFF0Ccollapse \\u4E3A true \\u65F6\\u6709\\u6548\\uFF0C\\u5355\\u4F4D\\u4E3A ms\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0\")), 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  }, \"\\u70B9\\u51FB\\u4EFB\\u610F\\u5BFC\\u822A\\u9879\\u65F6\\u89E6\\u53D1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(ApiType, {\n    detail: \"({ itemKey: string, domEvent: MouseEvent, isOpen: boolean }) => void\",\n    mdxType: \"ApiType\"\n  }, \"(itemKey, event, isOpen) => void\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => {}\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onCollapseChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6536\\u8D77\\u72B6\\u6001\\u53D8\\u5316\\u65F6\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(ApiType, {\n    detail: \"(isCollapsed: boolean) => void\",\n    mdxType: \"ApiType\"\n  }, \"(isCollapsed)=> void \")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => {}\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onOpenChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5207\\u6362\\u67D0\\u4E2A\\u5B50\\u5BFC\\u822A\\u9879\\u76EE\\u663E\\u9690\\u72B6\\u6001\\u65F6\\u89E6\\u53D1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(ApiType, {\n    detail: \"({ itemKey: string, openKeys: string[], domEvent: MouseEvent, isOpen: boolean }) => void\",\n    mdxType: \"ApiType\"\n  }, \" ({itemKey, openKeys, event, isOpen})=>{}\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => {}\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onSelect\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7B2C\\u4E00\\u6B21\\u9009\\u4E2D\\u67D0\\u4E2A\\u53EF\\u9009\\u4E2D\\u5BFC\\u822A\\u9879\\u76EE\\u65F6\\u89E6\\u53D1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(ApiType, {\n    detail: \"({ itemKey: string, selectedKeys: string[], selectedItems: Item[], domEvent: MouseEvent, isOpen: boolean }) => void\",\n    mdxType: \"ApiType\"\n  }, \"(onSelectProps)=>{}\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => {}\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Nav.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  }, \"\\u63CF\\u8FF0\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u7981\\u7528\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), 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  }, \"\\u5BFC\\u822A\\u9879\\u76EE\\u56FE\\u6807\"), 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  }, \"indent\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5982\\u679C icon \\u4E3A\\u7A7A\\uFF0C\\u662F\\u5426\\u4FDD\\u7559\\u5176\\u5360\\u4F4D\\uFF0C\\u4EC5\\u5BF9\\u4E00\\u7EA7\\u5BFC\\u822A\\u751F\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"itemKey\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BFC\\u822A\\u9879\\u76EE\\u552F\\u4E00 key\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"level\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u524D\\u9879\\u6240\\u5728\\u5D4C\\u5957\\u5C42\\u7EA7\\uFF0ClimitIndent \\u4E3A true\\u65F6\\uFF0C\\u7528\\u4E8E\\u81EA\\u5B9A\\u4E49\\u7F29\\u8FDB\\u4F4D\\u7F6E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"link\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BFC\\u822A\\u9879 href \\u94FE\\u63A5\\uFF0C\\u4F20\\u5165\\u65F6\\u5BFC\\u822A\\u9879\\u6574\\u4F53\\u4F1A\\u5305\\u88F9\\u4E00\\u4E2A a \\u6807\\u7B7E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"linkOptions\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u900F\\u4F20\\u7ED9 a \\u6807\\u7B7E\\u7684\\u53C2\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BFC\\u822A\\u9879\\u76EE\\u6587\\u6848\\u6216\\u5143\\u7D20\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \"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  }, \"onClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB\\u4EFB\\u610F\\u5BFC\\u822A\\u9879\\u65F6\\u89E6\\u53D1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(ApiType, {\n    detail: \"({ itemKey: string, domEvent: MouseEvent, isOpen: boolean }) => void\",\n    mdxType: \"ApiType\"\n  }, \"({itemKey, domEvent, isOpen}) => void\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => {}\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onMouseEnter\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"mouse enter \\u65F6\\u89E6\\u53D1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(e) => {}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => {}\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onMouseLeave\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"mouse leave \\u65F6\\u89E6\\u53D1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(e) => {}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => {}\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Nav.Sub\"), 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  }, \"\\u63CF\\u8FF0\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u7981\\u7528\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"dropdownProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F39\\u51FA\\u5C42 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"dropdown\"), \" \\u53C2\\u6570\\u914D\\u7F6E (v >= 2.69)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"DropdownProps\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"dropdownStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F39\\u51FA\\u5C42\\u7684 style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), 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  }, \"\\u5BFC\\u822A\\u9879\\u76EE\\u56FE\\u6807\"), 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  }, \"indent\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5982\\u679C icon \\u4E3A\\u7A7A\\uFF0C\\u662F\\u5426\\u4FDD\\u7559\\u5176\\u5360\\u4F4D\\uFF0C\\u4EC5\\u5BF9\\u4E00\\u7EA7\\u5BFC\\u822A\\u751F\\u6548\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"isCollapsed\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5904\\u4E8E\\u6536\\u8D77\\u72B6\\u6001\\u7684\\u53D7\\u63A7\\u5C5E\\u6027\\uFF0C\\u4EC5 \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"mode = \\\"vertical\\\"\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"isOpen\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u6253\\u5F00\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"itemKey\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BFC\\u822A\\u9879\\u76EE\\u552F\\u4E00 key\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"level\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u524D\\u9879\\u6240\\u5728\\u5D4C\\u5957\\u5C42\\u7EA7\\uFF0ClimitIndent \\u4E3A true\\u65F6\\uFF0C\\u7528\\u4E8E\\u81EA\\u5B9A\\u4E49\\u7F29\\u8FDB\\u4F4D\\u7F6E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"maxHeight\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6700\\u5927\\u9AD8\\u5EA6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"999\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BFC\\u822A\\u9879\\u76EE\\u6587\\u6848\\u6216\\u7EC4\\u4EF6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \"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  }, \"onMouseEnter\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"mouse enter \\u65F6\\u89E6\\u53D1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(e) => {}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => {}\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onMouseLeave\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"mouse leave \\u65F6\\u89E6\\u53D1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(e) => {}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => {}\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Nav.Header\"), 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  }, \"\\u63CF\\u8FF0\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"children\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5B50\\u5143\\u7D20\"), 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  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6700\\u5916\\u5C42\\u6837\\u5F0F\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"link\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BFC\\u822A\\u9879 href \\u94FE\\u63A5\\uFF0C\\u4F20\\u5165\\u65F6\\u5BFC\\u822A\\u9879\\u6574\\u4F53\\u4F1A\\u5305\\u88F9\\u4E00\\u4E2A a \\u6807\\u7B7E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"linkOptions\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u900F\\u4F20\\u7ED9 a \\u6807\\u7B7E\\u7684\\u53C2\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"logo\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Logo\"), 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  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6700\\u5916\\u5C42\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"text\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Logo \\u6587\\u6848\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Nav.Footer\"), 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  }, \"\\u63CF\\u8FF0\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"children\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5B50\\u5143\\u7D20\"), 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  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6700\\u5916\\u5C42\\u6837\\u5F0F\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"collapseButton\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5C55\\u793A\\u5E95\\u90E8\\u201C\\u6536\\u8D77\\u4FA7\\u8FB9\\u680F\\u201D\\u6309\\u94AE\\uFF0Cmode=\\\"vertical\\\" \\u4E14 Footer \\u7EC4\\u4EF6\\u7684 children \\u53C2\\u6570\\u4E3A\\u7A7A\\u624D\\u6709\\u6548\\u679C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\", \"|\", \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"collapseText\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u201C\\u6536\\u8D77\\u201D\\u6309\\u94AE\\u7684\\u6587\\u6848\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(collapsed:boolean) => 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  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6700\\u5916\\u5C42\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), 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  }, \"\\u70B9\\u51FB\\u4E8B\\u4EF6\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(event) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Accessibility\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"h3\", {\n    parentName: \"li\"\n  }, \"\\u952E\\u76D8\\u548C\\u7126\\u70B9\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Navigation \\u5185\\u7684\\u6BCF\\u4E2A\\u53EF\\u70B9\\u51FB item \\u90FD\\u53EF\\u4EE5\\u88AB\\u805A\\u7126\\uFF0C\\u76F8\\u4E92\\u4E4B\\u95F4\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Tab\"), \" \\u53CA \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Shift  + Tab\"), \" \\u5207\\u6362\\u7126\\u70B9\\uFF0C\\u5E76\\u4E14\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Enter\"), \" \\u952E\\u6FC0\\u6D3B\\u6BCF\\u4E2A\\u94FE\\u63A5\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5F53\\u67D0\\u4E2A item \\u53EF\\u88AB\\u6253\\u5F00\\u5F39\\u5C42\\u65F6\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6253\\u5F00\\u5F39\\u5C42\\u65B9\\u5F0F\\u4E3A hover \\uFF1A\\u8BE5 item \\u88AB\\u805A\\u7126\\u65F6\\uFF0C\\u5F39\\u5C42\\u6253\\u5F00\\u3002\\u952E\\u76D8\\u7528\\u6237\\u53EF\\u4EE5\\u901A\\u8FC7\\u4E0B\\u7BAD\\u5934\\u5C06\\u7126\\u70B9\\u79FB\\u52A8\\u5230\\u5F39\\u5C42\\u4E0A\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Esc\"), \" \\u952E\\u53EF\\u4EE5\\u5C06\\u7126\\u70B9\\u8FD4\\u56DE\\u5230 item \\u4E0A\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6253\\u5F00\\u5F39\\u5C42\\u7684\\u65B9\\u5F0F\\u4E3A click \\uFF1A\\u8BE5 item \\u88AB\\u805A\\u7126\\u65F6\\uFF0C\\u70B9\\u51FB Enter \\u952E\\uFF0C\\u6253\\u5F00\\u5F39\\u5C42\\u3002\\u952E\\u76D8\\u7528\\u6237\\u53EF\\u4EE5\\u901A\\u8FC7\\u4E0B\\u7BAD\\u5934\\u5C06\\u7126\\u70B9\\u79FB\\u52A8\\u5230\\u5F39\\u5C42\\u4E0A\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Esc\"), \" \\u952E\\u53EF\\u4EE5\\u5C06\\u7126\\u70B9\\u8FD4\\u56DE\\u5230 item \\u4E0A\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u952E\\u76D8\\u4EA4\\u4E92\\u6682\\u672A\\u5B8C\\u6574\\u652F\\u6301\\u5D4C\\u5957\\u573A\\u666F\"))))), 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  }, \"\\u5BFC\\u822A\\u680F\\u83DC\\u5355\\u4F7F\\u7528\\u53E5\\u5B50\\u5927\\u5C0F\\u5199\\u683C\\u5F0F\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5C3D\\u91CF\\u7CBE\\u7B80\")), 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  }, \"\\u2705 \\u63A8\\u8350\\u7528\\u6CD5\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u274C \\u4E0D\\u63A8\\u8350\\u7528\\u6CD5\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Appeal center\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Appeal Center\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u76F8\\u5173\\u7269\\u6599\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"semi-material-list\", {\n    code: \"2, 312\"\n  }))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"FAQ\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u5BFC\\u822A\\u52A8\\u753B\\u4E22\\u5931\\uFF1F\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u5728\\u4F7F\\u7528\\u51FD\\u6570\\u5F0F\\u7EC4\\u4EF6\\u65F6\\uFF0C\\u5E94\\u8BE5\\u7528 useState \\u6216\\u8005 useMemo \\u5305\\u88F9\\u4E00\\u4E0B items\\uFF0C\\u539F\\u56E0\\u662F items \\u76F4\\u63A5\\u4F20\\u4E00\\u4E2A\\u6570\\u7EC4\\u4F1A\\u89E6\\u53D1\\u7EC4\\u4EF6\\u91CD\\u65B0\\u6E32\\u67D3\\u3002\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u5F53\\u5B50\\u83DC\\u5355\\u9AD8\\u5EA6\\u8D85\\u8FC7999px\\uFF0C\\u90E8\\u5206\\u5BFC\\u822A\\u6D88\\u5931\\uFF1F\"), \"\\n\\u8BF7\\u67E5\\u770B \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/DouyinFE/semi-design/issues/563\"\n  }, \"\\u6B64 issue\"))))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/navigation/navigation","next":{"fields":{"slug":"en-US/navigation/pagination"},"id":"0a3561f2-9d50-53ea-883f-5faf8cf6441e","frontmatter":{"title":"Pagination","localeCode":"en-US","icon":"doc-pagination","showNew":null}},"previous":{"fields":{"slug":"en-US/navigation/navigation"},"id":"55e70fab-9205-5760-ad9e-c2cf385c203f","frontmatter":{"title":"Navigation","localeCode":"en-US","icon":"doc-navigation","showNew":null}}}},"staticQueryHashes":["1348983216937344","1477422646937344","3245198693937344","417590761937344","63159454937344"]}