{"componentChunkName":"component---src-templates-docs-js","path":"/docs/contrast/react/components/dropdown","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"9b8e0109-7a61-56fd-8efd-5167cab75717","title":"DropDown","slug":"/contrast/react/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 React\",\n  \"metaDescription\": \"Building a DropDown Component using the Contrast Bootstrap React Package\"\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, \"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(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"dropdown\"\n  }, mdx(\"button\", {\n    className: \"btn btn-dark dropdown-toggle\",\n    type: \"button\",\n    id: \"dropdownMenuButton\",\n    \"data-toggle\": \"dropdown\",\n    \"aria-expanded\": \"false\"\n  }, \"Dark Toggle Bar\"), mdx(\"ul\", {\n    className: \"dropdown-menu\",\n    \"aria-labelledby\": \"dropdownMenuButton\"\n  }, mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, \"This is the toggle menu\"))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBDropDown, CDBDropDownMenu, CDBDropDownToggle, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst DropDown = () => {\\n\\n  return (\\n    <CDBContainer>\\n                <CDBDropDown>\\n                  <CDBDropDownToggle color=\\\"dark\\\" caret>\\n                    Dark Toggle Bar\\n                  </CDBDropDownToggle>\\n                  <CDBDropDownMenu>\\n                    This is the toogle menu\\n                  </CDBDropDownMenu>\\n                </CDBDropDown>\\n    </CDBContainer>\\n  );\\n};\\n\\nexport default DropDown;\\n\")), mdx(\"h2\", null, \"Primary Toggler with Caret\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"dropdown\"\n  }, mdx(\"button\", {\n    className: \"btn btn-primary dropdown-toggle\",\n    type: \"button\",\n    id: \"dropdownMenuButton\",\n    \"data-toggle\": \"dropdown\",\n    \"aria-expanded\": \"false\"\n  }, \"Primary Toggle Bar\"), mdx(\"ul\", {\n    className: \"dropdown-menu\",\n    \"aria-labelledby\": \"dropdownMenuButton\"\n  }, mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, \"This is the toggle menu with caret\"))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBDropDown, CDBDropDownMenu, CDBDropDownToggle, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst DropDown = () => {\\n\\n  return (\\n    <CDBContainer>\\n                <CDBDropDown>\\n                  <CDBDropDownToggle color=\\\"primary\\\" caret dropdown>\\n                    Primary Toggle Bar\\n                  </CDBDropDownToggle>\\n                  <CDBDropDownMenu>\\n                    This is the toogle menu with caret\\n                  </CDBDropDownMenu>\\n                </CDBDropDown>\\n    </CDBContainer>\\n  );\\n};\\n\\nexport default DropDown;\\n\")), mdx(\"h2\", null, \"Secondary Toggle Bar\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"dropdown dropright\"\n  }, mdx(\"button\", {\n    className: \"btn btn-secondary dropdown-toggle\",\n    type: \"button\",\n    id: \"dropdownMenuButton\",\n    \"data-toggle\": \"dropdown\",\n    \"aria-expanded\": \"false\"\n  }, \"Secondary Toggle Bar as Nav\"), mdx(\"ul\", {\n    className: \"dropdown-menu\",\n    \"aria-labelledby\": \"dropdownMenuButton\"\n  }, mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, \"This is the toggle menu to the right\"))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBDropDown, CDBDropDownMenu, CDBDropDownToggle, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst DropDown = () => {\\n\\n  return (\\n    <CDBContainer>\\n                <CDBDropDown>\\n                  <CDBDropDownToggle color=\\\"secondary\\\" caret dropright>\\n                    Secondary Toggle Bar as nav\\n                  </CDBDropDownToggle>\\n                  <CDBDropDownMenu dropright>\\n                    This is the toogle menu to the right\\n                  </CDBDropDownMenu>\\n                </CDBDropDown>\\n    </CDBContainer>\\n  );\\n};\\n\\nexport default DropDown;\\n\")), mdx(\"h2\", null, \"Danger Toggle Bar\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"dropdown dropup\"\n  }, mdx(\"button\", {\n    className: \"btn btn-danger dropdown-toggle\",\n    type: \"button\",\n    id: \"dropdownMenuButton\",\n    \"data-toggle\": \"dropdown\",\n    \"aria-expanded\": \"false\"\n  }, \"Danger Toggle Bar\"), mdx(\"ul\", {\n    className: \"dropdown-menu\",\n    \"aria-labelledby\": \"dropdownMenuButton\"\n  }, mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, \"This is the toggle menu to the top\"))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBDropDown, CDBDropDownMenu, CDBDropDownToggle, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst DropDown = () => {\\n\\n  return (\\n    <CDBContainer>\\n                <CDBDropDown style={{ margin: \\\"30px 0\\\" }}>\\n                  <CDBDropDownToggle color=\\\"danger\\\" caret dropup>\\n                    Danger Toggle Bar\\n                  </CDBDropDownToggle>\\n                  <CDBDropDownMenu dropup>\\n                    This is the toogle menu to the top\\n                  </CDBDropDownMenu>\\n                </CDBDropDown>\\n    </CDBContainer>\\n  );\\n};\\n\\nexport default DropDown;\\n\")), mdx(\"h2\", null, \"Success Toggle Bar\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"dropdown dropleft\"\n  }, mdx(\"button\", {\n    className: \"btn btn-success dropdown-toggle\",\n    type: \"button\",\n    id: \"dropdownMenuButton\",\n    \"data-toggle\": \"dropdown\",\n    \"aria-expanded\": \"false\"\n  }, \"Success Toggle Bar\"), mdx(\"ul\", {\n    className: \"dropdown-menu\",\n    \"aria-labelledby\": \"dropdownMenuButton\"\n  }, mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, \"This is the toggle menu to the left\"))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBDropDown, CDBDropDownMenu, CDBDropDownToggle, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst DropDown = () => {\\n\\n  return (\\n    <CDBContainer>\\n                <CDBDropDown style={{ margin: \\\"30px 0\\\" }}>\\n                  <CDBDropDownToggle color=\\\"success\\\" caret dropleft>\\n                    Success Toggle Bar\\n                  </CDBDropDownToggle>\\n                  <CDBDropDownMenu dropleft>\\n                    This is the toggle menu to the left\\n                  </CDBDropDownMenu>\\n                </CDBDropDown>\\n    </CDBContainer>\\n  );\\n};\\n\\nexport default DropDown;\\n\")), mdx(\"h2\", null, \"Large DropDown\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"dropdown\"\n  }, mdx(\"button\", {\n    className: \"btn btn-dark btn-lg dropdown-toggle\",\n    type: \"button\",\n    id: \"dropdownMenuButton\",\n    \"data-toggle\": \"dropdown\",\n    \"aria-expanded\": \"false\"\n  }, \"Large Dark Toggle Bar\"), mdx(\"ul\", {\n    className: \"dropdown-menu\",\n    \"aria-labelledby\": \"dropdownMenuButton\"\n  }, mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, \"This is the toggle menu to the right\"))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBDropDown, CDBDropDownMenu, CDBDropDownToggle, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst DropDown = () => {\\n\\n  return (\\n    <CDBContainer>\\n                <CDBDropDown>\\n                  <CDBDropDownToggle color=\\\"dark\\\" size=\\\"lg\\\">\\n                    Large Dark Toggle Bar\\n                  </CDBDropDownToggle>\\n                  <CDBDropDownMenu dropright>\\n                    This is the toogle menu to the right\\n                  </CDBDropDownMenu>\\n                </CDBDropDown>\\n    </CDBContainer>\\n  );\\n};\\n\\nexport default DropDown;\\n\")), mdx(\"h2\", null, \"Small Dropdown\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"dropdown dropright\"\n  }, mdx(\"button\", {\n    className: \"btn btn-secondary btn-sm dropdown-toggle\",\n    type: \"button\",\n    id: \"dropdownMenuButton\",\n    \"data-toggle\": \"dropdown\",\n    \"aria-expanded\": \"false\"\n  }, \"small secondary toggle bar\"), mdx(\"ul\", {\n    className: \"dropdown-menu\",\n    \"aria-labelledby\": \"dropdownMenuButton\"\n  }, mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, \"cold place\")), mdx(\"div\", {\n    className: \"dropdown-divider\"\n  }), mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, \"First Item in Cold Place\")), mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, \"second\")), mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, \"second\")), mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, \"second\")), mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, mdx(\"a\", {\n    href: \"/docs/contrast/react/components/alert\"\n  }, \"Alert\")))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBDropDown, CDBDropDownItem, CDBDropDownMenu, CDBDropDownToggle, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst DropDown = () => {\\n\\n  return (\\n    <CDBContainer>\\n                <CDBDropDown>\\n                  <CDBDropDownToggle color=\\\"secondary\\\" size=\\\"sm\\\">\\n                    small secondary toggle bar\\n                  </CDBDropDownToggle>\\n                  <CDBDropDownMenu dropright>\\n                    <CDBDropDownItem header>cold place</CDBDropDownItem>\\n                    <CDBDropDownItem divider />\\n                    <CDBDropDownItem disabled>\\n                      First Item in cold place\\n                    </CDBDropDownItem>\\n                    <CDBDropDownItem disabled>second</CDBDropDownItem>\\n                    <CDBDropDownItem toggle>second</CDBDropDownItem>\\n                    <CDBDropDownItem>second</CDBDropDownItem>\\n                    <CDBDropDownItem>\\n                      <CDBLink to=\\\"/alert\\\"> Alert</CDBLink>\\n                    </CDBDropDownItem>\\n                  </CDBDropDownMenu>\\n                </CDBDropDown>\\n    </CDBContainer>\\n  );\\n};\\n\\nexport default DropDown;\\n\")), mdx(\"h2\", null, \"Disabled Danger Toggle Bar\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"dropdown\"\n  }, mdx(\"button\", {\n    className: \"btn btn-danger dropdown-toggle\",\n    type: \"button\",\n    id: \"dropdownMenuButton\",\n    \"data-toggle\": \"dropdown\",\n    \"aria-expanded\": \"false\"\n  }, \"Disabled Danger Toggle Bar\"))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBDropDown, CDBDropDownMenu, CDBDropDownToggle, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst DropDown = () => {\\n\\n  return (\\n    <CDBContainer>\\n                <CDBDropDown>\\n                  <CDBDropDownToggle color=\\\"danger\\\" disabled>\\n                    Disabled Danger Toggle Bar\\n                  </CDBDropDownToggle>\\n                  <CDBDropDownMenu dropright>\\n                    This is the toogle menu to the right\\n                  </CDBDropDownMenu>\\n                </CDBDropDown>\\n    </CDBContainer>\\n  );\\n};\\n\\nexport default DropDown;\\n\")), mdx(\"h2\", null, \"Menu with Header\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"dropdown\"\n  }, mdx(\"button\", {\n    className: \"btn btn-secondary dropdown-toggle\",\n    type: \"button\",\n    id: \"dropdownMenuButton\",\n    \"data-toggle\": \"dropdown\",\n    \"aria-expanded\": \"false\"\n  }, \"Dropdown\"), mdx(\"ul\", {\n    className: \"dropdown-menu\",\n    \"aria-labelledby\": \"dropdownMenuButton\"\n  }, mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-header\"\n  }, \"Cold place\")), mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, \"First Item in Cold Place\")), mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, \"second\")), mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, \"second\"))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBDropDown, CDBDropDownMenu, CDBDropDownItem, CDBDropDownToggle, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst DropDown = () => {\\n\\n  return (\\n    <CDBContainer>\\n                <CDBDropDown>\\n                  <CDBDropDownToggle color=\\\"secondary\\\">\\n                    DropDown\\n                  </CDBDropDownToggle>\\n                  <CDBDropDownMenu dropright>\\n                    <CDBDropDownItem header>Cold place</CDBDropDownItem>\\n                    <CDBDropDownItem>\\n                      First Item in cold place\\n                    </CDBDropDownItem>\\n                    <CDBDropDownItem toggle>second</CDBDropDownItem>\\n                    <CDBDropDownItem>second</CDBDropDownItem>\\n                  </CDBDropDownMenu>\\n                </CDBDropDown>\\n    </CDBContainer>\\n  );\\n};\\n\\nexport default DropDown;\\n\")), mdx(\"h2\", null, \"Menu with Divider\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"dropdown dropleft\"\n  }, mdx(\"button\", {\n    className: \"btn btn-warning text-dark dropdown-toggle\",\n    type: \"button\",\n    id: \"dropdownMenuButton\",\n    \"data-toggle\": \"dropdown\",\n    \"aria-expanded\": \"false\"\n  }, \"Dropdown\"), mdx(\"ul\", {\n    className: \"dropdown-menu\",\n    \"aria-labelledby\": \"dropdownMenuButton\"\n  }, mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, mdx(\"a\", {\n    href: \"/docs/contrast/react/components/alert\"\n  }, \"Alert\"))), mdx(\"div\", {\n    className: \"dropdown-divider\"\n  }), mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, \"First Item in Cold Place\")), mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, \"second\")), mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, \"second\"))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBDropDown, CDBDropDownItem, CDBDropDownMenu, CDBDropDownToggle, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst DropDown = () => {\\n\\n  return (\\n    <CDBContainer>\\n                <CDBDropDown>\\n                  <CDBDropDownToggle color=\\\"warning\\\">\\n                    DropDown\\n                  </CDBDropDownToggle>\\n                  <CDBDropDownMenu dropleft>\\n                    <CDBDropDownItem>\\n                      <CDBLink to=\\\"/alert\\\"> Alert</CDBLink>\\n                    </CDBDropDownItem>\\n                    <CDBDropDownItem divider />\\n                    <CDBDropDownItem>\\n                      First Item in cold place\\n                    </CDBDropDownItem>\\n                    <CDBDropDownItem toggle>second</CDBDropDownItem>\\n                    <CDBDropDownItem>second</CDBDropDownItem>\\n                  </CDBDropDownMenu>\\n                </CDBDropDown>\\n    </CDBContainer>\\n  );\\n};\\n\\nexport default DropDown;\\n\")), mdx(\"h2\", null, \"Disabled Menu Items\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"dropdown dropup\"\n  }, mdx(\"button\", {\n    className: \"btn btn-success dropdown-toggle\",\n    type: \"button\",\n    id: \"dropdownMenuButton\",\n    \"data-toggle\": \"dropdown\",\n    \"aria-expanded\": \"false\"\n  }, \"Dropdown\"), mdx(\"ul\", {\n    className: \"dropdown-menu\",\n    \"aria-labelledby\": \"dropdownMenuButton\"\n  }, mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, \"Cold place\")), mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item disabled\"\n  }, \"Disabled\")), mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, \"Second\")), mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, \"Last\"))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBDropDown, CDBDropDownItem, CDBDropDownMenu, CDBDropDownToggle, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst DropDown = () => {\\n\\n  return (\\n    <CDBContainer>\\n                <CDBDropDown>\\n                  <CDBDropDownToggle color=\\\"success\\\">\\n                    DropDown\\n                  </CDBDropDownToggle>\\n                  <CDBDropDownMenu dropup>\\n                    <CDBDropDownItem>Cold place</CDBDropDownItem>\\n                    <CDBDropDownItem disabled>\\n                      Disabled\\n                    </CDBDropDownItem>\\n                    <CDBDropDownItem disabled>Second</CDBDropDownItem>\\n                    <CDBDropDownItem>Last</CDBDropDownItem>\\n                  </CDBDropDownMenu>\\n                </CDBDropDown>\\n    </CDBContainer>\\n  );\\n};\\n\\nexport default DropDown;\\n\")), mdx(\"h2\", null, \"Active Menu Items\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"dropdown dropup\"\n  }, mdx(\"button\", {\n    className: \"btn btn-dark dropdown-toggle\",\n    type: \"button\",\n    id: \"dropdownMenuButton\",\n    \"data-toggle\": \"dropdown\",\n    \"aria-expanded\": \"false\"\n  }, \"Dropdown\"), mdx(\"ul\", {\n    className: \"dropdown-menu\",\n    \"aria-labelledby\": \"dropdownMenuButton\"\n  }, mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, \"Cold place\")), mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item active\"\n  }, \"Active\")), mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, \"Second\")), mdx(\"li\", null, mdx(\"span\", {\n    className: \"dropdown-item\"\n  }, \"Last\"))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBDropDown, CDBDropDownItem, CDBDropDownMenu, CDBDropDownToggle, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst DropDown = () => {\\n\\n  return (\\n    <CDBContainer>\\n                <CDBDropDown>\\n                  <CDBDropDownToggle color=\\\"dark\\\">\\n                    DropDown\\n                  </CDBDropDownToggle>\\n                  <CDBDropDownMenu dropup>\\n                    <CDBDropDownItem>Cold place</CDBDropDownItem>\\n                    <CDBDropDownItem active>\\n                      Active\\n                    </CDBDropDownItem>\\n                    <CDBDropDownItem toggle>Second</CDBDropDownItem>\\n                    <CDBDropDownItem>Last</CDBDropDownItem>\\n                  </CDBDropDownMenu>\\n                </CDBDropDown>\\n    </CDBContainer>\\n  );\\n};\\n\\nexport default DropDown;\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"In this section you will find advanced information about the DropDown component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.\"), mdx(\"h2\", null, \"Contrast DropDown Import Statement\"), mdx(\"p\", null, \"You need to import the Contrast DropDown component first before using it.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import { CDBDropDown, CDBDropDownMenu, CDBDropDownItem, CDBDropDownToggle } from \\\"cdbreact\\\";\\n\")), mdx(\"p\", null, \"API Reference: Contrast DropDown Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBDropDown 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  }), \"className\"), 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  }), \"<CDBDropDown className=\\\"myClass\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"span\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes default dropdown tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDropDown tag=\\\"p\\\" ... />\")), 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  }), \"<CDBDropDown 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  }), \"<CDBDropDown 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  }), \"<CDBDropDown 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  }), \"<CDBDropDown 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  }), \"className\"), 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  }), \"<CDBDropDownItem className=\\\"myClass\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"button\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes default dropdown tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDropDownItem tag=\\\"button\\\" ... />\")), 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  }), \"<CDBDropDownItem active .../>\")), 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  }), \"<CDBDropDownItem 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  }), \"<CDBDropDownItem 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  }), \"<CDBDropDownItem 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  }), \"<CDBDropDownItem 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  }), \"<CDBDropDownItem 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  }), \"className\"), 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  }), \"<CDBDropDownMenu className=\\\"myClass\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"span\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes default dropdown tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDropDownMenu tag=\\\"button\\\" ... />\")), 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  }), \"<CDBDropDownMenu 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  }), \"<CDBDropDownMenu 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  }), \"<CDBDropDownMenu 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  }), \"<CDBDropDownMenu 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  }), \"<CDBDropDownMenu 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  }), \"<CDBDropDownMenu 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  }), \"<CDBDropDownMenu dropup .../>\")), 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  }), \"<CDBDropDownMenu dropdown .../>\")), 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  }), \"<CDBDropDownMenu 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  }), \"<CDBDropDownMenu dropright .../>\")))), 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  }), \"className\"), 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  }), \"<CDBDropDownToggle className=\\\"myClass\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"button\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes default dropdown tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBDropDownToggle tag=\\\"button\\\" ... />\")), 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  }), \"<CDBDropDownToggle 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  }), \"<CDBDropDownToggle 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  }), \"<CDBDropDownToggle caret .../>\")), 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  }), \"<CDBDropDownToggle nav .../>\")), 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  }), \"<CDBDropDownToggle dropup .../>\")), 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  }), \"<CDBDropDownToggle dropdown .../>\")), 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  }), \"<CDBDropDownToggle 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  }), \"<CDBDropDownToggle dropright .../>\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#dropdown","title":"DropDown","items":[{"url":"#basic-dropdown","title":"Basic DropDown"},{"url":"#primary-toggler-with-caret","title":"Primary Toggler with Caret"},{"url":"#secondary-toggle-bar","title":"Secondary Toggle Bar"},{"url":"#danger-toggle-bar","title":"Danger Toggle Bar"},{"url":"#success-toggle-bar","title":"Success Toggle Bar"},{"url":"#large-dropdown","title":"Large DropDown"},{"url":"#small-dropdown","title":"Small Dropdown"},{"url":"#disabled-danger-toggle-bar","title":"Disabled Danger Toggle Bar"},{"url":"#menu-with-header","title":"Menu with Header"},{"url":"#menu-with-divider","title":"Menu with Divider"},{"url":"#disabled-menu-items","title":"Disabled Menu Items"},{"url":"#active-menu-items","title":"Active Menu Items"}]},{"url":"#api","title":"API","items":[{"url":"#contrast-dropdown-import-statement","title":"Contrast DropDown Import Statement"}]}]},"parent":{"__typename":"File","relativePath":"contrast/react/components/dropdown.mdx"},"frontmatter":{"metaTitle":"DropDown Component for Contrast Bootstrap React","metaDescription":"Building a DropDown Component using the Contrast Bootstrap React Package"}},"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":"9b8e0109-7a61-56fd-8efd-5167cab75717"}},"staticQueryHashes":["2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}