{"componentChunkName":"component---src-templates-docs-jsx","path":"/components/navigationmenu","result":{"data":{"site":{"siteMetadata":{"title":"Gympass Design System"}},"mdx":{"fields":{"id":"623afa72-397c-54f0-93e4-553d9d765ce4","title":"NavigationMenu","slug":"/components/components/navigationmenu/"},"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : 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\": \"NavigationMenu\",\n  \"metaTitle\": \"NavigationMenu\",\n  \"metaDescription\": \"NavigationMenu Component\"\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 Table = makeShortcode(\"Table\");\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(\"h1\", {\n    \"id\": \"navigationmenu\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h1\",\n    \"href\": \"#navigationmenu\",\n    \"aria-label\": \"navigationmenu permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"NavigationMenu\"), mdx(\"h2\", {\n    \"id\": \"reference\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#reference\",\n    \"aria-label\": \"reference permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Reference\"), mdx(\"p\", null, \"Gympass \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<NavigationMenu />\"), \" displays a navigation menu with 3 optional main areas \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<NavigationMenu.Header />\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<NavigationMenu.Items />\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<NavigationMenu.Footer />\"), \".\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<NavigationMenu.Header />\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<NavigationMenu.Footer />\"), \" are containers that can be used to display components like logos, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<NavigationMenu.Menu />\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<NavigationMenu.Switcher />\"), \".\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<NavigationMenu.Items />\"), \" must be used to display items and subitems.\"), mdx(\"p\", null, \"The menu is responsive by default and controled by props. \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<NavigationMenu.BottomItems />\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<NavigationMenu.BottomItem />\"), \" must be used to display the items in the bottom bar.\", mdx(\"br\", null), mdx(\"br\", null)), mdx(\"p\", null, \"Available components:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<NavigationMenu.Header />\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<NavigationMenu.Items />\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<NavigationMenu.Footer />\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<NavigationMenu.ItemsGroup />\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<NavigationMenu.Item />\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<NavigationMenu.Subitem />\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<NavigationMenu.BottomItems />\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<NavigationMenu.BottomItem />\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<NavigationMenu.Menu />\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"<NavigationMenu.Switcher />\"))), mdx(\"h3\", {\n    \"id\": \"usage\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#usage\",\n    \"aria-label\": \"usage permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Usage\"), mdx(\"h4\", {\n    \"id\": \"not-responsive-navigation-menu\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#not-responsive-navigation-menu\",\n    \"aria-label\": \"not responsive navigation menu permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Not responsive navigation menu\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\",\n    \"metastring\": \"state\",\n    \"state\": true\n  }, \"const Container = styled(Box)`\\n  display: flex;\\n  width: 400px;\\n  height: 450px;\\n  border: 1px solid ${theme.colors.light};\\n`;\\n\\nconst MainPage = styled.main`\\n  display: flex;\\n  justify-content: center;\\n  align-items: center;\\n  height: 100%;\\n  padding: 10px;\\n`;\\n\\nconst itemGroups = [\\n  [\\n    {\\n      expanded: true,\\n      icon: Doc,\\n      label: 'Subscription',\\n      tag: 'new',\\n      subitems: [{ label: 'Details' }],\\n    },\\n    {\\n      active: true,\\n      icon: Doc,\\n      label: 'Billing',\\n    },\\n  ],\\n  [\\n    {\\n      icon: Help,\\n      label: 'Help',\\n    },\\n  ],\\n];\\n\\n// Whether the link handles the active attribute automatically (e.g., link from react-router-dom)\\n// then the item's active prop is not needed\\nconst renderWrapper = ({ children }) => (\\n  <a href=\\\"https://www.gympass.com\\\">{children}</a>\\n);\\n\\nconst IconComponent = ({ icon }) => <Icon as={icon} fill=\\\"deep\\\" />;\\n\\nrender(() => {\\n  return (\\n    <Container>\\n      <NavigationMenu responsive={false}>\\n        <NavigationMenu.Header>\\n          <NavigationMenu.Menu\\n            avatar={<Avatar.Circle />}\\n            title=\\\"Company\\\"\\n            subtitle=\\\"Reseller\\\"\\n          />\\n        </NavigationMenu.Header>\\n\\n        <NavigationMenu.Items>\\n          {itemGroups.map((group, index) => (\\n            <NavigationMenu.ItemsGroup key={index}>\\n              {group.map(item => (\\n                <NavigationMenu.Item\\n                  key={item.label}\\n                  active={item.active}\\n                  expanded={item.expanded}\\n                  icon={<IconComponent icon={item.icon} />}\\n                  label={item.label}\\n                  responsive={false}\\n                  wrapper={renderWrapper}\\n                  tag={item.tag}\\n                >\\n                  {item.subitems &&\\n                    item.subitems.map(({ label }) => (\\n                      <NavigationMenu.Subitem\\n                        key={label}\\n                        label={label}\\n                        wrapper={renderWrapper}\\n                      />\\n                    ))}\\n                </NavigationMenu.Item>\\n              ))}\\n            </NavigationMenu.ItemsGroup>\\n          ))}\\n        </NavigationMenu.Items>\\n\\n        <NavigationMenu.Footer>\\n          <NavigationMenu.Switcher\\n            avatar={<Avatar.Circle />}\\n            title=\\\"User\\\"\\n            subtitle=\\\"Admin, Supervisor\\\"\\n          />\\n        </NavigationMenu.Footer>\\n      </NavigationMenu>\\n\\n      <MainPage>Main page</MainPage>\\n    </Container>\\n  );\\n});\\n\")), mdx(\"h4\", {\n    \"id\": \"responsive-navigation-menu\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#responsive-navigation-menu\",\n    \"aria-label\": \"responsive navigation menu permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Responsive navigation menu\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\",\n    \"metastring\": \"state\",\n    \"state\": true\n  }, \"const Container = styled(Box)`\\n  display: flex;\\n  width: 400px;\\n  height: 450px;\\n  border: 1px solid ${theme.colors.light};\\n\\n  ${media.max('lg')`flex-direction: column;`}\\n`;\\n\\nconst MainPage = styled.main`\\n  display: flex;\\n  justify-content: center;\\n  align-items: center;\\n  height: 100%;\\n  padding: 10px;\\n`;\\n\\nconst itemMainGroup = [\\n  {\\n    expanded: true,\\n    icon: Doc,\\n    label: 'Subscription',\\n    tag: 'new',\\n    subitems: [{ label: 'Details' }],\\n  },\\n  {\\n    active: true,\\n    icon: Doc,\\n    label: 'Billing',\\n  },\\n];\\n\\nconst itemGroups = [\\n  [...itemMainGroup],\\n  [\\n    {\\n      icon: Help,\\n      label: 'Help',\\n    },\\n  ],\\n];\\n\\nconst IconComponent = ({ icon }) => <Icon as={icon} fill=\\\"deep\\\" />;\\n\\nrender(() => {\\n  const [isOpenOnMobile, setIsOpenOnMobile] = useState(false);\\n\\n  // Whether the link handles the active attribute automatically (e.g., link from react-router-dom)\\n  // then the item's active prop is not needed\\n  const renderWrapper = ({ children }) => (\\n    <a href=\\\"https://www.gympass.com\\\" onClick={() => setIsOpenOnMobile(false)}>\\n      {children}\\n    </a>\\n  );\\n\\n  const bottomItems = [\\n    ...itemMainGroup.slice(0, 2).map(({ active, icon, label }) => ({\\n      active,\\n      icon,\\n      label,\\n      wrapper: renderWrapper,\\n    })),\\n    {\\n      // Missing the active logic here.\\n      // It must be active when none of the other left items are active.\\n      icon: MenuMore,\\n      label: 'More',\\n      wrapper: ({ children }) => (\\n        <div onClick={() => setIsOpenOnMobile(!isOpenOnMobile)}>{children}</div>\\n      ),\\n    },\\n  ];\\n\\n  return (\\n    <Container>\\n      {/* It is not possible to demonstrate all the responsive behavior here. */}\\n      {/* When clicking on the \\\"More\\\" item, the entire menu will be displayed above the bottom bar. */}\\n      {/* To get the entire flow the openOnMobile={false} prop must be replaced by openOnMobile={isOpenOnMobile} */}\\n      <NavigationMenu openOnMobile={false}>\\n        <NavigationMenu.Header>\\n          <NavigationMenu.Menu\\n            avatar={<Avatar.Circle />}\\n            title=\\\"Company\\\"\\n            subtitle=\\\"Reseller\\\"\\n          />\\n        </NavigationMenu.Header>\\n\\n        <NavigationMenu.Items>\\n          {itemGroups.map((group, index) => (\\n            <NavigationMenu.ItemsGroup key={index}>\\n              {group.map(item => (\\n                <NavigationMenu.Item\\n                  key={item.label}\\n                  active={item.active}\\n                  expanded={item.expanded}\\n                  icon={<IconComponent icon={item.icon} />}\\n                  label={item.label}\\n                  wrapper={renderWrapper}\\n                  tag={item.tag}\\n                >\\n                  {item.subitems &&\\n                    item.subitems.map(({ label }) => (\\n                      <NavigationMenu.Subitem\\n                        key={label}\\n                        label={label}\\n                        wrapper={renderWrapper}\\n                      />\\n                    ))}\\n                </NavigationMenu.Item>\\n              ))}\\n            </NavigationMenu.ItemsGroup>\\n          ))}\\n        </NavigationMenu.Items>\\n\\n        <NavigationMenu.Footer>\\n          <NavigationMenu.Switcher\\n            avatar={<Avatar.Circle />}\\n            title=\\\"User\\\"\\n            subtitle=\\\"Admin, Supervisor\\\"\\n          />\\n        </NavigationMenu.Footer>\\n      </NavigationMenu>\\n\\n      <MainPage>Main page</MainPage>\\n\\n      <NavigationMenu.BottomItems>\\n        {bottomItems.map(({ active, icon, label, wrapper }) => (\\n          <NavigationMenu.BottomItem\\n            key={label}\\n            active={active}\\n            icon={icon}\\n            label={label}\\n            wrapper={wrapper}\\n          />\\n        ))}\\n      </NavigationMenu.BottomItems>\\n    </Container>\\n  );\\n});\\n\")), mdx(\"h4\", {\n    \"id\": \"menu-subcomponent-with-an-action\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#menu-subcomponent-with-an-action\",\n    \"aria-label\": \"menu subcomponent with an action permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Menu subcomponent with an action\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\",\n    \"metastring\": \"state\",\n    \"state\": true\n  }, \"const StyledAvatar = styled(Avatar.Circle)`\\n  background-color: ${theme.colors.vibin};\\n`;\\n\\nrender(() => {\\n  return (\\n    <NavigationMenu responsive={false}>\\n      <NavigationMenu.Header>\\n        <NavigationMenu.Menu\\n          avatar={\\n            <StyledAvatar>\\n              <Text color=\\\"white\\\">C</Text>\\n            </StyledAvatar>\\n          }\\n          title=\\\"Company\\\"\\n          subtitle=\\\"Reseller\\\"\\n          onClick={() => alert('Menu was clicked')}\\n        />\\n      </NavigationMenu.Header>\\n    </NavigationMenu>\\n  );\\n});\\n\")), mdx(\"h4\", {\n    \"id\": \"switcher-subcomponent-with-actions\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#switcher-subcomponent-with-actions\",\n    \"aria-label\": \"switcher subcomponent with actions permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Switcher subcomponent with actions\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\",\n    \"metastring\": \"state\",\n    \"state\": true\n  }, \"const StyledAvatar = styled(Avatar.Circle)`\\n  background-color: ${theme.colors.white};\\n  border: 1px solid ${theme.colors.light};\\n`;\\n\\nconst actions = [\\n  {\\n    id: 'Action 1',\\n    label: 'Action 1',\\n    onClick: () => alert('Action 1 was selected'),\\n  },\\n  {\\n    id: 'Action 2',\\n    label: 'Action 2',\\n    onClick: () => alert('Action 2 was selected'),\\n  },\\n];\\n\\nrender(() => {\\n  return (\\n    <NavigationMenu responsive={false}>\\n      <NavigationMenu.Footer>\\n        <NavigationMenu.Switcher\\n          actions={actions}\\n          avatar={<StyledAvatar fill=\\\"vibin\\\" />}\\n          sideOffset={36}\\n          subtitle=\\\"Admin, Supervisor\\\"\\n          title=\\\"User\\\"\\n        />\\n      </NavigationMenu.Footer>\\n    </NavigationMenu>\\n  );\\n});\\n\")), mdx(\"h3\", {\n    \"id\": \"props\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#props\",\n    \"aria-label\": \"props permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Props\"), mdx(\"h4\", {\n    \"id\": \"navigationmenu-1\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#navigationmenu-1\",\n    \"aria-label\": \"navigationmenu 1 permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"NavigationMenu\"), mdx(Table, {\n    properties: NavigationMenuProps,\n    mdxType: \"Table\"\n  }), mdx(\"h4\", {\n    \"id\": \"navigationmenumenu\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#navigationmenumenu\",\n    \"aria-label\": \"navigationmenumenu permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"NavigationMenu.Menu\"), mdx(Table, {\n    properties: MenuProps,\n    mdxType: \"Table\"\n  }), mdx(\"h4\", {\n    \"id\": \"navigationmenuswitcher-action\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#navigationmenuswitcher-action\",\n    \"aria-label\": \"navigationmenuswitcher action permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"NavigationMenu.Switcher action\"), mdx(Table, {\n    properties: SwitcherActionProps,\n    mdxType: \"Table\"\n  }), mdx(\"h4\", {\n    \"id\": \"navigationmenuswitcher\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#navigationmenuswitcher\",\n    \"aria-label\": \"navigationmenuswitcher permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"NavigationMenu.Switcher\"), mdx(Table, {\n    properties: SwitcherProps,\n    mdxType: \"Table\"\n  }), mdx(\"h4\", {\n    \"id\": \"navigationmenuitem\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#navigationmenuitem\",\n    \"aria-label\": \"navigationmenuitem permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"NavigationMenu.Item\"), mdx(Table, {\n    properties: ItemProps,\n    mdxType: \"Table\"\n  }), mdx(\"h4\", {\n    \"id\": \"navigationmenusubitem\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#navigationmenusubitem\",\n    \"aria-label\": \"navigationmenusubitem permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"NavigationMenu.Subitem\"), mdx(Table, {\n    properties: SubitemProps,\n    mdxType: \"Table\"\n  }), mdx(\"h4\", {\n    \"id\": \"navigationmenubottomitems\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#navigationmenubottomitems\",\n    \"aria-label\": \"navigationmenubottomitems permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"NavigationMenu.BottomItems\"), mdx(Table, {\n    properties: BottomItemsProps,\n    mdxType: \"Table\"\n  }), mdx(\"h4\", {\n    \"id\": \"navigationmenubottomitem\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h4\",\n    \"href\": \"#navigationmenubottomitem\",\n    \"aria-label\": \"navigationmenubottomitem permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"NavigationMenu.BottomItem\"), mdx(Table, {\n    properties: BottomItemProps,\n    mdxType: \"Table\"\n  }));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#navigationmenu","title":"NavigationMenu","items":[{"url":"#reference","title":"Reference","items":[{"url":"#usage","title":"Usage","items":[{"url":"#not-responsive-navigation-menu","title":"Not responsive navigation menu"},{"url":"#responsive-navigation-menu","title":"Responsive navigation menu"},{"url":"#menu-subcomponent-with-an-action","title":"Menu subcomponent with an action"},{"url":"#switcher-subcomponent-with-actions","title":"Switcher subcomponent with actions"}]},{"url":"#props","title":"Props","items":[{"url":"#navigationmenu-1","title":"NavigationMenu"},{"url":"#navigationmenumenu","title":"NavigationMenu.Menu"},{"url":"#navigationmenuswitcher-action","title":"NavigationMenu.Switcher action"},{"url":"#navigationmenuswitcher","title":"NavigationMenu.Switcher"},{"url":"#navigationmenuitem","title":"NavigationMenu.Item"},{"url":"#navigationmenusubitem","title":"NavigationMenu.Subitem"},{"url":"#navigationmenubottomitems","title":"NavigationMenu.BottomItems"},{"url":"#navigationmenubottomitem","title":"NavigationMenu.BottomItem"}]}]}]}]},"parent":{"__typename":"File","relativePath":"components/components/navigationmenu/index.mdx"},"frontmatter":{"metaTitle":"NavigationMenu","metaDescription":"NavigationMenu Component"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/system/","title":"Yoga System","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/guidelines/","title":"Guidelines","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/guidelines/tokens/borders","title":"Borders","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/guidelines/tokens/breakpoints","title":"Breakpoints","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/guidelines/tokens/colors","title":"Colors","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/guidelines/typography","title":"Typography","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/guidelines/tokens/elevations","title":"Elevations","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/guidelines/tokens/font-weights","title":"Font-Weights","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/guidelines/tokens/fonts","title":"Fonts","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/guidelines/tokens/","title":"Design Tokens","linkable":false,"order":0,"open":true}}},{"node":{"fields":{"slug":"/guidelines/tokens/font-sizes","title":"Font-Sizes","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/guidelines/tokens/line-heights","title":"Line-Heights","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/guidelines/tokens/radii","title":"Shapes","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/guidelines/tokens/spacing","title":"Spacing","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/","title":"Components","linkable":false,"order":4,"open":true}}},{"node":{"fields":{"slug":"/components/helpers/media","title":"Media","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/helpers/","title":"Helpers","linkable":false,"order":3,"open":true}}},{"node":{"fields":{"slug":"/components/getting-started/","title":"Getting started","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/icons/","title":"Icons","linkable":true,"order":2,"open":true}}},{"node":{"fields":{"slug":"/components/illustrations/","title":"Illustrations","linkable":true,"order":2,"open":true}}},{"node":{"fields":{"slug":"/components/theming/borders","title":"Borders","linkable":true,"order":4,"open":true}}},{"node":{"fields":{"slug":"/components/theming/breakpoints","title":"Breakpoints","linkable":true,"order":5,"open":true}}},{"node":{"fields":{"slug":"/components/theming/colors","title":"Colors","linkable":true,"order":6,"open":true}}},{"node":{"fields":{"slug":"/components/theming/elevations","title":"Elevations","linkable":true,"order":7,"open":true}}},{"node":{"fields":{"slug":"/components/theming/font-weights","title":"Font-weights","linkable":true,"order":9,"open":true}}},{"node":{"fields":{"slug":"/components/theming/font-sizes","title":"Font-sizes","linkable":true,"order":8,"open":true}}},{"node":{"fields":{"slug":"/components/theming/fonts","title":"Fonts","linkable":true,"order":10,"open":true}}},{"node":{"fields":{"slug":"/components/theming/","title":"Theming","linkable":false,"order":1,"open":false}}},{"node":{"fields":{"slug":"/components/theming/line-heights","title":"Line-heights","linkable":true,"order":11,"open":true}}},{"node":{"fields":{"slug":"/components/theming/shapes","title":"Shapes","linkable":true,"order":12,"open":true}}},{"node":{"fields":{"slug":"/components/theming/spacing","title":"Spacing","linkable":true,"order":13,"open":true}}},{"node":{"fields":{"slug":"/components/theming/theme","title":"Theme","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/theming/themeGenerator","title":"Theme Generator","linkable":true,"order":3,"open":true}}},{"node":{"fields":{"slug":"/components/theming/themereader","title":"ThemeReader","linkable":true,"order":2,"open":true}}},{"node":{"fields":{"slug":"/components/theming/themeProvider","title":"ThemeProvider","linkable":true,"order":1,"open":true}}},{"node":{"fields":{"slug":"/system/getting-started/","title":"Getting Started","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/system/system/backgroundColor","title":"BackgroundColor","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/system/system/border","title":"Border","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/system/system/elevation","title":"Elevation","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/system/system/","title":"System","linkable":false,"order":0,"open":true}}},{"node":{"fields":{"slug":"/system/system/layout","title":"Layout","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/system/system/flex","title":"Flex","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/system/system/overflow","title":"Overflow","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/system/system/spacing","title":"Spacing","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/system/system/typography","title":"Typography","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/accordion/","title":"Accordion","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/actionrequirement/","title":"ActionRequirement","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/autocomplete/","title":"AutoComplete","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/avatar/","title":"Avatar","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/banner/","title":"Banner","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/bottomsheet/","title":"BottomSheet","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/card/default","title":"Simple","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/card/eventcard","title":"Event","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/card/","title":"Card","linkable":false,"order":0,"open":false}}},{"node":{"fields":{"slug":"/components/components/box/","title":"Box","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/card/plancard","title":"Plan","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/button/default","title":"Button","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/button/","title":"Button","linkable":false,"order":0,"open":false}}},{"node":{"fields":{"slug":"/components/components/button/icon","title":"Icon","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/button/link","title":"Link","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/button/outline","title":"Outline","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/button/text","title":"Text","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/chips/","title":"Chips","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/checkbox/default","title":"Checkbox","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/checkbox/","title":"Checkbox","linkable":false,"order":0,"open":false}}},{"node":{"fields":{"slug":"/components/components/checkbox/switch","title":"Switch","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/datepicker/","title":"Datepicker","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/dialog/","title":"Dialog","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/drawer/","title":"Drawer","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/dropdown/","title":"Dropdown","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/divider/","title":"Divider","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/feedback/","title":"Feedback","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/header/","title":"Header","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/icon/","title":"Icon","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/heading/","title":"Heading","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/grid/","title":"Grid","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/list/","title":"List","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/input/email","title":"Email","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/input/default","title":"Default","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/input/","title":"Input","linkable":false,"order":0,"open":false}}},{"node":{"fields":{"slug":"/components/components/input/number","title":"Number","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/input/password","title":"Password","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/input/phone","title":"Phone","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/input/tel","title":"Tel","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/navigationmenu/","title":"NavigationMenu","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/menu/","title":"Menu","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/progress/","title":"Progress","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/popover/","title":"Popover","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/radiogroup/button","title":"Button","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/radiogroup/","title":"RadioGroup","linkable":false,"order":0,"open":false}}},{"node":{"fields":{"slug":"/components/components/radiogroup/radio","title":"Radio","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/rating/","title":"Rating","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/result/","title":"Result","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/skeleton/","title":"Skeleton","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/slider/","title":"Slider","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/snackbar/","title":"Snackbar","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/spinner/","title":"Spinner","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/stepper/","title":"Stepper","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/tag/default","title":"Tag","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/tag/","title":"Tag","linkable":false,"order":0,"open":false}}},{"node":{"fields":{"slug":"/components/components/tag/informative","title":"Informative","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/text/","title":"Text","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/textarea/","title":"TextArea","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/card/gym/checkin","title":"Check-in","linkable":true,"order":0,"open":true}}},{"node":{"fields":{"slug":"/components/components/card/gym/","title":"Gym","linkable":false,"order":0,"open":false}}}]}},"pageContext":{"id":"623afa72-397c-54f0-93e4-553d9d765ce4"}},"staticQueryHashes":["2575950596","2575950596","878412135","878412135"]}