{"id":19636,"date":"2014-03-20T18:01:16","date_gmt":"2014-03-20T10:01:16","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=19636"},"modified":"2025-04-04T01:43:07","modified_gmt":"2025-04-03T17:43:07","slug":"bootstrap-megamenu-yamm3","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/bootstrap-megamenu-yamm3\/","title":{"rendered":"Create Mega Menu For Your Website With Yamm3"},"content":{"rendered":"<p>There are many usability advantages in using a mega menu on a webpage. With mega menu, you can <strong>take full control over your menu<\/strong>. Almost all web elements can be assigned there.<\/p>\n<p>Some great companies have even applied megamenu into their website. <a href=\"https:\/\/www.amazon.com\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Amazon<\/a> and <a href=\"https:\/\/mashable.com\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Mashable<\/a> for example. Amazon have an image background in their menu and Mashable uses image thumbnails for a more attractive menu.<\/p>\n<p>If you have been working with <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/bootstrap\/\">Bootstrap<\/a>, now you can build a mega menu in a snap with this brand new library called <strong>Yamm<\/strong> from <a href=\"https:\/\/twitter.com\/geedmo\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Geedmo<\/a>.<\/p>\n<p><a href=\"https:\/\/geedmo.github.io\/yamm3\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Yamm3<\/a> (<i>Yet Another Megamenu<\/i>) is a CSS library to help you <strong>build a mega menu in Bootstrap 3<\/strong> easily. The mega menu works for both <strong>responsive and fixed layouts<\/strong>. It covers almost all bootstrap elements to be included in the navbar like picture, accordion, list, grid, table, form and so on.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/bootstrap-plugin-modal-window\/\" class=\"ref-block__link\" title=\"Read More: Working with Bootstrap Plugin: Modal Window\" rel=\"bookmark\"><span class=\"screen-reader-text\">Working with Bootstrap Plugin: Modal Window<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/bootstrap-plugin-modal-window.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-16656 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/bootstrap-plugin-modal-window.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Working with Bootstrap Plugin: Modal Window<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tBootstrap has gained a lot popularity among web designers and developers, in this site BuiltWithBootstrap you can see...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Basic Guide<\/h2>\n<p>Yamm3 uses lightweight and pure CSS. To get started with Yamm3, you only have to <strong>include the Yamm3 class you need<\/strong> into your standard navbar HTML markup.<\/p>\n<p>Before working with Yamm3, the first step is to <strong>include the Yamm3 and Bootstrap stylesheet<\/strong> library into the head section as follows:<\/p>\n<pre>\r\n&lt;head&gt;\r\n...\r\n   &lt;link href=\"css\/bootstrap.min.css\" rel=\"stylesheet\"&gt;\r\n   &lt;link href=\"css\/bootstrap-theme.min.css\" rel=\"stylesheet\"&gt;\r\n   &lt;link href=\"css\/yamm.css\" rel=\"stylesheet\"&gt;\r\n...\r\n&lt;\/head&gt;\r\n<\/pre>\n<p>And don\u2019t forget to also <strong>include the jQuery and Bootstrap library<\/strong> into your project, either in the head or body section, like so:<\/p>\n<pre>\r\n...\r\n   &lt;script src=\"js\/jquery-1.10.2.min.js\"&gt;&lt;\/script&gt;\r\n   &lt;script src=\"js\/bootstrap.min.js\"&gt;&lt;\/script&gt;\r\n...\r\n<\/pre>\n<p>Please note that <strong>we use Bootstrap 3<\/strong> here and the minimum jQuery version required is <strong>version 1.9.0+<\/strong>. If you are still running on the previous Bootstrap version, we recommend following the guide of the <a href=\"https:\/\/geedmo.github.io\/yamm\/\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">previous Yamm version<\/a>.<\/p>\n<h2>HTML Markup<\/h2>\n<p>In basic usage, to use Yamm3 firstly add <code>.yamm<\/code> class at the top of the navbar markup. Then, you can add your menu markup into the <code>.dropdown-menu<\/code> class. The following is a basic example.<\/p>\n<pre>\r\n&lt;nav class=\"navbar yamm navbar-default \" role=\"navigation\"&gt;\r\n...\r\n     &lt;ul class=\"nav navbar-nav\"&gt;\r\n       &lt;li class=\"dropdown\"&gt;\r\n         &lt;a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\"&gt;Dropdown&lt;\/a&gt;\r\n         &lt;ul class=\"dropdown-menu\"&gt;\r\n           &lt;li&gt;\r\n               &lt;div class=\"yamm-content\"&gt;\r\n                  &lt;div class=\"row\"&gt; \r\n                    &lt;!-- Your Menu Goes Here --&gt;\r\n\t\t\t\t  &lt;\/div&gt;\r\n\t\t\t   &lt;\/div&gt;\r\n           &lt;\/li&gt;\r\n         &lt;\/ul&gt;\r\n       &lt;\/li&gt;\r\n     &lt;\/ul&gt;\r\n...\r\n&lt;\/nav&gt;\r\n<\/pre>\n<p>As seen there, you can also use <code>.yamm-content<\/code> as an option to wrap content with padding.<\/p>\n<p>For example, let\u2019s try to add an accordion menu inside our markup navbar. Replace the <strong>Your Menu Goes Here<\/strong> comment with the following code.<\/p>\n<pre>\r\n&lt;div id=\"accordion\" class=\"panel-group\"&gt;\r\n    &lt;div class=\"panel panel-default\"&gt;\r\n        &lt;div class=\"panel-heading\"&gt;\r\n            &lt;h4 class=\"panel-title\"&gt;&lt;a data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapseOne\"&gt;Accordion Group Item #1&lt;\/a&gt;&lt;\/h4&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div id=\"collapseOne\" class=\"panel-collapse collapse in\"&gt;\r\n            &lt;div class=\"panel-body\"&gt;This is collapsible menu.&lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"panel panel-default\"&gt;\r\n        &lt;div class=\"panel-heading\"&gt;\r\n            &lt;h4 class=\"panel-title\"&gt;&lt;a data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapseTwo\"&gt;Accordion Group Item #2&lt;\/a&gt;&lt;\/h4&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div id=\"collapseTwo\" class=\"panel-collapse collapse\"&gt;\r\n            &lt;div class=\"panel-body\"&gt;This is collapsible menu.&lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>By calling the <code>accordion<\/code> id and using a <code>panel-group<\/code> class for grouping, you are able to create an accordion inside the navbar. And so our menu will look like the screenshot below:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-megamenu-yamm3\/accordion-menu-demo.jpg\" alt=\"accordion demo\" width=\"500\" height=\"223\"><\/figure>\n<p>There are plenty of other components you can add into the navbar. Self exploration of other components you can implement can be done if you download the <a href=\"https:\/\/codeload.github.com\/geedmo\/yamm3\/zip\/refs\/heads\/master\" rel=\"nofollow noopener noreferrer\" target=\"_blank\">Yamm3 complete archive<\/a> and open the index.html file with your favourite code editor.<\/p>\n<h2>Javascript<\/h2>\n<p>There is an additional javascript code used for the <strong>prevention of an unexpected closed menu<\/strong> in some components like accordion, forms, etc. Just include the following code into your head or body section:<\/p>\n<pre>\r\n&lt;script&gt;    \r\n$(document).on('click', '.yamm .dropdown-menu', function(e) {\r\n  e.stopPropagation()\r\n})\r\n&lt;\/script&gt;\t\r\n<\/pre>\n<h2>Conclusion<\/h2>\n<p>Yamm3 is another great third-party product to boost your Twitter Bootstrap\u2019s development when building an attractive navbar. You just need a little effort in exploring all implementation components,  as it <strong>lacks documentation support for creating various components menu<\/strong>.<\/p>\n<p>Share your opinion with us in the comments section below.<\/p>","protected":false},"excerpt":{"rendered":"<p>There are many usability advantages in using a mega menu on a webpage. With mega menu, you can take full control over your menu. Almost all web elements can be assigned there. Some great companies have even applied megamenu into their website. Amazon and Mashable for example. Amazon have an image background in their menu&hellip;<\/p>\n","protected":false},"author":136,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[352],"tags":[2289],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Create Mega Menu For Your Website With Yamm3 - Hongkiat<\/title>\n<meta name=\"description\" content=\"There are many usability advantages in using a mega menu on a webpage. With mega menu, you can take full control over your menu. Almost all web elements\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/bootstrap-megamenu-yamm3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Mega Menu For Your Website With Yamm3\" \/>\n<meta property=\"og:description\" content=\"There are many usability advantages in using a mega menu on a webpage. With mega menu, you can take full control over your menu. Almost all web elements\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/bootstrap-megamenu-yamm3\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2014-03-20T10:01:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:43:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-megamenu-yamm3\/accordion-menu-demo.jpg\" \/>\n<meta name=\"author\" content=\"Irfan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@IrfanFza\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Irfan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-megamenu-yamm3\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-megamenu-yamm3\\\/\"},\"author\":{\"name\":\"Irfan\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\"},\"headline\":\"Create Mega Menu For Your Website With Yamm3\",\"datePublished\":\"2014-03-20T10:01:16+00:00\",\"dateModified\":\"2025-04-03T17:43:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-megamenu-yamm3\\\/\"},\"wordCount\":493,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-megamenu-yamm3\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/bootstrap-megamenu-yamm3\\\/accordion-menu-demo.jpg\",\"keywords\":[\"Bootstrap\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-megamenu-yamm3\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-megamenu-yamm3\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-megamenu-yamm3\\\/\",\"name\":\"Create Mega Menu For Your Website With Yamm3 - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-megamenu-yamm3\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-megamenu-yamm3\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/bootstrap-megamenu-yamm3\\\/accordion-menu-demo.jpg\",\"datePublished\":\"2014-03-20T10:01:16+00:00\",\"dateModified\":\"2025-04-03T17:43:07+00:00\",\"description\":\"There are many usability advantages in using a mega menu on a webpage. With mega menu, you can take full control over your menu. Almost all web elements\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-megamenu-yamm3\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-megamenu-yamm3\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-megamenu-yamm3\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/bootstrap-megamenu-yamm3\\\/accordion-menu-demo.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/bootstrap-megamenu-yamm3\\\/accordion-menu-demo.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-megamenu-yamm3\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Mega Menu For Your Website With Yamm3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\",\"name\":\"Irfan\",\"description\":\"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/IrfanFza\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/irfan_fauzii\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create Mega Menu For Your Website With Yamm3 - Hongkiat","description":"There are many usability advantages in using a mega menu on a webpage. With mega menu, you can take full control over your menu. Almost all web elements","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:\/\/www.hongkiat.com\/blog\/bootstrap-megamenu-yamm3\/","og_locale":"en_US","og_type":"article","og_title":"Create Mega Menu For Your Website With Yamm3","og_description":"There are many usability advantages in using a mega menu on a webpage. With mega menu, you can take full control over your menu. Almost all web elements","og_url":"https:\/\/www.hongkiat.com\/blog\/bootstrap-megamenu-yamm3\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-03-20T10:01:16+00:00","article_modified_time":"2025-04-03T17:43:07+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-megamenu-yamm3\/accordion-menu-demo.jpg","type":"","width":"","height":""}],"author":"Irfan","twitter_card":"summary_large_image","twitter_creator":"@IrfanFza","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Irfan","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-megamenu-yamm3\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-megamenu-yamm3\/"},"author":{"name":"Irfan","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c"},"headline":"Create Mega Menu For Your Website With Yamm3","datePublished":"2014-03-20T10:01:16+00:00","dateModified":"2025-04-03T17:43:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-megamenu-yamm3\/"},"wordCount":493,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-megamenu-yamm3\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-megamenu-yamm3\/accordion-menu-demo.jpg","keywords":["Bootstrap"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/bootstrap-megamenu-yamm3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-megamenu-yamm3\/","url":"https:\/\/www.hongkiat.com\/blog\/bootstrap-megamenu-yamm3\/","name":"Create Mega Menu For Your Website With Yamm3 - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-megamenu-yamm3\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-megamenu-yamm3\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-megamenu-yamm3\/accordion-menu-demo.jpg","datePublished":"2014-03-20T10:01:16+00:00","dateModified":"2025-04-03T17:43:07+00:00","description":"There are many usability advantages in using a mega menu on a webpage. With mega menu, you can take full control over your menu. Almost all web elements","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-megamenu-yamm3\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/bootstrap-megamenu-yamm3\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-megamenu-yamm3\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-megamenu-yamm3\/accordion-menu-demo.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-megamenu-yamm3\/accordion-menu-demo.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-megamenu-yamm3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create Mega Menu For Your Website With Yamm3"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c","name":"Irfan","description":"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.","sameAs":["https:\/\/x.com\/IrfanFza"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/irfan_fauzii\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-56I","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19636","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=19636"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19636\/revisions"}],"predecessor-version":[{"id":73666,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19636\/revisions\/73666"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=19636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=19636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=19636"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=19636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}