{"componentChunkName":"component---src-templates-angulardocs-js","path":"/docs/contrast/angular/components/dropdown","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"336a3aba-2964-51ea-84ec-5d6e7fd9c5b5","title":"DropDown","slug":"/contrast/angular/components/dropdown"},"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\": \"DropDown\",\n  \"metaTitle\": \"DropDown Component for Contrast Bootstrap Angular\",\n  \"metaDescription\": \"Angular Bootstrap Dropdown is a toggleable menu embedding additional links or content\"\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, \"DropDown\"), mdx(\"p\", null, \"Angular Bootstrap Dropdown is a toggleable menu embedding additional links or content. It allows you to construct advanced navigation and link categorization.\"), mdx(\"p\", null, \"In case of more complicated navigations systems dropdowns are the essential elements providing you with possibility of placing all the most relevant links in our navigation bar (or other component acting as navigation - such as SideNav)\"), mdx(\"p\", null, \"Aside from being not only highly functional, CDB dropdowns are also extraordinary visually attractive. It gives them this characteristic Material Design effects, like shadows, living colors or charming waves effect after opening a link.\"), mdx(\"p\", null, \"They\\u2019re toggled by clicking, not by hovering; this is an intentional design decision. Why?\"), mdx(\"p\", null, \"CDB is \\\"mobile first\\\" framework so, we avoid mixing functional elements and interaction by hovering because it decreases User Experience of users of mobile devices.\"), mdx(\"h2\", null, \"Basic DropDown\"), mdx(\"p\", null, \"Dark Toggle Bar\"), 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\": \"262px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/f54b7c34bec913ca22d3a4f7bf6840a0/8ff13/dropdown1.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\": \"80.6949806949807%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAABJ0AAASdAHeZh94AAAB1UlEQVQ4y61UXU/iQBQtIS5QeHAhGxW/WqvZiEYT4tsa/TUQXnmF8MZf3LDt7hpqLS1QoJDIllI4zgw7SA3JYtabnMzk3p5z79w7HQHE5vM5PsKojsDFbNtGo9GApmnvBuV1u12mI0ynU7YpFosQBAGRSIStm4J/X61Ww4KlUokFPm1tQZIVKLIMRTnF7u4eTk4UZLNZSNIxzk4Vssq4yOWws/MF0WiU8Wq1WliwUCgsMhIcHknIX1/h/Os5trc/swS3t99wf3+Hy4sc9g8OkM/fQJaOlpVWKpWwYLlcZoF0Oo1kUkQsHkecIJVKQUwkiC/JQH2iSOKxGBIJEZlMhvHq9fpCkA9lPB7DdV0Mh0OG0WjEwPer/tf4wkd5nuctBPnIZ7PZf10Zyg9dG3r094pSLuVQUP5ScE4cQUCcvofvDRWqqsFsWXgyTTT1R6jaT7StFnTDhK7r+KGq0H79Bu//akHCqyOgOTH+46HnOKQ3I/QHAwzcISzLxqDfQ7vThWE8MUGzZcP3p8tKgyBYqfBv6c9kMHqziYemjkfDQL/vbnRsamsFJ5MJHPILWe0OOmR1nN6StA6rFhKk5vv+2keCN/1fCA2FE2mWt9hUkN8Q4aOfrxe1UDEZc92tGQAAAABJRU5ErkJggg==')\",\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/f54b7c34bec913ca22d3a4f7bf6840a0/8ff13/dropdown1.png\",\n    \"srcSet\": [\"/static/f54b7c34bec913ca22d3a4f7bf6840a0/a2ead/dropdown1.png 259w\", \"/static/f54b7c34bec913ca22d3a4f7bf6840a0/8ff13/dropdown1.png 262w\"],\n    \"sizes\": \"(max-width: 262px) 100vw, 262px\",\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  }), \"<CDBDropDown>\\n    <CDBDropDownToggle color=\\\"dark\\\" (click)=\\\"menu1.toggleDropdown($event)\\\"\\n        (mouseenter)=\\\"menu1.toggleDropdown($event)\\\">\\n        Dark Toggle Bar\\n    </CDBDropDownToggle>\\n    <CDBDropDownMenu #menu1=\\\"cdbDropdownMenu\\\">\\n        This is the toggle menu\\n    </CDBDropDownMenu>\\n</CDBDropDown>\\n\")), mdx(\"h2\", null, \"Primary Toggler with Caret\"), 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\": \"302px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/956e9fcc315a6cdac1f6e5417bb0592f/5f1d2/dropdown2.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\": \"63.70656370656371%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAABJ0AAASdAHeZh94AAAB4klEQVQ4y61T30tUQRTef1AQetGHwDKhSIjspxKBSP4qSMRMJKhcJYowffPFoEdBoTKDdmPv3nVXd9012t17Z+7eOzNfZ2bu7qqJEjTwMd85557vfDPDTeA/r4RSCslPDYwuc0yscIx9aGM8Riu3fHyfXLX1x7SPvOf4nBVISBJ88Iahc8JD35yPa/M+rjz3Db/8zO6Gz/q4SrU+qvW/8NFLcddTDz0zPi5Oe+gYr2P9a2gFH75luPDEMw03XzLces0wtMQwSLhOzQOvGB6Rq+F33NR1/m6SoXvK9lyiwZ2THj5uh/bIM2sBBkjk3iLD7YU27mgk2zha09Df6/x9GnCDBm2kIyvYCCV4IMAbAsE/gJ/gQigrKER05J1UjJOxOiUmKGmgpICU+lEkBSRaq9dRrdURhiE5DuH5jFwHhuucEBKMcYRRZHIaEXH9BnpJYywW1KtyeAjHySJfyCO3m4fj5pDJOMjldpFOp/BlewebW1so7O0j9SOFbzvfkc38xO+abwVJxwgqsquDIOAolUooFPZQrVZRJF4uH6Dm2QbjJh7eugxypfub/JjDX+Qw67ooFouoVMrIOC65c+kavL/+BqXUqbnYoTLTz1p66FloirUEm+eP4qThUZufJ9js1/sf/Bu58Cfvt54AAAAASUVORK5CYII=')\",\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/956e9fcc315a6cdac1f6e5417bb0592f/5f1d2/dropdown2.png\",\n    \"srcSet\": [\"/static/956e9fcc315a6cdac1f6e5417bb0592f/a2ead/dropdown2.png 259w\", \"/static/956e9fcc315a6cdac1f6e5417bb0592f/5f1d2/dropdown2.png 302w\"],\n    \"sizes\": \"(max-width: 302px) 100vw, 302px\",\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  }), \"<CDBDropDown>\\n    <CDBDropDownToggle color=\\\"primary\\\" [caretDropDown]=true (click)=\\\"menu2.toggleDropdown($event)\\\">\\n        Primary Toggle Bar\\n    </CDBDropDownToggle>\\n    <CDBDropDownMenu #menu2=\\\"cdbDropdownMenu\\\" placement=\\\"bottom\\\">\\n        This is the toogle menu with caret\\n    </CDBDropDownMenu>\\n</CDBDropDown>\\n\")), mdx(\"h2\", null, \"Secondary Toggle Bar\"), 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\": \"776px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/3d6442f380397a7f3a2c28a4cbddd9c4/167b5/dropdown3.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\": \"14.671814671814671%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAABJ0AAASdAHeZh94AAAAhklEQVQI14WPywrCMBBF8/EufIB7oRa/RxTE1K+oxiQ+8pxc0zRodw4cztxZDFzmbMTlcB05Tlzh+77YmoB/k1ICU8KimZ/RLjna1chu3X3zZnbCdsEh+hceTw2lNKSUuAmRdwWtdfE933wIYMNXayLMOxRs9TQPLSgSvPeZUOycq/kHEeEDCRne6GijvKkAAAAASUVORK5CYII=')\",\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/3d6442f380397a7f3a2c28a4cbddd9c4/167b5/dropdown3.png\",\n    \"srcSet\": [\"/static/3d6442f380397a7f3a2c28a4cbddd9c4/a2ead/dropdown3.png 259w\", \"/static/3d6442f380397a7f3a2c28a4cbddd9c4/6b9fd/dropdown3.png 518w\", \"/static/3d6442f380397a7f3a2c28a4cbddd9c4/167b5/dropdown3.png 776w\"],\n    \"sizes\": \"(max-width: 776px) 100vw, 776px\",\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  }), \"<CDBDropDown>\\n    <CDBDropDownToggle [nav]=true color=\\\"secondary\\\" [caretDropRight]=true\\n        (click)=\\\"menu3.toggleDropdown($event)\\\">\\n        Secondary Toggle Bar as nav\\n    </CDBDropDownToggle>\\n    <CDBDropDownMenu #menu3=\\\"cdbDropdownMenu\\\" placement=\\\"right\\\">\\n        This is the toogle menu to the right\\n    </CDBDropDownMenu>\\n</CDBDropDown>\\n\")), mdx(\"h2\", null, \"Danger Toggle Bar\"), 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\": \"302px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/b6e4285130a2dfac04f6d559aabda3a2/5f1d2/dropdown4.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\": \"69.88416988416989%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAABJ0AAASdAHeZh94AAAB6UlEQVQ4y61RS08UQRDeX+PRg/Gi68EEDRwEloiCJrrISwOJaIgxMSZeTRQVNUZEOPMbuPkjDIHgymyYR3fP9PT0Plwyj8/uHmZXIzESqeRLVX9d9XVVVwknbKUsy6CRpukfSI7g/gatYwTjODbE/1ihUSqU2+026paFgIfgYQgRhdi3PURCKE4ojsNxXQgRgXMOQigajaY6CzRbre6UpSJIkgSuY8N1iUnWAt9qeyCeB6u+j93dHXzd2galDLZto1b7bvIc2wFlfk9QC2ljjMGy6iCUqgIHjuMea2St0x1Z46DTQahGlVIiVGMz/ar+jn8AdHeFoG410Zs+4tX0GIgz5Fs2ha0mksBHEgYK3Pj4l9h4wQ/PRRz0wBXUEruC8vMyyPhlsOmroLevgFYHe/7O8O/n6lAeTyh+ckShYvjg0QzSdisXjN4/h9t/xhQHT+bhL1ThL07DfzABNjcG/+Ekgsd3ESzOwr9/C/zpAuhUBeR6H9jsNXiVC2D3xs2kRlC8fAa7fAre0HnTqU7UnZCxS/AGz4Hc6FeFo8Z7oxdBbg4okTLcgbPwhstw+k6brtNmIxf88WUT0YcXkOvvEK28QvRJYWXJxHJ1Oec+Lh3evTZ3cvUN5Npb811ScY2NdWQHnXzLJ2k/AU4687PHiGtvAAAAAElFTkSuQmCC')\",\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/b6e4285130a2dfac04f6d559aabda3a2/5f1d2/dropdown4.png\",\n    \"srcSet\": [\"/static/b6e4285130a2dfac04f6d559aabda3a2/a2ead/dropdown4.png 259w\", \"/static/b6e4285130a2dfac04f6d559aabda3a2/5f1d2/dropdown4.png 302w\"],\n    \"sizes\": \"(max-width: 302px) 100vw, 302px\",\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  }), \"<CDBDropDown>\\n    <CDBDropDownToggle color=\\\"danger\\\" [caretDropUp]=true (click)=\\\"menu4.toggleDropdown($event)\\\">\\n        Danger Toggle Bar\\n    </CDBDropDownToggle>\\n    <CDBDropDownMenu #menu4=\\\"cdbDropdownMenu\\\" placement=\\\"top\\\">\\n        This is the toogle menu to the top\\n    </CDBDropDownMenu>\\n</CDBDropDown>\\n\")), mdx(\"h2\", null, \"Success Toggle Bar\"), 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\": \"646px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/ce60d8d9dc4161b379f840d62e0c9d14/27524/dropdown5.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\": \"20.463320463320464%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAABJ0AAASdAHeZh94AAAAy0lEQVQY042Qu2oCQRSGfSm7kEqsfBkbCYiFbxOQoNjkUnlpI4LGTkHB2SLg7mR2ndnb7JedDSg2kgPf+Q/nBufUiqLAcc9ORvG6/+TtsLjh3el+wcdhiUp01VtzTmuDCkPCKEKpED8IkFIS/EjICpbfO+rPbR4GHZqj3oXWuE9j2OXx5Ymt9K4LlVIIIRCex8n3OWtNHMcYY7C5JYgjJscV0+Oamfi6MBebKjcv4yg1fwvduVmWkaYpSZKQ53lVqN5QYq0tlX+Zm/kFP70llOUuhIMAAAAASUVORK5CYII=')\",\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/ce60d8d9dc4161b379f840d62e0c9d14/27524/dropdown5.png\",\n    \"srcSet\": [\"/static/ce60d8d9dc4161b379f840d62e0c9d14/a2ead/dropdown5.png 259w\", \"/static/ce60d8d9dc4161b379f840d62e0c9d14/6b9fd/dropdown5.png 518w\", \"/static/ce60d8d9dc4161b379f840d62e0c9d14/27524/dropdown5.png 646w\"],\n    \"sizes\": \"(max-width: 646px) 100vw, 646px\",\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  }), \"<CDBDropDown>\\n    <CDBDropDownToggle color=\\\"success\\\" [caretDropLeft]=true (click)=\\\"menu5.toggleDropdown($event)\\\">\\n        Success Toggle Bar\\n    </CDBDropDownToggle>\\n    <CDBDropDownMenu #menu5=\\\"cdbDropdownMenu\\\" placement=\\\"left\\\">\\n        This is the toogle menu to the bottom\\n    </CDBDropDownMenu>\\n</CDBDropDown>\\n\")), mdx(\"h2\", null, \"Large DropDown\"), 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\": \"663px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/5c89fc366ea46ba52a65a783da42936f/0786c/dropdown6.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\": \"22.007722007722005%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAABJ0AAASdAHeZh94AAAAw0lEQVQY022PywqDQAxF+3EiltGFVtSN/6ruxMdK/AS7sb6qi/F1a9JaKDRwmCQwJ8llXVfEcYwwDBFF0ZezDoIASZJgWRZQ7PuOf0F94jJNEyzLgqIoEEIwmnaFYRjQdR2qqsLzPPR9zx9oAZLPxDxzvhy9bdsYFrquwwISm6bJItdxYN/sIxfwfR9d16KuH6juFZq247xpGh40DE9a8S2kiUVRIE1TZFl+kCHP80+d8VuWJaSUGMeRRVLOP+ef55LwBXCBC0F68WJ4AAAAAElFTkSuQmCC')\",\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/5c89fc366ea46ba52a65a783da42936f/0786c/dropdown6.png\",\n    \"srcSet\": [\"/static/5c89fc366ea46ba52a65a783da42936f/a2ead/dropdown6.png 259w\", \"/static/5c89fc366ea46ba52a65a783da42936f/6b9fd/dropdown6.png 518w\", \"/static/5c89fc366ea46ba52a65a783da42936f/0786c/dropdown6.png 663w\"],\n    \"sizes\": \"(max-width: 663px) 100vw, 663px\",\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  }), \"<CDBDropDown>\\n    <CDBDropDownToggle color=\\\"dark\\\" size=\\\"lg\\\" (click)=\\\"menu6.toggleDropdown($event)\\\">\\n        Large Dark Toggle Bar\\n    </CDBDropDownToggle>\\n    <CDBDropDownMenu #menu6=\\\"cdbDropdownMenu\\\" placement=\\\"right\\\">\\n        This is the toogle menu to the right\\n    </CDBDropDownMenu>\\n</CDBDropDown>\\n\")), mdx(\"h2\", null, \"Small Dropdown\"), 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\": \"567px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/b75365396c2eb07ce939fca658bd90a6/8710b/dropdown7.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\": \"55.98455598455598%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAABJ0AAASdAHeZh94AAABRUlEQVQoz5VSy07DMBDM93JBHPgCOIDEX3CFHhDwCYjHESQO3NpQWvWZxE5ie51hvW3StI2osDSa2LHHs+ONnPNQqYVmqMTKd0CWGJQFoaoqeO+Fa4T5LsJ6GNHH2wRnR0+4PHkRXBw/4+r0Fee8dnf9JZs8eVhrYRhEtCXeviRwlCuHn77CaMCIVzyOtawtpgXLVSKolEaaKRhjsTtqQXGIA0NK4gPOOTh2Z5mtdSJcGiOutxyuJvuo/GZTKDNJM0YqLvO8YM6wTFJxXl8sgn+5q/MJgkrnIlSH31Vy47ALbcHgoj+I8T0cibCUW3IXMBfMIYJ/OTSc1WQ6w2w2l9zCYaIN2q0TVeTQDYJ3KybmlPPTWjev2fV4Bx2KyzUvSmCsWs7X/+pIG0H9cIt99KAfe1D3Nyg/30HLOYhf3VF33u0+/AXMeVW6NoYqjgAAAABJRU5ErkJggg==')\",\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/b75365396c2eb07ce939fca658bd90a6/8710b/dropdown7.png\",\n    \"srcSet\": [\"/static/b75365396c2eb07ce939fca658bd90a6/a2ead/dropdown7.png 259w\", \"/static/b75365396c2eb07ce939fca658bd90a6/6b9fd/dropdown7.png 518w\", \"/static/b75365396c2eb07ce939fca658bd90a6/8710b/dropdown7.png 567w\"],\n    \"sizes\": \"(max-width: 567px) 100vw, 567px\",\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  }), \"<CDBDropDown>\\n    <CDBDropDownToggle color=\\\"secondary\\\" size=\\\"sm\\\" (click)=\\\"menu7.toggleDropdown($event)\\\">\\n        Small Secondary Toggle Bar\\n    </CDBDropDownToggle>\\n    <CDBDropDownMenu #menu7=\\\"cdbDropdownMenu\\\" placement=\\\"right\\\">\\n        <CDBDropDownItem [header]=true>cold place</CDBDropDownItem>\\n        <CDBDropDownItem [divider]=true></CDBDropDownItem>\\n        <CDBDropDownItem [disabled]=true>\\n            First Item in cold place\\n        </CDBDropDownItem>\\n        <CDBDropDownItem [disabled]=true>second</CDBDropDownItem>\\n        <CDBDropDownItem [toggle]=true>second</CDBDropDownItem>\\n        <CDBDropDownItem>second</CDBDropDownItem>\\n        <CDBDropDownItem>\\n            <CDBLink to=\\\"/alert\\\"> Alert</CDBLink>\\n        </CDBDropDownItem>\\n    </CDBDropDownMenu>\\n</CDBDropDown>\\n\")), mdx(\"h2\", null, \"Disabled Danger Toggle Bar\"), 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\": \"362px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/540b827f9330adacfc696041c3919136/10600/dropdown8.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\": \"28.57142857142857%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAABJ0AAASdAHeZh94AAAA00lEQVQY062ROQvCQBCF9x8JliIIXtFGRPAOamFhglcheOCP0k4UBa/C/yGaNbuKhRjweG6yWovgwMfbmfdmmiX4c5HbfovrfIzraip1MRE6kfqNT24pdtczPC0L5DIaYq+4QZN+0HwENB0CzSpvDYNmQvKdDkoyYYk9yymOb8S9MBI+3LlpHxxgF3CJ5QhYswTWKILVCzD1HEwtBVZVRV905lSNOh5va2C2L2A1FUbM4xy98wOItVmCt8rgvaoIVsA72g+8810dx34Nj/MJ5N+f8gIhsYoLqBwsHwAAAABJRU5ErkJggg==')\",\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/540b827f9330adacfc696041c3919136/10600/dropdown8.png\",\n    \"srcSet\": [\"/static/540b827f9330adacfc696041c3919136/a2ead/dropdown8.png 259w\", \"/static/540b827f9330adacfc696041c3919136/10600/dropdown8.png 362w\"],\n    \"sizes\": \"(max-width: 362px) 100vw, 362px\",\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  }), \"<CDBDropDown>\\n    <CDBDropDownToggle color=\\\"danger\\\" [disabled]=true (click)=\\\"menu8.toggleDropdown($event)\\\">\\n        Disabled Danger Toggle Bar\\n    </CDBDropDownToggle>\\n    <CDBDropDownMenu #menu8=\\\"cdbDropdownMenu\\\" placement=\\\"right\\\">\\n        This is the toogle menu to the right\\n    </CDBDropDownMenu>\\n</CDBDropDown>\\n\")), mdx(\"h2\", null, \"Menu with Header\"), 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\": \"547px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/b57d56f790bebe2387a5764acdb0a3ce/977f7/dropdown9.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\": \"43.24324324324324%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAABJ0AAASdAHeZh94AAABKUlEQVQoz61Su07DMBTNZzHxFbCw8AMswDewgpiAEcRCByRUiTKgCNRKMLAgtaIDA4+SpgmJkzQttR37YFtylEIpQuJaR9e2js+5vraDfwwpJZy76z4Ot9uoHXRxsveA2n4Xx7sdXJ4+QaohhDBEC73+CTqco502Vhbq2Fx2sb7kYkPl1cVzbK3daE9FlKCUYUKpyhTFF4OqkanwsUPgnj2jddFDs/GKVqOHq/oL7m+Dkjwef2CY58hHI2MwK0rBeT2xV0mSBHFM8B5FIIQgUtnr+/A8DzFJpgVFIVFw8R2FKElZlhmRNE3BOTdgjJkW6PmfKtQHgjCEPwiUYGZ6qM1MtvOKuTOrwRpWUD/IIAjx5vmI1LUp4+qB2BQYL+ZXWBW0RLv/27f5BMHCsvclngAbAAAAAElFTkSuQmCC')\",\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/b57d56f790bebe2387a5764acdb0a3ce/977f7/dropdown9.png\",\n    \"srcSet\": [\"/static/b57d56f790bebe2387a5764acdb0a3ce/a2ead/dropdown9.png 259w\", \"/static/b57d56f790bebe2387a5764acdb0a3ce/6b9fd/dropdown9.png 518w\", \"/static/b57d56f790bebe2387a5764acdb0a3ce/977f7/dropdown9.png 547w\"],\n    \"sizes\": \"(max-width: 547px) 100vw, 547px\",\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  }), \"<CDBDropDown>\\n    <CDBDropDownToggle color=\\\"secondary\\\" (click)=\\\"menu9.toggleDropdown($event)\\\">\\n        DropDown\\n    </CDBDropDownToggle>\\n    <CDBDropDownMenu #menu9=\\\"cdbDropdownMenu\\\" placement=\\\"right\\\">\\n        <CDBDropDownItem [header]=true>Cold place</CDBDropDownItem>\\n        <CDBDropDownItem>\\n            First Item in cold place\\n        </CDBDropDownItem>\\n        <CDBDropDownItem [toggle]=true>second</CDBDropDownItem>\\n        <CDBDropDownItem>second</CDBDropDownItem>\\n    </CDBDropDownMenu>\\n</CDBDropDown>\\n\")), mdx(\"h2\", null, \"Menu with Divider\"), 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\": \"535px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/18991dd0ef172f2d6fab98f13b2a7d79/b5245/dropdown10.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\": \"47.87644787644788%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABJ0AAASdAHeZh94AAABFElEQVQoz42S3VKDMBCFeeGqD1D7lL3wxkGLllggOlIJ5mePu4FYWrDjzpzJ5mT5sknIiAhJYZLPBVAwgHsFfAmEUZyTZY++IZGFECDi1ag0P5eHF6DZgsoVvvJbtI+rKPN8B6gb5uUgAcruEh+8ue4YOUwvIsRi6h+Awxpmt0Gbr3F84rzYsHfPXe7OgZ/9AF3kCVKOHSwnLRcd2RnFObFH5E9A5xy8s7zAo/dR4iWdjk5Dp3ShX4+Qye6mN6jqBurtgKqqobWGUgr7skRRvKDrzNBlvOvhkbAk6TACjWHIewQ57m7xyAxL10NX/oYZ0Fo3+2gJ+FeMwA5106BpdLyzpZjCrwLlAaYF0ol4aZzm/wH+AO0BDb8JjWZrAAAAAElFTkSuQmCC')\",\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/18991dd0ef172f2d6fab98f13b2a7d79/b5245/dropdown10.png\",\n    \"srcSet\": [\"/static/18991dd0ef172f2d6fab98f13b2a7d79/a2ead/dropdown10.png 259w\", \"/static/18991dd0ef172f2d6fab98f13b2a7d79/6b9fd/dropdown10.png 518w\", \"/static/18991dd0ef172f2d6fab98f13b2a7d79/b5245/dropdown10.png 535w\"],\n    \"sizes\": \"(max-width: 535px) 100vw, 535px\",\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  }), \"<CDBDropDown>\\n    <CDBDropDownToggle color=\\\"warning\\\" (click)=\\\"menu10.toggleDropdown($event)\\\">\\n        DropDown\\n    </CDBDropDownToggle>\\n    <CDBDropDownMenu #menu10=\\\"cdbDropdownMenu\\\" placement=\\\"left\\\">\\n        <CDBDropDownItem>\\n            <CDBLink to=\\\"/alert\\\">Alert</CDBLink>\\n        </CDBDropDownItem>\\n        <CDBDropDownItem [divider]=true></CDBDropDownItem>\\n        <CDBDropDownItem>\\n            First Item in cold place\\n        </CDBDropDownItem>\\n        <CDBDropDownItem [toggle]=true>second</CDBDropDownItem>\\n        <CDBDropDownItem>second</CDBDropDownItem>\\n    </CDBDropDownMenu>\\n</CDBDropDown>\\n\")), mdx(\"h2\", null, \"Disable Menu Items\"), 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\": \"216px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/2782b30026e8d6c366c17b6624a5de95/7d4ec/dropdown11.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\": \"129.62962962962962%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAaCAYAAAC3g3x9AAAACXBIWXMAABJ0AAASdAHeZh94AAACsklEQVRIx7WVS2gTQRjH52TBiwcR1IO36kHwKPjCV4O1CmohgrSpKKggXvVQtSj4tqkKVXxEqqGeCjaKWlKqZxGS9GWSdtukebTYitU8m91k9+/MrrNJltQ0RAe+zPftfvnN/L+ZfCGKooBZtYNzCPvIZrOQJKkqYwwVyOgskGVZX4Ube7aYGXMZgw0dyGVXIr/wOyWBPCGRiCMajeLb7Bz8Y2OYnZvDdDiMyMwM9b+rsShli2r3V2AsFkNoKgj/uACX241xQcCg2wWXx4Ohka8YGh5GPJkuD/xvkkVRxM9fMaTSaeRyOcQTCVqGJCT6PJlKIZuTKwPG43EEQhFMBALwC5MYHPHRWgq0BOMIhqMUqCwNaJTMr44el7jIZYFsMJlZasah3j+NoM4VXJuEKlEITCEcnUYoHFH9yUAwv7ulSuYJqVQaiWQKC5kMMhmRzqI6Vwwsd22MCy9J8o/5eYRCIYyOeuH1+fV6FgIW3SEPCoFpev/C9KcmCBOI0BrykzY2hEIg6zhF3abanlgkmdEzklhkC2JGN+M7o4l/+qEOVOTqOzYvC+E1eBf8AtuoEy+8A6q99A3ovhp7i2Mt5yOejPThU2RIgyqyBsxRZ9OrcyC3d4Dc2wdi3QvSvqe08XfWOppbD3JjCxreXFGBkpzTgIy8rec8yIMG1HQexmqbBevtp7HG1oRVz5qwruskNthP0efNWPn0GNY+b8GKx2Ysf9QI0mGC+cMt7WAKgdt7LlDgASzrPIRa+xmYHG046GiFua+d+pdg6r2I+t7L2P/2Kupet6K26wRqHh5RFR01Apnkjd1nQW5u1aQwSXd3gdzZSWMT9XfnY+bzme6OXNuMerq4QbKCts/d6kot/R1odrbD4rTC0m/N+yXsOM1tfH8d9z0OrUvRkyb/4k+eb4qN3xhaYz4bmXWEAAAAAElFTkSuQmCC')\",\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/2782b30026e8d6c366c17b6624a5de95/7d4ec/dropdown11.png\",\n    \"srcSet\": [\"/static/2782b30026e8d6c366c17b6624a5de95/7d4ec/dropdown11.png 216w\"],\n    \"sizes\": \"(max-width: 216px) 100vw, 216px\",\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  }), \"<CDBDropDown>\\n    <CDBDropDownToggle color=\\\"success\\\" (click)=\\\"menu11.toggleDropdown($event)\\\">\\n        DropDown\\n    </CDBDropDownToggle>\\n    <CDBDropDownMenu #menu11=\\\"cdbDropdownMenu\\\" placement=\\\"top\\\">\\n        <CDBDropDownItem>Cold place</CDBDropDownItem>\\n        <CDBDropDownItem [disabled]=true>\\n            Disabled\\n        </CDBDropDownItem>\\n        <CDBDropDownItem [disabled]=true>Second</CDBDropDownItem>\\n        <CDBDropDownItem>Last</CDBDropDownItem>\\n    </CDBDropDownMenu>\\n</CDBDropDown>\\n\")), mdx(\"h2\", null, \"Active Menu Items\"), 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\": \"242px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/478b0ecc8cc6f90bdaebf5a9abbc1efa/a1a85/dropdown12.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\": \"118.18181818181819%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAYCAYAAAD6S912AAAACXBIWXMAABJ0AAASdAHeZh94AAAC40lEQVQ4y61UW08TQRTum7765iUx4UWfSQiQchEqCUbBhBgSwuWJdyqUFnhRQBLqJT7wE9B4+w1GiP4CEyMXoRe23WW7BcFYSru783nObnez0IsEneTLOTNz5ptvzswZH/5z8wkhwDAMA7quu/Ys8K5xeHzMyk6xWIRpmi44qBa8sbzW4XEJOcjyz3FMg1S6R3YIWToZmIQi+WlZQTKlYG1tHZK8C0VOY30rDiktU1+FYRKRKdy1ZQp1zy4UivyhBjWdQDq2jowcR0b6gcT2BqT4JrJquhQnLJQRmixN6Mj8BvrfCvQsAz2vgHuvgftvgLslv/8D8OA94R31lwXFAr+O+Vj26VxClg7oiO9TDmZocFzg2lOBy4sC15+ZuBIVuPSExh+a8IUY5E/YsVrOFmNWIkz8BC48osFpoO6FwM2XJuqeC9wge3WRiCI0N1PadErg4mMgW4mQHdPQkadUfI4LrGwLfNwGVpLAp4SNVfK/EFZiAqsxthxLF2jYa4WoeSkm1OQGUnQhh1oKWWUHmrSJfVU6cRmOX/WWhXV8OwW7agZbsQQ9Hdl6PsnkDna1PZAg6DTP4Ni/PhurhGo8Yp4/3a9BaAfrhWPIimw96q/fvqPApVWqVXdTj+9Nl/U5cD26uzCov7eXhSRJSFHF6E5ZlohOw64yUf3IZzmqt1UlNEpfkVHlq6oEZ97NoTcX521eDh/nj5umaRgdHcXQ0BBGRkYwODiI4eFhy2frjDt9tgMDAwgGg8jn8+WEiqIgEAigubkZbW1t6OrqQktLC5qamtDe3o7bpTm/3w8/jbe2tqKxsRF9fX3I5XLlhKqqore3F4HOTvSQ5Z0jkTCmpmcQmhhHKBxBeDKMydAExoJjuNPdjY6ODkv50dFRZYWspKGhwVLCChis9BaNs8+WY1g5x9TX11siTih0EnpwcIBoNIr5+XksLCxYljE3N+f6XnDM7OwslpaWUCgUyivlX5vD8Qd3WqrejktP+gAAAABJRU5ErkJggg==')\",\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/478b0ecc8cc6f90bdaebf5a9abbc1efa/a1a85/dropdown12.png\",\n    \"srcSet\": [\"/static/478b0ecc8cc6f90bdaebf5a9abbc1efa/a1a85/dropdown12.png 242w\"],\n    \"sizes\": \"(max-width: 242px) 100vw, 242px\",\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  }), \"<CDBDropDown>\\n    <CDBDropDownToggle color=\\\"dark\\\" (click)=\\\"menu12.toggleDropdown($event)\\\">\\n        DropDown\\n    </CDBDropDownToggle>\\n    <CDBDropDownMenu #menu12=\\\"cdbDropdownMenu\\\" placement=\\\"top\\\">\\n        <CDBDropDownItem>Cold place</CDBDropDownItem>\\n        <CDBDropDownItem [active]=true>\\n            Active\\n        </CDBDropDownItem>\\n        <CDBDropDownItem [toggle]=true>Second</CDBDropDownItem>\\n        <CDBDropDownItem>Last</CDBDropDownItem>\\n    </CDBDropDownMenu>\\n</CDBDropDown>\\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 Dropdown Bootstrap Modules used\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"import {DropdownModule } from 'cdbangular';\\n\")), mdx(\"p\", null, \"API Reference: Contrast Dropdown Bootstrap Inputs\"), mdx(\"p\", null, \"The table below shows the possible input of the Dropdown 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  }), \"dropup\"), 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  }), \"Trigger dropdown menu above dropdown button\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"dropUp\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"dropleft\"), 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  }), \"Trigger dropdown menu on the left side of dropdown button\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"dropleft\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"dropright\"), 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  }), \"Trigger dropdown menu on the right side of dropdown button\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"dropright\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"toggle\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"function\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Control dropdown on click\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"toggle={handleToggle}\")))), mdx(\"p\", null, \"API Reference: Contrast DropDownItem Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBDropDownItem 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  }), \"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 active state for of the menu item\"), 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  }), \"disable\"), 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  }), \"Disables item and sets its color to light grey\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"disable\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"divider\"), 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  }), \"Places dividing line instead of content\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"divider\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"header\"), 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  }), \"Formats the item as a menu header (grey text, more padding)\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"header\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"toggle\"), 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  }), \"Set to \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"false\"), \" to prevent from closing Dropdown on click\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"toggle=false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"onClick\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"function\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Toggle dropdown on click\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"onClick={handleToggle}\")))), mdx(\"p\", null, \"API Reference: Contrast DropDownMenu Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBDropDownMenu 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  }), \"color\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"primary\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes DropdownMenuItem hover background color, accepts \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"[\\\"primary\\\", \\\"secondary\\\", \\\"success\\\", \\\"dark\\\", \\\"danger\\\", \\\"info\\\", \\\"warning\\\"]\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"color=\\\"secondary\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"disable\"), 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  }), \"Disables item and sets its color to light grey\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"disable=true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"divider\"), 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  }), \"Places dividing line instead of content\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"divider=true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"header\"), 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  }), \"Formats the item as a menu header (grey text, more padding)\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"header=true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"toggle\"), 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  }), \"Set to \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"false\"), \" to prevent from closing Dropdown on click\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"toggle=false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"onClick\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"function\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Toggle dropdown on click\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"onClick={handleToggle}\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"dropup\"), 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  }), \"Trigger dropdown menu above dropdown button\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"dropup=true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"dropdown\"), 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  }), \"Trigger dropdown menu below dropdown button\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"dropdown=true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"dropleft\"), 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  }), \"Trigger dropdown menu on the left side of dropdown button\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"dropleft=true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"dropright\"), 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  }), \"Trigger dropdown menu on the right side of dropdown button\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"dropright=true\")))), mdx(\"p\", null, \"API Reference: Contrast DropDownToggle Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBDropDownToggle 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  }), \"color\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"primary\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes DropdownMenuItem hover background color, accepts \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"[\\\"primary\\\", \\\"secondary\\\", \\\"success\\\", \\\"dark\\\", \\\"danger\\\", \\\"info\\\", \\\"warning\\\"]\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"color=\\\"secondary\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"size\"), 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  }), \"Determines size of the Dropdown button, available parameters: \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"[\\\"lg\\\", \\\"sm\\\"]\"), \" (medium by default)\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"size=\\\"sm\\\"\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"caret\"), 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  }), \"Inserts caret icon inside Dropdown button\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"caret=true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"nav\"), 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  }), \"Props required while using Dropdown within Navbar\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"nav=true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"dropup\"), 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  }), \"Trigger dropdown menu above dropdown button\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"dropup=true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"dropdown\"), 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  }), \"Trigger dropdown menu below dropdown button\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"dropdown=true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"dropleft\"), 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  }), \"Trigger dropdown menu on the left side of dropdown button\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"dropleft=true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"dropright\"), 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  }), \"Trigger dropdown menu on the right side of dropdown button\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"dropright=true\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#dropdown","title":"DropDown","items":[{"url":"#basic-dropdown","title":"Basic DropDown","items":[{"items":[{"items":[{"items":[{"url":"#html","title":"html"}]}]}]}]},{"url":"#primary-toggler-with-caret","title":"Primary Toggler with Caret","items":[{"items":[{"items":[{"items":[{"url":"#html-1","title":"html"}]}]}]}]},{"url":"#secondary-toggle-bar","title":"Secondary Toggle Bar","items":[{"items":[{"items":[{"items":[{"url":"#html-2","title":"html"}]}]}]}]},{"url":"#danger-toggle-bar","title":"Danger Toggle Bar","items":[{"items":[{"items":[{"items":[{"url":"#html-3","title":"html"}]}]}]}]},{"url":"#success-toggle-bar","title":"Success Toggle Bar","items":[{"items":[{"items":[{"items":[{"url":"#html-4","title":"html"}]}]}]}]},{"url":"#large-dropdown","title":"Large DropDown","items":[{"items":[{"items":[{"items":[{"url":"#html-5","title":"html"}]}]}]}]},{"url":"#small-dropdown","title":"Small Dropdown","items":[{"items":[{"items":[{"items":[{"url":"#html-6","title":"html"}]}]}]}]},{"url":"#disabled-danger-toggle-bar","title":"Disabled Danger Toggle Bar","items":[{"items":[{"items":[{"items":[{"url":"#html-7","title":"html"}]}]}]}]},{"url":"#menu-with-header","title":"Menu with Header","items":[{"items":[{"items":[{"items":[{"url":"#html-8","title":"html"}]}]}]}]},{"url":"#menu-with-divider","title":"Menu with Divider","items":[{"items":[{"items":[{"items":[{"url":"#html-9","title":"html"}]}]}]}]},{"url":"#disable-menu-items","title":"Disable Menu Items","items":[{"items":[{"items":[{"items":[{"url":"#html-10","title":"html"}]}]}]}]},{"url":"#active-menu-items","title":"Active Menu Items","items":[{"items":[{"items":[{"items":[{"url":"#html-11","title":"html"}]}]}]}]}]},{"url":"#api","title":"API","items":[{"url":"#contrast-dropdown-bootstrap-modules-used","title":"Contrast Dropdown Bootstrap Modules used"}]}]},"parent":{"__typename":"File","relativePath":"contrast/angular/components/dropdown.md"},"frontmatter":{"metaTitle":"DropDown Component for Contrast Bootstrap Angular","metaDescription":"Angular Bootstrap Dropdown is a toggleable menu embedding additional links or content"}},"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":"336a3aba-2964-51ea-84ec-5d6e7fd9c5b5"}},"staticQueryHashes":["2619113677","2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}