{
    "componentChunkName": "component---packages-gatsby-theme-docs-src-templates-page-content-js",
    "path": "/writing/navigation",
    "result": {"data":{"contentPage":{"title":"Navigation","globalNotification":null,"websitePrimaryColor":"#808080","beta":false,"isGlobalBeta":false,"excludeFromSearchIndex":true,"allowWideContentLayout":false,"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Navigation\"\n};\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};\n\nvar Warning = makeShortcode(\"Warning\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", {\n    \"id\": \"section-top-navigation\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"top-navigation\"\n  }, \"Top navigation\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The top navigation entries can be modified in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"packages/gatsby-theme-docs/src/data/top-menu.yaml\"), \".\")), mdx(\"section\", {\n    \"id\": \"section-side-navigation\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"side-navigation\"\n  }, \"Side navigation\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The left-hand navigation allows you to navigate different pages in the microsite, while the right-hand navigation allows you to navigate within a page. You can organize the pages shown in the left-hand navigation in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"/src/data/navigation.yaml\"), \".\")), mdx(\"section\", {\n    \"id\": \"section-child-section-navigation\",\n    \"className\": \"section-h2\"\n  }, mdx(\"h1\", {\n    parentName: \"section\",\n    \"id\": \"child-section-navigation\"\n  }, \"Child section navigation\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"As the name suggests, it is a navigator within a section that is used to shorten the right-hand navigation. It condenses headings (from level 3 to 6) and displays them within this section, rather than the right-hand navigation. Hierarchy can be represented by adding additional \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"#\"), \". It supports one level of hierarchy inside the child section navigator. Deeper nesting is not recommended and rendered as the second level.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"This is the syntax \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<ChildSectionsNav parent=\\\"a-section-slug\\\" />\"), \" to add the navigation.\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<ChildSectionsNav parent=\\\"child-section-example\\\" />\"), \" is rendered as \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/documentation/writing/sample#child-section-example\"\n  }, \"shown here\"), \".\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"At commercetools, we typically use the child section navigation in \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Representations\"), \" and \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Update Actions\"), \" of resource pages. As the list can be long in some cases, use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"navLevels\"), \" and set to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"2\"), \" in the frontmatter of the MDX file. This displays only upto level 2 headings in the right-hand index navigation of the page.\"), mdx(Warning, {\n    mdxType: \"Warning\"\n  }, \"Adding the flag removes all level 3 headings in a page from the right-hand index navigation.\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"title":"Top navigation","url":"#top-navigation"},{"title":"Side navigation","url":"#side-navigation"},{"title":"Child section navigation","url":"#child-section-navigation"}]},"navLevels":3,"showTimeToRead":false,"timeToRead":0,"estimatedTimeToRead":1}},"pageContext":{"slug":"/writing/navigation","shortTitle":"Navigation","hasReleaseNotes":false}},
    "staticQueryHashes": ["2494036674","3227520225","3295477089","3359654165","3845541775","636942989"]}