{"id":753,"date":"2019-01-13T09:31:14","date_gmt":"2019-01-13T09:31:14","guid":{"rendered":"https:\/\/grooni.com\/docs\/groovy-menu\/?page_id=753"},"modified":"2021-11-13T08:26:36","modified_gmt":"2021-11-13T08:26:36","slug":"menu-blocks","status":"publish","type":"page","link":"https:\/\/grooni.com\/docs\/groovy-menu\/menu-blocks\/","title":{"rendered":"Mega Menu Blocks"},"content":{"rendered":"<p>With Groovy menu plugin you can add custom content to the menu dropdowns. By creating such content in any popular page builder such as <strong>Elementor<\/strong>, <strong>Divi<\/strong>, <strong>WPBakery <\/strong>and others. Compatible builders list is here. Also, there is posibility using raw HTML or Gutenberg blocks<\/p>\n<figure id=\"attachment_767\" class=\"thumbnail wp-caption alignnone\" style=\"width: 1407px\"><img loading=\"lazy\" class=\"wp-image-767 size-full\" src=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2019\/01\/gm-wpbakery.jpg\" alt=\"\" width=\"1397\" height=\"607\" srcset=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2019\/01\/gm-wpbakery.jpg 1397w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2019\/01\/gm-wpbakery-300x130.jpg 300w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2019\/01\/gm-wpbakery-768x334.jpg 768w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2019\/01\/gm-wpbakery-1024x445.jpg 1024w\" sizes=\"(max-width: 1397px) 100vw, 1397px\" \/><figcaption class=\"caption wp-caption-text\">Mega menu block created with WPBakery page builder<\/figcaption><\/figure>\n<h3>Related article<\/h3>\n<ul>\n<li>How to create <a href=\"https:\/\/grooni.com\/docs\/groovy-menu\/faq\/how-to-create-mega-menu-with-elementor\/\">Elementor mega menu<\/a>&nbsp;<\/li>\n<li><span style=\"font-size: inherit;\">How to create <a href=\"https:\/\/grooni.com\/docs\/groovy-menu\/faq\/how-to-add-wpbakery-mega-menu-block\/\">WPBakery mega menu&nbsp;<\/a><\/span><\/li>\n<li>How to create <a href=\"https:\/\/grooni.com\/docs\/groovy-menu\/faq\/how-to-create-a-mega-menu-in-divi-theme-builder\/\">Divi mega menu<\/a>&nbsp;<\/li>\n<li><a href=\"https:\/\/grooni.com\/docs\/groovy-menu\/faq\/how-to-create-mega-menu-without-page-builders\/\">How to create mega menu without builders&nbsp;<\/a><\/li>\n<\/ul>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<h3><strong>How to add Mega Menu Blocks<\/strong><\/h3>\n<p>To create a mega menu blocks please go to <code>Groovy menu &gt; Menu Blocks<\/code>&nbsp;and click on&nbsp;<code>Add New Menu block<\/code>&nbsp;button<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-867\" src=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2019\/01\/screenshot-gm.local-2019.01.24-13-46-22.jpg\" alt=\"\" width=\"1415\" height=\"677\" srcset=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2019\/01\/screenshot-gm.local-2019.01.24-13-46-22.jpg 1415w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2019\/01\/screenshot-gm.local-2019.01.24-13-46-22-300x144.jpg 300w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2019\/01\/screenshot-gm.local-2019.01.24-13-46-22-768x367.jpg 768w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2019\/01\/screenshot-gm.local-2019.01.24-13-46-22-1024x490.jpg 1024w\" sizes=\"(max-width: 1415px) 100vw, 1415px\" \/><\/p>\n<blockquote>\n<p>Note: In most cases that to show the page builder interface in the Menu Blocks section, you need to enable builder for custom post types. <code>\"gm_menu_block\"<\/code> in page builder settings.<\/p>\n<p><a href=\"https:\/\/grooni.com\/docs\/groovy-menu\/faq\/how-to-enable-mega-menu-blocks\/\">How to enable your page builder for Groovy menu post type<\/a><\/p>\n<\/blockquote>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<h3><strong>How to add Menu Blocks to the menu<\/strong><\/h3>\n<p>To add a menu block to the site menu go to &#8220;<strong>Appearance &gt; Menus&#8221;<\/strong>&nbsp;and select menu block in the sidebar.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-868\" src=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2019\/01\/screenshot-gm.local-2019.01.24-13-49-12.jpg\" alt=\"\" width=\"1893\" height=\"613\" srcset=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2019\/01\/screenshot-gm.local-2019.01.24-13-49-12.jpg 1893w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2019\/01\/screenshot-gm.local-2019.01.24-13-49-12-300x97.jpg 300w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2019\/01\/screenshot-gm.local-2019.01.24-13-49-12-768x249.jpg 768w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2019\/01\/screenshot-gm.local-2019.01.24-13-49-12-1024x332.jpg 1024w\" sizes=\"(max-width: 1893px) 100vw, 1893px\" \/><\/p>\n<blockquote>\n<p><strong>Note:<\/strong> If you don&#8217;t see Menu blocks accordeon in the left sidebar, then you need check the box &#8220;Menu blocks&#8221; in &#8220;Screen Options&#8221;<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-869\" src=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2019\/01\/screenshot-gm.local-2019.01.24-13-57-34.jpg\" alt=\"\" width=\"1748\" height=\"239\" srcset=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2019\/01\/screenshot-gm.local-2019.01.24-13-57-34.jpg 1748w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2019\/01\/screenshot-gm.local-2019.01.24-13-57-34-300x41.jpg 300w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2019\/01\/screenshot-gm.local-2019.01.24-13-57-34-768x105.jpg 768w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2019\/01\/screenshot-gm.local-2019.01.24-13-57-34-1024x140.jpg 1024w\" sizes=\"(max-width: 1748px) 100vw, 1748px\" \/><\/p>\n<\/blockquote>\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n<h3><strong>How to assign Menu blocks to the menu items&nbsp;<\/strong><\/h3>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>2. Add menu item, for that click on menu type &#8220;Custom link&#8221;, and put the name and URL. It can consist the URL, or not, for menu items without active link put character &#8220;#&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"913\" height=\"464\" src=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/11\/custom-link.png\" alt=\"\" class=\"wp-image-2582\" srcset=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/11\/custom-link.png 913w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/11\/custom-link-300x152.png 300w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/11\/custom-link-768x390.png 768w\" sizes=\"(max-width: 913px) 100vw, 913px\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>2. Click on <strong>&#8220;Groovy Menu Item options&#8221;<\/strong> button<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"642\" height=\"636\" src=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/11\/appearance-menus-structure.png\" alt=\"\" class=\"wp-image-2576\" srcset=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/11\/appearance-menus-structure.png 642w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/11\/appearance-menus-structure-300x297.png 300w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/11\/appearance-menus-structure-150x150.png 150w\" sizes=\"(max-width: 642px) 100vw, 642px\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>3. Check the box beside Mega menu, and set the number of columns<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"963\" src=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/11\/mega-menu-item-1024x963.png\" alt=\"\" class=\"wp-image-2577\" srcset=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/11\/mega-menu-item-1024x963.png 1024w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/11\/mega-menu-item-300x282.png 300w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/11\/mega-menu-item-768x722.png 768w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/11\/mega-menu-item.png 1109w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>With Groovy menu plugin you can add custom content to the menu dropdowns. By creating such content in any popular &hellip; <a href=\"https:\/\/grooni.com\/docs\/groovy-menu\/menu-blocks\/\">Read more &rarr;<\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/pages\/753"}],"collection":[{"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/comments?post=753"}],"version-history":[{"count":0,"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/pages\/753\/revisions"}],"wp:attachment":[{"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/media?parent=753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}