{"id":5532,"date":"2024-01-11T16:40:00","date_gmt":"2024-01-11T16:40:00","guid":{"rendered":"https:\/\/codehim.com\/?p=5532"},"modified":"2024-01-22T14:45:15","modified_gmt":"2024-01-22T09:45:15","slug":"bootstrap-5-mega-menu-responsive-examples","status":"publish","type":"post","link":"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/","title":{"rendered":"19+ Bootstrap 5 Mega Menu Responsive\/Drop Down Examples"},"content":{"rendered":"

Yet another Bootstrap 5 responsive mega menu with multilevel dropdown examples and search box. This mega navigation system is built with the Bootstrap 5 navbar component with multiple levels of dropdowns<\/a>. Besides this, a mega dropdown is also placed inside the main navbar that contains the Bootstrap grid layout for links, cards, and link groups.<\/p>\n

You are not limited to place only cards and links inside the mega dropdown, you can also place any Bootstrap element like forms, accordions, and images, etc. The menu comes with an animated hamburger button (for mobile view) to toggle nav items.<\/p>\n

Basically, this mega menu doesn’t require any JavaScript function as it uses Bootstrap 5 native dropdowns and navbar components. Even, the additional styles are not necessary, the menu is quite compatible with Bootstrap 5.0.2 and above.\u00a0 Anyhow, a little JS function requires to toggle the hamburger on small screens.<\/p>\n

How to Create a Responsive Mega Menu using Bootstrap 5<\/h2>\n

1. First of all, load the Bootstrap 5 CSS<\/a>, Font Awesome CSS (for icons), Google Fonts<\/a> CSS, and Additional CSS (Optional) into the head tag of your webpage.<\/p>\n

<!-- Bootstrap 5 CSS -->\r\n<link rel='stylesheet' href='https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css'>\r\n<!-- Font Awesome CSS -->\r\n<link rel='stylesheet' href='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.11.2\/css\/all.min.css'>\r\n<!-- Google Fonts -->\r\n<link rel='stylesheet' href='https:\/\/fonts.googleapis.com\/css2?family=Source+Sans+Pro:wght@400;700&display=swap'>\r\n<!-- Additional CSS (Optional) -->\r\n<link rel=\"stylesheet\" href=\"css\/style.css\">\r\n<\/pre>\n
2. After that, create the HTML structure for the mega menu as follows:<\/p>\n
<nav class=\"navbar navbar-expand-lg navbar-light bg-dark navbar-dark shadow\">\r\n    <div class=\"container-fluid\">\r\n      <a class=\"navbar-brand\" href=\"#\">Bootstrap 5 <span class=\"badge bg-primary\">Mega Menu<\/span><\/a>\r\n      <button class=\"navbar-toggler collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbar-content\">\r\n        <div class=\"hamburger-toggle\">\r\n          <div class=\"hamburger\">\r\n            <span><\/span>\r\n            <span><\/span>\r\n            <span><\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/button>\r\n      <div class=\"collapse navbar-collapse\" id=\"navbar-content\">\r\n        <ul class=\"navbar-nav mr-auto mb-2 mb-lg-0\">\r\n          <li class=\"nav-item\">\r\n            <a class=\"nav-link active\" aria-current=\"page\" href=\"#\">Home<\/a>\r\n          <\/li>\r\n          <li class=\"nav-item dropdown\">\r\n            <a class=\"nav-link dropdown-toggle\" href=\"#\" data-bs-toggle=\"dropdown\" data-bs-auto-close=\"outside\">Multilevel<\/a>\r\n            <ul class=\"dropdown-menu shadow\">\r\n              <li><a class=\"dropdown-item\" href=\"#\">Gallery<\/a><\/li>\r\n              <li><a class=\"dropdown-item\" href=\"blog.html\">Blog<\/a><\/li>\r\n              <li class=\"dropstart\">\r\n                <a href=\"#\" class=\"dropdown-item dropdown-toggle\" data-bs-toggle=\"dropdown\">Submenu Left<\/a>\r\n                <ul class=\"dropdown-menu shadow\">\r\n                  <li><a class=\"dropdown-item\" href=\"\"> Third level 1<\/a><\/li>\r\n                  <li><a class=\"dropdown-item\" href=\"\"> Third level 2<\/a><\/li>\r\n                  <li><a class=\"dropdown-item\" href=\"\"> Third level 3<\/a><\/li>\r\n                  <li><a class=\"dropdown-item\" href=\"\"> Third level 4<\/a><\/li>\r\n                  <li><a class=\"dropdown-item\" href=\"\"> Third level 5<\/a><\/li>\r\n                <\/ul>\r\n              <\/li>\r\n              <li class=\"dropend\">\r\n                <a href=\"#\" class=\"dropdown-item dropdown-toggle\" data-bs-toggle=\"dropdown\" data-bs-auto-close=\"outside\">Submenu Right<\/a>\r\n                <ul class=\"dropdown-menu shadow\">\r\n                  <li><a class=\"dropdown-item\" href=\"\"> Second level 1<\/a><\/li>\r\n                  <li><a class=\"dropdown-item\" href=\"\"> Second level 2<\/a><\/li>\r\n                  <li><a class=\"dropdown-item\" href=\"\"> Second level 3<\/a><\/li>\r\n                  <li class=\"dropend\">\r\n                    <a href=\"#\" class=\"dropdown-item dropdown-toggle\" data-bs-toggle=\"dropdown\">Let's go deeper!<\/a>\r\n                    <ul class=\"dropdown-menu dropdown-submenu shadow\">\r\n                      <li><a class=\"dropdown-item\" href=\"\"> Third level 1<\/a><\/li>\r\n                      <li><a class=\"dropdown-item\" href=\"\"> Third level 2<\/a><\/li>\r\n                      <li><a class=\"dropdown-item\" href=\"\"> Third level 3<\/a><\/li>\r\n                      <li><a class=\"dropdown-item\" href=\"\"> Third level 4<\/a><\/li>\r\n                      <li><a class=\"dropdown-item\" href=\"\"> Third level 5<\/a><\/li>\r\n                    <\/ul>\r\n                  <\/li>\r\n                  <li><a class=\"dropdown-item\" href=\"\"> Third level 5<\/a><\/li>\r\n                <\/ul>\r\n              <\/li>\r\n              <li><hr class=\"dropdown-divider\"><\/li>\r\n              <li><a class=\"dropdown-item\" href=\"#\">Something else here<\/a><\/li>\r\n            <\/ul>\r\n          <\/li>\r\n          <li class=\"nav-item\">\r\n            <a class=\"nav-link\" href=\"#\">Link<\/a>\r\n          <\/li>\r\n          <li class=\"nav-item dropdown dropdown-mega position-static\">\r\n            <a class=\"nav-link dropdown-toggle\" href=\"#\" data-bs-toggle=\"dropdown\" data-bs-auto-close=\"outside\">Megamenu<\/a>\r\n            <div class=\"dropdown-menu shadow\">\r\n              <div class=\"mega-content px-4\">\r\n                <div class=\"container-fluid\">\r\n                  <div class=\"row\">\r\n                    <div class=\"col-12 col-sm-4 col-md-3 py-4\">\r\n                      <h5>Title<\/h5>\r\n                      <div class=\"list-group\">\r\n                        <a class=\"list-group-item\" href=\"#\">Mega Menu Link<\/a>\r\n                        <a class=\"list-group-item\" href=\"#\">Mega Menu Link<\/a>\r\n                        <a class=\"list-group-item\" href=\"#\">Mega Menu Link<\/a>\r\n                      <\/div>\r\n                    <\/div>\r\n                    <div class=\"col-12 col-sm-4 col-md-3 py-4\">\r\n                      <h5>Card Title<\/h5>\r\n                      <div class=\"card\">\r\n                  <img src=\"img\/banner-image.jpg\" class=\"img-fluid\" alt=\"image\">\r\n                  <div class=\"card-body\">\r\n                    <p class=\"card-text\">Description goes here...<\/p>\r\n                  <\/div>\r\n                <\/div>\r\n                    <\/div>\r\n                    <div class=\"col-12 col-sm-4 col-md-3 py-4\">\r\n                      <h5>Title<\/h5>\r\n                        <p>Description goes here...<\/p>\r\n                    <\/div>\r\n                    <div class=\"col-12 col-sm-12 col-md-3 py-4\">\r\n                      <h5>Title<\/h5>\r\n                      <div class=\"list-group\">\r\n                        <a class=\"list-group-item\" href=\"#\">Menu Link<\/a>\r\n                        <a class=\"list-group-item\" href=\"#\">Menu Link<\/a>\r\n                        <a class=\"list-group-item\" href=\"#\">Menu Link<\/a>\r\n                      <\/div>\r\n                    <\/div>\r\n                  <\/div>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n          <\/li>\r\n          <li class=\"nav-item\">\r\n            <a class=\"nav-link disabled\" href=\"#\" tabindex=\"-1\" aria-disabled=\"true\">Disabled<\/a>\r\n          <\/li>\r\n        <\/ul>\r\n        <form class=\"d-flex ms-auto\">\r\n            <div class=\"input-group\">\r\n                <input class=\"form-control border-0 mr-2\" type=\"search\" placeholder=\"Search\" aria-label=\"Search\">\r\n                <button class=\"btn btn-primary border-0\" type=\"submit\">Search<\/button>\r\n            <\/div>\r\n        <\/form>\r\n      <\/div>\r\n    <\/div>\r\n  <\/nav>\r\n<\/pre>\n
3. Load the Bootstrap 5 JS by adding the following CDN link just before closing the body tag.<\/p>\n
<!-- Bootstrap 5 JS -->\r\n<script src='https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js'><\/script>\r\n<\/pre>\n
4. Finally, initialize the hamburger button in the JS function to make the mega menu<\/a> responsive.<\/p>\n
document.addEventListener('click',function(e){\r\n  \/\/ Hamburger menu\r\n  if(e.target.classList.contains('hamburger-toggle')){\r\n    e.target.children[0].classList.toggle('active');\r\n  }\r\n}) \r\n<\/pre>\n
That’s all! Hopefully, you have successfully integrated this Bootstrap 5 responsive mega menu with multilevel examples into your web project. If you have any questions or suggestions, let me know by comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
Yet another Bootstrap 5 responsive mega menu with multilevel dropdown examples and search box. This mega navigation system is built…<\/p>\n","protected":false},"author":1,"featured_media":5535,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[123,132,144],"tags":[9,60,55],"class_list":["post-5532","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","category-bootstrap-dropdowns","category-bootstrap-navbars","tag-dropdown-menu","tag-mega-menu","tag-multi-level-menu"],"acf":[],"yoast_head":"\n19+ Bootstrap 5 Mega Menu Responsive\/Drop Down Examples — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a well designed responsive Bootstrap 5 mega menu with examples. You can view demo and download code for Bootstrap mega menu.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"19+ Bootstrap 5 Mega Menu Responsive\/Drop Down Examples — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a well designed responsive Bootstrap 5 mega menu with examples. You can view demo and download code for Bootstrap mega menu.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-11T16:40:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T09:45:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/bootstrap-5-mega-menu-responsive-examples.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"19+ Bootstrap 5 Mega Menu Responsive\/Drop Down Examples\",\"datePublished\":\"2024-01-11T16:40:00+00:00\",\"dateModified\":\"2024-01-22T09:45:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/\"},\"wordCount\":261,\"commentCount\":10,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/bootstrap-5-mega-menu-responsive-examples.png\",\"keywords\":[\"Dropdown Menu\",\"Mega Menu\",\"Multi-Level Menu\"],\"articleSection\":[\"Bootstrap\",\"Bootstrap Dropdowns\",\"Bootstrap Navbars\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/\",\"url\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/\",\"name\":\"19+ Bootstrap 5 Mega Menu Responsive\/Drop Down Examples — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/bootstrap-5-mega-menu-responsive-examples.png\",\"datePublished\":\"2024-01-11T16:40:00+00:00\",\"dateModified\":\"2024-01-22T09:45:15+00:00\",\"description\":\"Here is a well designed responsive Bootstrap 5 mega menu with examples. You can view demo and download code for Bootstrap mega menu.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/bootstrap-5-mega-menu-responsive-examples.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/bootstrap-5-mega-menu-responsive-examples.png\",\"width\":1280,\"height\":960,\"caption\":\"Bootstrap 5 Mega Menu Responsive Examples\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap\",\"item\":\"https:\/\/codehim.com\/category\/bootstrap\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"19+ Bootstrap 5 Mega Menu Responsive\/Drop Down Examples\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"19+ Bootstrap 5 Mega Menu Responsive\/Drop Down Examples — CodeHim","description":"Here is a well designed responsive Bootstrap 5 mega menu with examples. You can view demo and download code for Bootstrap mega menu.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/","og_locale":"en_US","og_type":"article","og_title":"19+ Bootstrap 5 Mega Menu Responsive\/Drop Down Examples — CodeHim","og_description":"Here is a well designed responsive Bootstrap 5 mega menu with examples. You can view demo and download code for Bootstrap mega menu.","og_url":"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-11T16:40:00+00:00","article_modified_time":"2024-01-22T09:45:15+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/bootstrap-5-mega-menu-responsive-examples.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"19+ Bootstrap 5 Mega Menu Responsive\/Drop Down Examples","datePublished":"2024-01-11T16:40:00+00:00","dateModified":"2024-01-22T09:45:15+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/"},"wordCount":261,"commentCount":10,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/bootstrap-5-mega-menu-responsive-examples.png","keywords":["Dropdown Menu","Mega Menu","Multi-Level Menu"],"articleSection":["Bootstrap","Bootstrap Dropdowns","Bootstrap Navbars"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/","url":"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/","name":"19+ Bootstrap 5 Mega Menu Responsive\/Drop Down Examples — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/bootstrap-5-mega-menu-responsive-examples.png","datePublished":"2024-01-11T16:40:00+00:00","dateModified":"2024-01-22T09:45:15+00:00","description":"Here is a well designed responsive Bootstrap 5 mega menu with examples. You can view demo and download code for Bootstrap mega menu.","breadcrumb":{"@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/bootstrap-5-mega-menu-responsive-examples.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2021\/09\/bootstrap-5-mega-menu-responsive-examples.png","width":1280,"height":960,"caption":"Bootstrap 5 Mega Menu Responsive Examples"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/bootstrap\/bootstrap-5-mega-menu-responsive-examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Bootstrap","item":"https:\/\/codehim.com\/category\/bootstrap\/"},{"@type":"ListItem","position":3,"name":"19+ Bootstrap 5 Mega Menu Responsive\/Drop Down Examples"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":86089,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/5532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=5532"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/5532\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/5535"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=5532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=5532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=5532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}