{"id":4023,"date":"2026-10-28T03:59:29","date_gmt":"2026-10-28T03:59:29","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/mega-menu\/"},"modified":"2026-11-04T05:18:05","modified_gmt":"2026-11-04T05:18:05","password":"","slug":"mega-menu","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/mega-menu\/","title":{"rendered":"Mega Menu"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The Mega Menu Block adds a menu item that opens a wide dropdown. The dropdown content is a &#8220;Mega Menu&#8221; template that you build with any blocks, such as columns of links, images, buttons, and text.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use it for sites with many pages or product categories, where a simple dropdown list is too long.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to Create a Mega Menu in WordPress Gutenberg | ShapeBlock Pro Mega Menu\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/XIqOBx_A4tg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add a Mega Menu Block<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Follow these steps to add and configure the Mega Menu Block in the Gutenberg editor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Add the Mega Menu Block<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Open the header template part in the Site Editor (Appearance &gt; Editor), or any page with a Navigation block.<\/li>\n\n\n\n<li>Select the Navigation block and click the <strong>+<\/strong> inside it to add a menu item.<\/li>\n\n\n\n<li>Search for <strong>Mega Menu<\/strong> under ShapeBlock.<\/li>\n\n\n\n<li>Insert the Mega Menu Block into the navigation.<\/li>\n\n\n\n<li>Type the menu label on the block, then select it to access its settings in the right-hand sidebar.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"260\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-mega-menu-1.webp\" alt=\"Mega Menu block in the block inserter\" class=\"wp-image-4019\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-mega-menu-1.webp 350w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-mega-menu-1-300x223.webp 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Configure the Mega Menu Block<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Select the Mega Menu Block and open its settings in the right-hand sidebar. The available tabs are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Settings:<\/strong> Set the link, choose or create the dropdown content, and choose how it opens.<\/li>\n\n\n\n<li><strong>Layout:<\/strong> Set the dropdown width.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"640\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-mega-menu-2.webp\" alt=\"Mega Menu block selected in the editor with its settings sidebar\" class=\"wp-image-4020\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-mega-menu-2.webp 1440w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-mega-menu-2-600x267.webp 600w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-mega-menu-2-300x133.webp 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-mega-menu-2-1024x455.webp 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-mega-menu-2-768x341.webp 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Settings Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Settings tab contains the <strong>Mega Menu<\/strong> panel.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Mega Menu<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Link:<\/strong> Optional. Enter the URL the menu label opens. Without a link, the label opens the dropdown.<\/li>\n\n\n\n<li><strong>Dropdown Content:<\/strong> Choose the &#8220;Mega Menu&#8221; template shown in the dropdown.<\/li>\n\n\n\n<li><strong>Edit Mega Menu:<\/strong> Edit the chosen template in a window, right in the editor.<\/li>\n\n\n\n<li><strong>Create a new Mega Menu:<\/strong> Create a new, empty template and edit it.<\/li>\n\n\n\n<li><strong>Open On:<\/strong> Choose <strong>Hover (and click)<\/strong> or <strong>Click only<\/strong>.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#f3edec;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px\"><strong>Note:<\/strong> The dropdown only shows on the site when its template is published. A draft template shows a warning in this panel.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"615\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-mega-menu-3.webp\" alt=\"Mega Menu block, Settings tab in the sidebar\" class=\"wp-image-4021\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-mega-menu-3.webp 280w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-mega-menu-3-137x300.webp 137w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Layout Tab<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Layout tab contains the <strong>Layout<\/strong> panel.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Layout<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Dropdown Width:<\/strong> Choose <strong>Wide (site width)<\/strong>, <strong>Full screen width<\/strong>, or <strong>Custom<\/strong>.<\/li>\n\n\n\n<li><strong>Width (px):<\/strong> Set the dropdown width. This option appears with Custom.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"295\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/doc-mega-menu-4.webp\" alt=\"Mega Menu block, Layout tab in the sidebar\" class=\"wp-image-4022\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Live demo:<\/strong> see the Mega Menu Block in action on the <a href=\"https:\/\/shapekode.com\/product\/shapeblock\/mega-menu\/\">Mega Menu demo page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Mega Menu Block adds a menu item that opens a wide dropdown. The dropdown content is a &#8220;Mega Menu&#8221; template that you build with any blocks, such as columns of links, images, buttons, and text. Use it for sites with many pages or product categories, where a simple dropdown list is too long. How [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[18,30],"doc_tag":[],"class_list":["post-4023","docs","type-docs","status-publish","hentry","doc_category-header-footer-block","doc_category-pro-blocks"],"year_month":"2026-11","word_count":341,"total_views":"7","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Sojib","author_nicename":"shapekode-admin","author_url":"https:\/\/shapekode.com\/product\/shapeblock\/author\/shapekode-admin\/"},"doc_category_info":[{"term_name":"Header &amp; Footer Block","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/header-footer-block\/"},{"term_name":"Pro Blocks","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/pro-blocks\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4023","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=4023"}],"version-history":[{"count":1,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4023\/revisions"}],"predecessor-version":[{"id":5522,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/4023\/revisions\/5522"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=4023"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=4023"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=4023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}