{"componentChunkName":"component---src-templates-blog-js","path":"/blog/bootstrap-5-navbar-using-contrast","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares"}},"mdx":{"id":"4ae17230-17c8-57ab-90c0-9f2cef35823c","excerpt":"A navigation bar, which is often called a navbar, is one of, if not the most important, component or element of a website. \nThis is so because it usually is the…","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\": \"How To Create A Beautiful Navbar Using Bootstrap And Contrast\",\n  \"date\": \"2021-01-20T02:16:04+01:00\",\n  \"metaTitle\": \"How To Create A Beautiful Navbar Using Bootstrap 5 And Contrast\",\n  \"metaDescription\": \"This article aims to describe, step by step, how to build a functional and beautiful navbar using bootstrap 5 and a cool new UI kit called Contrast. A navigation bar, which is often called a navbar, is one of, if not the most important, component or element of a website.\",\n  \"type\": \"blog\",\n  \"author\": \"Tobi Osimosu\",\n  \"role\": \"Frontend Developer\",\n  \"authorImage\": \"/blog/author_tobi.png\",\n  \"image\": \"/blog/images/bootstrap-navbar-with-contrast.png\",\n  \"tags\": [\"bootstrap\", \"bootstrap 4\", \"bootstrap navbar\"]\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(\"p\", null, \"A navigation bar, which is often called a navbar, is one of, if not the most important, component or element of a website.\\nThis is so because it usually is the first thing a person searches for when they\\u2019re on a website as it lets them properly navigate through the website because it links to the other pages the website has to offer.\"), mdx(\"br\", null), mdx(\"p\", null, \"A poorly constructed navigation bar or navbar heavily impactsof the overall experience a person gets from using a website whereas A BEAUTIFUL NAVBAR makes the experience of using a website a pleasant and enjoyable one.\"), mdx(\"br\", null), mdx(\"p\", null, \"This article aims to describe, step by step, how to build a functional and beautiful navbar using bootstrap 5 and a cool new UI kit called Contrast.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"FIRST OFF:\")), mdx(\"p\", null, \"Let me refresh our minds on what bootstrap is. Bootstrap is one of, if not the most popular CSS Framework/front-end open source toolkit for developing responsive and mobile-first websites. \"), mdx(\"p\", null, \"It features Sass variables, mixins, a responsive grid system, extensive prebuilt components, and powerful JavaScript plugins. Bootstraps newest version is Bootstrap 5. \"), mdx(\"p\", null, \"You can say Bootstrap helps you build responsive websites quickly. Now I\\u2019m sure at this point you might be asking yourself, \\u201CWhat is Contrast?\\u201D Do not worry, the wait is over.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"CONTRAST\")), mdx(\"p\", null, \"Contrast or Contrast Design Bootstrap is an elegant bootstrap UI kit featuring over 2000+ basic components. Contrast can be integrated with any project to build mobile first, responsive and elegant websites and webapps. \"), mdx(\"p\", null, \"With Contrast installed, installing Bootstrap no longer becomes a necessity because Bootstrap is deeply integrated into its core. Plus, Contrast brings its 2000+ custom components to the table, making development smooth and elegant. Contrast, which was created by Devwares is available for the following technologies;\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Vanilla JS \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://www.devwares.com/docs/contrast/javascript/components/alert\"\n  }), \"(contrast-bootstrap)\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"React \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://www.devwares.com/docs/contrast/react/installation\"\n  }), \"(cdbreact)\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Angular \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://www.devwares.com/docs/contrast/angular/installation\"\n  }), \"(ng-cdbangular)\"))), mdx(\"p\", null, \"Devwares also designed a Pro version of Contrast to give you accessto more features and improvements. \"), mdx(\"p\", null, \"Click \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.devwares.com/resources#premium\"\n  }), \"here\"), \" to check it out.\"), mdx(\"p\", null, \"We will be using the \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.devwares.com/docs/contrast/angular/installation\"\n  }), \"angular\"), \" version of contrast in this tutorial to create the navbar. Tutorials for other versions can also be found on the docs \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.devwares.com/docs/contrast/javascript/components/alert\"\n  }), \"here\"), \" \"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Now that all that\\u2019s been taken care off, let\\u2019s find out how to create a beautiful navbar using bootstrap 5 and contrast (Angular).\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"STEP 1\"), \"\\nInstall Contrast\\nUsing NPM: \"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"npm install --save ng-cdbangular\\n\")), mdx(\"p\", null, \"Using Yarn:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \" yarn add ng-cdbangular\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"STEP 2\"), \"\\nAdd bootstrap-css-only to angular.json\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"\\\"styles\\\": [  \\\"node_modules/bootstrap-css-only/css/bootstrap.min.css\\\"]\\n\")), mdx(\"p\", null, \"STEP 3\\nImport navbar module in app.module.ts\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import { NavbarModule } from 'ng-cdbangular';\\n@NgModule({  imports: [ NavbarModule ]})\\n\")), mdx(\"p\", null, \"NB, for our example, we will be needing some other components so our final app.module.ts file will look like this;\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"    import { \\n    NavbarModule, \\n    CollapseModule,  \\n    ButtonModule, \\n    DropdownModule } from 'ng-cdbangular';\\n    @NgModule({  \\n        imports: [ NavbarModule, CollapseModule,  ButtonModule,  DropdownModule ]\\n    })\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Note:\"), \" instead of importing one component at a time, contrast has a module called CDBFreeModule which contains the imports of all the custom components contrast has to offer.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import { CDBFreeModule } from 'ng-cdbangular';\\n@NgModule({  imports: [CDBFreeModule]})\\n\")), mdx(\"p\", null, \"Easy right? Now let\\u2019s dive right into the view.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"HTML VIEW\")), mdx(\"p\", null, \"A basic Contrast navbar looks like this:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"<CDBNavbar style=\\\"background: black; color: #f4f4f4\\\">   \\n <a href=\\\"\\\">link</a>\\n </CDBNavbar>\\n\")), 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\": \"939px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/b891db4bf761c5113c1b3a5003a8db7d/eafa0/navbar1.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\": \"6.94980694980695%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAACXBIWXMAABcSAAAXEgFnn9JSAAAAJElEQVQI12Po7J7wPzsn939BQcH//Px8sjBIb1ZW1v+urq7/AE3/LofrOdgYAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Bootstrap Navbar\",\n    \"title\": \"Bootstrap Navbar\",\n    \"src\": \"/static/b891db4bf761c5113c1b3a5003a8db7d/eafa0/navbar1.png\",\n    \"srcSet\": [\"/static/b891db4bf761c5113c1b3a5003a8db7d/a2ead/navbar1.png 259w\", \"/static/b891db4bf761c5113c1b3a5003a8db7d/6b9fd/navbar1.png 518w\", \"/static/b891db4bf761c5113c1b3a5003a8db7d/eafa0/navbar1.png 939w\"],\n    \"sizes\": \"(max-width: 939px) 100vw, 939px\",\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(\"p\", null, \"This looks... okay, but I know we can do better. Let\\u2019s add the CDBNavBrand component for brand logos and the likes\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"<CDBNavbar style=\\\"background: black; color: #f4f4f4\\\">\\n<CDBNavBrand href=\\\"/\\\">\\n<img src=\\\"\\\" alt=\\\"Brand\\\" class=\\\"img-fluid\\\" width=\\\"30\\\">\\n</CDBNavBrand>\\n</CDBNavbar>\\n\")), mdx(\"p\", null, \"Note that the contents of CDBNavBrand can be anything you want eg: \"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<h4>Brand<h4>\")), 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\": \"939px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/77cabec0983d2745086c511fffc26220/eafa0/navbar2.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\": \"8.494208494208493%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAABcSAAAXEgFnn9JSAAAAK0lEQVQI16XDgQkAQAgCwDYMAlP3H8T/HTq4khxJ57YzM6nFBvsDpyTT3Xljn1BPClHvlQAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Bootstrap Navbar\",\n    \"title\": \"Bootstrap Navbar\",\n    \"src\": \"/static/77cabec0983d2745086c511fffc26220/eafa0/navbar2.png\",\n    \"srcSet\": [\"/static/77cabec0983d2745086c511fffc26220/a2ead/navbar2.png 259w\", \"/static/77cabec0983d2745086c511fffc26220/6b9fd/navbar2.png 518w\", \"/static/77cabec0983d2745086c511fffc26220/eafa0/navbar2.png 939w\"],\n    \"sizes\": \"(max-width: 939px) 100vw, 939px\",\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(\"p\", null, \"Now, Let\\u2019s make the navabr responsive.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"<CDBNavbar style=\\\"background: black; color: #f4f4f4\\\" [dark]=true expand=\\\"lg\\\">\\n<CDBNavBrand href=\\\"/\\\">   \\n <img src=\\\"\\\"   alt=\\\"Brand\\\" class=\\\"img-fluid\\\" width=\\\"30\\\">\\n </CDBNavBrand> \\n <CDBNavToggle (click)=\\\"myNav.toggleCollapse()\\\">\\n </CDBNavToggle>\\n <CDBCollapse #myNav class=\\\"w-100\\\" [navbar]=true expand=\\\"lg\\\">  \\n    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut, minus?\\n</CDBCollapse>\\n</CDBNavbar>\\n\")), 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\": \"939px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/ba4db9df1955866a7382a7d1d48b83f8/eafa0/navbar3.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\": \"7.3359073359073355%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAABCAYAAADeko4lAAAACXBIWXMAABcSAAAXEgFnn9JSAAAAQUlEQVQI11XLsQ3AQAhD0cxHBTQUBragjZLJfZfrUjx9yZKv97lp7sysLVlVBHD66e6zA8mIoKrSzH58/0WEM8MFhNwpFDLsVl0AAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Bootstrap Navbar\",\n    \"title\": \"Bootstrap Navbar\",\n    \"src\": \"/static/ba4db9df1955866a7382a7d1d48b83f8/eafa0/navbar3.png\",\n    \"srcSet\": [\"/static/ba4db9df1955866a7382a7d1d48b83f8/a2ead/navbar3.png 259w\", \"/static/ba4db9df1955866a7382a7d1d48b83f8/6b9fd/navbar3.png 518w\", \"/static/ba4db9df1955866a7382a7d1d48b83f8/eafa0/navbar3.png 939w\"],\n    \"sizes\": \"(max-width: 939px) 100vw, 939px\",\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(\"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\": \"675px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/a71898ab8c59d5bd76503447c88e8d36/23296/navbar4.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\": \"13.513513513513512%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAABcSAAAXEgFnn9JSAAAAPElEQVQI163LMQ7AIAxDUS6fJY6Iw9Ae10TiBi2Wnjz9ATMlIG/4ISLk7ho9XQVOrecVSbHq/AfVbWZqAz+9fhq3SkBfAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Bootstrap Navbar\",\n    \"title\": \"Bootstrap Navbar\",\n    \"src\": \"/static/a71898ab8c59d5bd76503447c88e8d36/23296/navbar4.png\",\n    \"srcSet\": [\"/static/a71898ab8c59d5bd76503447c88e8d36/a2ead/navbar4.png 259w\", \"/static/a71898ab8c59d5bd76503447c88e8d36/6b9fd/navbar4.png 518w\", \"/static/a71898ab8c59d5bd76503447c88e8d36/23296/navbar4.png 675w\"],\n    \"sizes\": \"(max-width: 675px) 100vw, 675px\",\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(\"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\": \"675px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/59aa19cad26394ba889bf73d763e252a/23296/navbar5.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\": \"17.760617760617762%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAABcSAAAXEgFnn9JSAAAAkElEQVQY06WMwQrCMBBEF9F0k2xSsPjjFeyhSW42VkH8wzFJ0Q/Qw+PNLMPSfbki5/wzS2G9Zbyea+EB8n4AEf3FYUfoHeN0tCAZBogx0AVjDZRScCJgZog4OOegNcP3vmVrBZp1uWl0qiuZv4/VvjjMM2KKCCEgxIC59rj16k9OKbVc3bZh21ZfpgnjeG5+A+kynhTWV/BrAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Bootstrap Navbar\",\n    \"title\": \"Bootstrap Navbar\",\n    \"src\": \"/static/59aa19cad26394ba889bf73d763e252a/23296/navbar5.png\",\n    \"srcSet\": [\"/static/59aa19cad26394ba889bf73d763e252a/a2ead/navbar5.png 259w\", \"/static/59aa19cad26394ba889bf73d763e252a/6b9fd/navbar5.png 518w\", \"/static/59aa19cad26394ba889bf73d763e252a/23296/navbar5.png 675w\"],\n    \"sizes\": \"(max-width: 675px) 100vw, 675px\",\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(\"p\", null, \"This example introduced more custom components. Let\\u2019s go through them one step at a time.\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"The expand prop was added to the CDBNavbar component. expand=\\\"lg\\\" tells the navbar to collapse when the viewport width is < 992px. \")), mdx(\"p\", null, \"Acceptable breakpoints include:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"sm = collapse when the viewport width is < 576px\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"md = collapse when the viewport width is < 768px\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"lg = collapse when the viewport width is < 992px\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"xl = collapse when the viewport width is < 1200px\")), mdx(\"p\", null, \"[dark]\", \"=true was added because the background color is dark.\\n\", \"[light]\", \"=true should be used when a lighter background is used.\"), mdx(\"ol\", {\n    \"start\": 2\n  }, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"The CDBNavToggle component was added. This is Contrasts navigation bar toggler. It becomes visible only when the viewport width is lower than the specified breakpoint you put in the \\u201Cexpand\\u201D prop.\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"A click event handler was added to CDBNavToggle component:(click)=\\\"myNav.toggleCollapse()\\\". CDBNavToggle is accessing the toggleCollapse() function present in CDBCollapse in order to collapse the navigation bar programmatically through the local reference \\u201CmyNav\\u201D.\"))), mdx(\"p\", null, \"Note: an image prop can be added to the CDBNavToggle in place on the default toggler eg: \"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \" <CDBNavToggle (click)=\\\"myNav.toggleCollapse()\\\" image=\\\"\\\"></CDBNavToggle>\\n\")), 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\": \"675px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/5f3153390346ea1265ea221556df3ed1/23296/navbar6.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\": \"13.8996138996139%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAABcSAAAXEgFnn9JSAAAAUUlEQVQI12NYvnDR/zUrlv9fvmLF/xUU4I0bNwLxpv8MQAAkGP9DaPJxcpTPfxMD7f8M5XVV/xtaW/7X1tT8r62tJQvX1NT+nzJ54v8J/f3/AZrIgrOcu1CqAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Bootstrap Navbar\",\n    \"title\": \"Bootstrap Navbar\",\n    \"src\": \"/static/5f3153390346ea1265ea221556df3ed1/23296/navbar6.png\",\n    \"srcSet\": [\"/static/5f3153390346ea1265ea221556df3ed1/a2ead/navbar6.png 259w\", \"/static/5f3153390346ea1265ea221556df3ed1/6b9fd/navbar6.png 518w\", \"/static/5f3153390346ea1265ea221556df3ed1/23296/navbar6.png 675w\"],\n    \"sizes\": \"(max-width: 675px) 100vw, 675px\",\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(\"p\", null, \"Here I\\u2019m using a literal hamburger :)\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"The CDBCollapse component was added. This is the actual component that collapses the navigation bar. A local reference of #myNav is added so that the toggler can access it\\u2019s toggleCollapse function.\\n\", \"[navbar]\", \"=true is used to inform the collapse that this instance is being used as a navigation bar.expand=\\u201Dlg\\u201D, this is added to tell CDBCollapse when to collapse. Note that the same breakpoint used in the CDBNavbar component must also be used here.\"), mdx(\"br\", null))), mdx(\"p\", null, \"Whew! Alright, now that the navbar is responsive and ready to go, let\\u2019s add some flesh to it. We\\u2019ll be making use of some other Contrast components. \"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-typescript\"\n  }), \"<CDBNavbar style=\\\"background: black; color: #f4f4f4\\\" [dark]=true expand=\\\"lg\\\">\\n    <CDBNavBrand href=\\\"/\\\">\\n        <img src=\\\"\\\" alt=\\\"Brand\\\" class=\\\"img-fluid\\\" width=\\\"30\\\" />   \\n    </CDBNavBrand>    \\n    <CDBNavToggle (click)=\\\"myNav.toggleCollapse()\\\" > </CDBNavToggle>\\n    <CDBCollapse #myNav class=\\\"w-100\\\" [navbar]=true expand=\\\"lg\\\">\\n        <CDBNavbarNav [left]=true class=\\\"align-items-center\\\">     \\n        <CDBNavItem>              \\n        <CDBDropDown>           \\n            <CDBDropDownToggle [caretDropDown]=true style=\\\"padding: 0\\\" \\n            color=\\\"dark\\\" (click)=\\\"menu.toggleDropdown($event)\\\"> \\n            Categories \\n            </CDBDropDownToggle>     \\n        <CDBDropDownMenu #menu=\\\"cdbDropdownMenu\\\" placement=\\\"bottom\\\">\\n        Coming soon #pleaseStayUpdated. \\n        </CDBDropDownMenu> \\n        </CDBDropDown> \\n        </CDBNavItem>     \\n        <CDBNavItem>\\n            <CDBBtn [flat]=true color=\\\"dark\\\" style=\\\"padding: 0\\\">\\n            <CDBNavLink to=\\\"/\\\" style=\\\"color: #ffffff\\\">Help</CDBNavLink> \\n        </CDBBtn>\\n        </CDBNavItem>\\n        <CDBNavItem>\\n            <CDBBtn [flat]=true color=\\\"dark\\\" style=\\\"padding: 0\\\">\\n            <CDBNavLink to=\\\"/\\\" style=\\\"color: #ffffff\\\">About</CDBNavLink>\\n            </CDBBtn>           \\n        </CDBNavItem>     \\n        </CDBNavbarNav>\\n        <CDBNavbarNav [right]=true> \\n           <CDBNavItem>\\n            <CDBBtn [flat]=true color=\\\"dark\\\" style=\\\"padding: 0\\\">\\n                <CDBNavLink to=\\\"/\\\" style=\\\"color: #ffffff\\\">EN</CDBNavLink> \\n            </CDBBtn>\\n            </CDBNavItem>\\n           <CDBNavItem>\\n            <CDBBtn [flat]=true color=\\\"dark\\\" style=\\\"padding: 0\\\">\\n                <CDBNavLink to=\\\"/\\\" style=\\\"color: #ffffff\\\">Login</CDBNavLink> \\n            </CDBBtn> \\n            </CDBNavItem>\\n            <CDBNavItem> \\n            <CDBBtn color=\\\"white\\\" style=\\\"padding: 0\\\"> \\n                <CDBNavLink to=\\\"/\\\" style=\\\"color: #000000;\\\"> Sign Up </CDBNavLink>\\n            </CDBBtn>\\n            </CDBNavItem>\\n        </CDBNavbarNav>\\n    </CDBCollapse>\\n</CDBNavbar> \\n\")), 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\": \"939px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/df3484a5052187e43aae8eb720a482a5/eafa0/navbar7.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\": \"16.216216216216214%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAABcSAAAXEgFnn9JSAAAAd0lEQVQI163H0QnDIABFUZdLREkCNlM0EK0h+CNOILTdxRlMV2imuaWB/ParDw68K5abQzYNl3FkGAb6vscYQ9d1tG2LlPLw/aeztdYopZimK7VWSimIx/POsq6klIgxHkIIeO+Z5/kn5xzWWnLO7PubbXsh+PM+e0GppMuME/AAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Bootstrap Navbar\",\n    \"title\": \"Bootstrap Navbar\",\n    \"src\": \"/static/df3484a5052187e43aae8eb720a482a5/eafa0/navbar7.png\",\n    \"srcSet\": [\"/static/df3484a5052187e43aae8eb720a482a5/a2ead/navbar7.png 259w\", \"/static/df3484a5052187e43aae8eb720a482a5/6b9fd/navbar7.png 518w\", \"/static/df3484a5052187e43aae8eb720a482a5/eafa0/navbar7.png 939w\"],\n    \"sizes\": \"(max-width: 939px) 100vw, 939px\",\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    \"), \"\\n\", 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\": \"675px\"\n    }\n  }), \"\\n      \", mdx(\"a\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/954419db1024f97e791b81a8b08812a4/23296/navbar8.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\": \"49.42084942084942%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABcSAAAXEgFnn9JSAAAA9ElEQVQoz6WSTY6CQBCFi584AyayYJANid5Bl5NxxQaihgNwEi7gApjZcQYbogmHYANnMN7kabfBxCiRDItvUd1V771UNx2OB/zudvhLUyRJ8pI4jjvvWtLrfJZloNXPN0YKgUi6QoPQNA20Wa9FMfr4hKIoD8iyjIkxwWw2h+M40HUdqqo+9fEzrmHbNsj3fVHw4S5nfTzGdPr1NqFpmiDP80TBnboaDcO4ufcRDILgraAkSYJegpvtdvBjtGZCMAxDuK6L5WJx3yWnTdWHdv+WZYGiKMLpfAbbs8FJ+S+gpmlQ1zWqqkKe5yiK4l8wxlCWJS44+SRJkotvrQAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"a\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Bootstrap Navbar\",\n    \"title\": \"Bootstrap Navbar\",\n    \"src\": \"/static/954419db1024f97e791b81a8b08812a4/23296/navbar8.png\",\n    \"srcSet\": [\"/static/954419db1024f97e791b81a8b08812a4/a2ead/navbar8.png 259w\", \"/static/954419db1024f97e791b81a8b08812a4/6b9fd/navbar8.png 518w\", \"/static/954419db1024f97e791b81a8b08812a4/23296/navbar8.png 675w\"],\n    \"sizes\": \"(max-width: 675px) 100vw, 675px\",\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(\"p\", null, \"That is the final result of what our navbar should look like and you can defintely style the components more anyway you wish to.\"), mdx(\"p\", null, \"You can find more information on all the components used in the navbar in the \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.devwares.com/docs/contrast/angular/navigation/navbar\"\n  }), \"documentation\")));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"How To Create A Beautiful Navbar Using Bootstrap And Contrast","date":"January 20, 2021","image":"/blog/images/bootstrap-navbar-with-contrast.png","author":"Tobi Osimosu","role":"Frontend Developer","authorImage":"/blog/author_tobi.png","metaTitle":"How To Create A Beautiful Navbar Using Bootstrap 5 And Contrast","metaDescription":"This article aims to describe, step by step, how to build a functional and beautiful navbar using bootstrap 5 and a cool new UI kit called Contrast. A navigation bar, which is often called a navbar, is one of, if not the most important, component or element of a website."},"fields":{"slug":"/bootstrap-5-navbar-using-contrast"}},"previous":null,"next":null},"pageContext":{"id":"4ae17230-17c8-57ab-90c0-9f2cef35823c"}},"staticQueryHashes":["2619113677","2619113677","3706406642","417421954"]}