{"componentChunkName":"component---src-templates-angulardocs-js","path":"/docs/contrast/angular/navigation/sidebar2","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"1854e5a0-c0e9-5669-955e-c3f54a7e9b21","title":"Sidebar","slug":"/contrast/angular/navigation/sidebar2"},"body":"function _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\": \"Sidebar\",\n  \"metaTitle\": \"Sidebar Component for Contrast Bootstrap Angular\",\n  \"metaDescription\": \"Angular Bootstrap Sidebar is a vertical navigation component which apart from traditional, text links, might embed icons, dropdowns, avatars or search forms\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Sidebar\"), mdx(\"p\", null, \"Angular Bootstrap Sidebar is a vertical navigation component which apart from traditional, text links, might embed icons, dropdowns, avatars or search forms.\"), mdx(\"p\", null, \"By virtue of its clarity and simplicity it remarkably increases User Experience. It allows you to navigate through small applications as well as vast portals swiftly. Multiple link embedding functionality enables you to implement more advanced content categorisation, which is almost essential within bigger projects.\"), mdx(\"p\", null, \"Thanks to Contrast Design Bootstrap you can easily implement Sidebar in your own projects, by using one of various, alluring Side Menus.\"), mdx(\"p\", null, \"Navigation on the left is a live demo of Sidebar.\"), mdx(\"h2\", null, \"Sidebar example\"), mdx(\"h6\", null, \"Expanded\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/8e13621dc49a48f79fe6deef9b259a14/26c3a/side1.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"51.73745173745174%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABJ0AAASdAHeZh94AAABFklEQVQoz5VSSW6EMBDkLSwic54cJiDFgODKgQ9NXsBy4shDeBOrWQdBh24F55i4pJKldrtU5W7lfn8H27ZBVVXI8xwQVVXBPM8gg+M4iMrX8wlFUUCWZVCWJV2u60qC+74Tr+a/iFDCMIQoiuDx+CBhxDAMUNc1tG1L7LqOzqZpRI3qbQfNeS7LIlwqlmWB4zigaRrEcUwX4zhSM+ecOE0TPULXyOXnvPjaXr+CQRCQoK7rFBuBTegS48r8H0X2fR8Y+yTBNE2piG7Q5SUo9Yeu64J30jAM4bDvOYxnzG3bpAQpsud5gLzd3oRDjIsuZSYsBDEyujRNUwji2uAgrhgyUHAgjDGacpIkVOS8p+XGyNcu/pffP/nHix1Ov+cAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/8e13621dc49a48f79fe6deef9b259a14/e3189/side1.png\",\n    \"srcSet\": [\"/static/8e13621dc49a48f79fe6deef9b259a14/a2ead/side1.png 259w\", \"/static/8e13621dc49a48f79fe6deef9b259a14/6b9fd/side1.png 518w\", \"/static/8e13621dc49a48f79fe6deef9b259a14/e3189/side1.png 1035w\", \"/static/8e13621dc49a48f79fe6deef9b259a14/44d59/side1.png 1553w\", \"/static/8e13621dc49a48f79fe6deef9b259a14/26c3a/side1.png 1907w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"Collapsed\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/225e4f9f807131204684ec5d054762cb/9e818/side2.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }), \"\\n    \", mdx(\"span\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"51.73745173745174%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABJ0AAASdAHeZh94AAACAUlEQVQoz2WS3U9ScRjH/cO684IYceFVd21d1LxwMdF1wVyZmRe9jNkqq4u21GQ1tnJaTYrNMJWUAyKIAUk4XzkocI6A8XL45DnAybOe7dmePc/3+TzP76Wjs7MTWZZRrdFo0FAULT4+2Cfu/cCB4CXomUFpaGkSfh+HoXmin1xsJ342+856tN4z77BYLAagotS1eHvRg/ByiND4A6ZGBlCz1XKR4MQomy4n00M2/HMfNa3aowO7urooFoutgqKO0+L16XFmb/WwcN/GyuRYs14uMP94kKWxEb47b7ITDf3bsLVQh9lsJpfL0bZi6Q+7ooyc2SH5xc3i1BjS3ha/U2li6SMiMxM8v3wB98A1Tg/iKPWaDtOAVqsVURR14GG2wI+1X83JerbC6tIys16BtLCA5+kwW9+myUe+Ui2du38NeMkIzBdOEIQwyWSCcDjM+sYmMWGZ0n5Sq5fLZV2743NTzotGoHqHYiaji6RShXdv3Vy/eoWe7m4cfTdw2G2sCSEGh+/R19+PvbcXh8PB5OhDpNyxEWi328lms7SyVGt1Tk8kpKyouXrwjUCA+FqQvegKyUgYuVhCkgqkdo+o1OpGoMlk0o+stP7geVMzKd9nYq5H+J7cZu7Nq/80Kgj9lS+aDcD2pHZcrVYIvHbif3YX4cUdVt9P6V9FURq6vu1/Ac0Nw/167V7uAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"image info\",\n    \"title\": \"image info\",\n    \"src\": \"/static/225e4f9f807131204684ec5d054762cb/e3189/side2.png\",\n    \"srcSet\": [\"/static/225e4f9f807131204684ec5d054762cb/a2ead/side2.png 259w\", \"/static/225e4f9f807131204684ec5d054762cb/6b9fd/side2.png 518w\", \"/static/225e4f9f807131204684ec5d054762cb/e3189/side2.png 1035w\", \"/static/225e4f9f807131204684ec5d054762cb/44d59/side2.png 1553w\", \"/static/225e4f9f807131204684ec5d054762cb/9e818/side2.png 1913w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  })), \"\\n  \"), \"\\n    \")), mdx(\"h6\", null, \"html\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-html\"\n  }), \"<CDBSidebar textColor=\\\"#ffffff\\\" backgroundColor=\\\"#333333\\\" style=\\\"position: fixed;\\\">\\n    <CDBSidebarHeader (isToggled)=\\\"toggledState($event)\\\" [prefix]=\\\"icon\\\">\\n        <ng-template #icon>\\n            <i class=\\\"fa-bars fa fa-lg\\\"></i>\\n        </ng-template>\\n\\n        Contrast\\n    </CDBSidebarHeader>\\n\\n    <CDBSidebarContent>\\n        <CDBSidebarMenu>\\n            <CDBSidebarMenuItem icon=\\\"th-large\\\" link=\\\"/accordion\\\">\\n                Accordion\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"user-clock\\\" link=\\\"/alert\\\">\\n                Alert\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"radiation\\\" link=\\\"/animation\\\">\\n                Animation\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"magic\\\" link=\\\"/autocomplete\\\">\\n                Autocomplete\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"certificate\\\" link=\\\"/badge\\\">\\n                Badge\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"box\\\" link=\\\"/box\\\">\\n                Box\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"route\\\" link=\\\"/breadcrumb\\\">\\n                Breadcrumb\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"mouse\\\" link=\\\"/button\\\">\\n                Button\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"mouse\\\" link=\\\"/button-group\\\">\\n                Button Group\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"mouse\\\" link=\\\"/button-toolbar\\\">\\n                Button Toolbar\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"id-card\\\" link=\\\"/card\\\">\\n                Card\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"sliders-h\\\" link=\\\"/carousel\\\">\\n                Carousel\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"check\\\" link=\\\"/checkbox\\\">\\n                Checkbox\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"sliders-h\\\" link=\\\"/collapse\\\">\\n                Collapse\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"table\\\" link=\\\"/datatable\\\">\\n                Data Table\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"calendar-day\\\" link=\\\"/date-picker\\\">\\n                Date Picker\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"caret-down\\\" link=\\\"/dropdown\\\">\\n                Dropdown\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"table\\\" link=\\\"/editable-table\\\">\\n                Editable Table\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"shoe-prints\\\" link=\\\"/footer\\\">\\n                Footer\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"sign-in-alt\\\" link=\\\"/forms\\\">\\n                Forms\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"icons\\\" link=\\\"/icon\\\">\\n                Icon\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"crop\\\" link=\\\"/iframe\\\">\\n                Iframe\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"keyboard\\\" link=\\\"/input\\\">\\n                Input\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"keyboard\\\" link=\\\"/input-group\\\">\\n                Input Group\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"list\\\" link=\\\"/list-group\\\">\\n                List Group\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"mask\\\" link=\\\"/mask\\\">\\n                Mask\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"medal\\\" link=\\\"/modal\\\">\\n                Modal\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"object-group\\\" link=\\\"/multiselect\\\">\\n                Multiselect\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"directions\\\" link=\\\"/navbar\\\">\\n                Navbar\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"flag-checkered\\\" link=\\\"/notification\\\">\\n                Notification\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"map\\\" link=\\\"/pagination\\\">\\n                Pagination\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"columns\\\" link=\\\"/pane\\\">\\n                Pane\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"columns\\\" link=\\\"/panel\\\">\\n                Panel\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"spinner\\\" link=\\\"/progress\\\">\\n                Progress\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"spinner\\\" link=\\\"/circular-progress\\\">\\n                Circular Progress\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"dot-circle\\\" link=\\\"/radio\\\">\\n                Radio\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"star-half-alt\\\" link=\\\"/rating\\\">\\n                Rating\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"mouse-pointer\\\" link=\\\"/select\\\">\\n                Select\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"hand-pointer\\\" link=\\\"/select2\\\">\\n                Select2\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"columns\\\" link=\\\"/sidebar\\\">\\n                Sidebar\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"sliders-h\\\" link=\\\"/slider\\\">\\n                Slider\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"spinner\\\" link=\\\"/spinner\\\">\\n                Spinner\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"step-forward\\\" link=\\\"/stepper\\\">\\n                Stepper\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"toggle-on\\\" link=\\\"/switch\\\">\\n                Switch\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"columns\\\" link=\\\"/table\\\">\\n                Table\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"indent\\\" link=\\\"/tabs\\\">\\n                Tabs\\n            </CDBSidebarMenuItem>\\n\\n            <CDBSidebarMenuItem icon=\\\"stopwatch\\\" link=\\\"/time-picker\\\">\\n                Time Picker\\n            </CDBSidebarMenuItem>\\n        </CDBSidebarMenu>\\n    </CDBSidebarContent>\\n\\n    <div class=\\\"mt-auto\\\">\\n        <CDBSidebarFooter style=\\\"text-align: center\\\">\\n            <div class=\\\"sidebar-btn-wrapper\\\" style=\\\"padding: 20px 5px\\\">\\n                Sidebar Footer\\n            </div>\\n        </CDBSidebarFooter>\\n    </div>\\n</CDBSidebar>\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"Here in this section you will find information about required modules and available inputs, outputs, methods and events of this component.\"), mdx(\"h2\", null, \"Contrast Sidebar Bootstrap Modules used\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import {SidebarModule } from 'cdbangular';\\n\")), mdx(\"p\", null, \"API Reference: Contrast Sidebar Inputs\"), mdx(\"p\", null, \"The table below shows the possible input of the Sidebar component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"class\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom classes\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"class=\\\"myClass\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"textColor\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"#fff\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes default input tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"textColor=\\\"#000\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"backgroundColor\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"#000\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes the text color\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"backgroundColor=\\\"#fff\\\"\")))), mdx(\"p\", null, \"API Reference: Contrast CDBSidebarMenuItem Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBSidebarMenuItem component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"class\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom classes\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"class=\\\"myClass\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"icon\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds font-awesome icon\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"icon=\\\"envelope\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"iconClassName\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom classes to icon element\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"iconClassName=\\\"custom_class\\\" icon=\\\"envelope\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"active\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets the menu item to active\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"active=true\")))), mdx(\"p\", null, \"API Reference: Contrast CDBSidebarSubMenu  Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBSidebarSubMenu component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"class\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom classes\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"class=\\\"myClass\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"icon\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds font-awesome icon\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"icon=\\\"envelope\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"iconClassName\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom classes to icon element\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"iconClassName=\\\"custom_class\\\" icon=\\\"envelope\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"active\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets the menu item to active\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"active=true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"title\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"node\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets the name of the sub menu\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"title=\\\"Submenu1\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"defaultOpen\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Render opened Sidebar submenu at page load\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"defaultOpen=true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Open\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sidebar sub menu toggles accordingly to this property (opens/closes on change)\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Open=true\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#sidebar","title":"Sidebar","items":[{"url":"#sidebar-example","title":"Sidebar example","items":[{"items":[{"items":[{"items":[{"url":"#expanded","title":"Expanded"},{"url":"#collapsed","title":"Collapsed"},{"url":"#html","title":"html"}]}]}]}]}]},{"url":"#api","title":"API","items":[{"url":"#contrast-sidebar-bootstrap-modules-used","title":"Contrast Sidebar Bootstrap Modules used"}]}]},"parent":{"__typename":"File","relativePath":"contrast/angular/navigation/sidebar2.md"},"frontmatter":{"metaTitle":"Sidebar Component for Contrast Bootstrap Angular","metaDescription":"Angular Bootstrap Sidebar is a vertical navigation component which apart from traditional, text links, might embed icons, dropdowns, avatars or search forms"}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/contrast/angular/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/angular/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/javascript/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/javascript/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/react/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/react/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/react/chart","title":"Charts"}}},{"node":{"fields":{"slug":"/contrast/react/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/react/custom_pages","title":"Custom Pages"}}},{"node":{"fields":{"slug":"/contrast/angular/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/angular/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/angular/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/angular/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/angular/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/angular/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/angular/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/angular/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/angular/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/angular/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/angular/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/angular/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/angular/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/angular/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/angular/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/angular/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/angular/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/angular/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/angular/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/angular/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/angular/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/angular/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar2","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/angular/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/angular/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/angular/table/fixed_datatables","title":"Fixed DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/popover","title":"PopOver"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/components/alert","title":"React Alert"}}},{"node":{"fields":{"slug":"/contrast/react/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/react/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/react/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/react/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/react/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/react/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/react/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/react/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/react/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/react/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/react/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/react/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/react/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/react/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/react/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/react/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/react/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/react/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/react/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/react/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/react/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/react/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/react/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/react/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/react/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/react/components/smoothscroll","title":"SmoothScroll"}}},{"node":{"fields":{"slug":"/contrast/react/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/react/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/react/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/sidebar","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/react/sections/fileuploader","title":"FileUploader"}}},{"node":{"fields":{"slug":"/contrast/react/sections/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/react/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/react/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/react/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/bootstrap-5-major-changes","title":"Major changes to bootstrap 5"}}},{"node":{"fields":{"slug":"/bootstrap-5-navbar-using-contrast","title":"How To Create A Beautiful Navbar Using Bootstrap And Contrast"}}},{"node":{"fields":{"slug":"/using-bootstrap-in-react","title":"How to use Bootstrap in React Using a React Library"}}}]}},"pageContext":{"id":"1854e5a0-c0e9-5669-955e-c3f54a7e9b21"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}