{"id":50,"date":"2025-09-26T08:50:54","date_gmt":"2025-09-26T08:50:54","guid":{"rendered":"https:\/\/ska-blocks.com\/docs\/2025\/09\/26\/menu-block\/"},"modified":"2025-09-27T04:25:46","modified_gmt":"2025-09-27T04:25:46","slug":"menu-block","status":"publish","type":"post","link":"https:\/\/ska-blocks.com\/docs\/menu-block\/","title":{"rendered":"Menu block"},"content":{"rendered":"\n<p class=\"lead\">The Menu block renders a classic WordPress navigation menu.<\/p>\n\n\n\n<p>When using <strong>ska-theme<\/strong>, the legacy WordPress menus are re-enabled for a simpler alternative to the WordPress core Navigation block.<\/p>\n\n\n\n<p>The <code>ska\/menu<\/code> block has an option to select one of these menus and render it in the editor. When you don&#8217;t have any menus yet, it can render a placeholder menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2024\/03\/image-27.png\" alt=\"\" class=\"wp-image-284\"\/><\/figure>\n\n\n\n<p>Enabling the Dropdown option will display child-items in <a href=\"https:\/\/ska-blocks.com\/docs\/ska-theme\/dropdown\/\" data-type=\"post\" data-id=\"530\">dropdowns<\/a>.<\/p>\n\n\n\n<p>The menu uses a custom Walker and generates predictable markup <code>ul &gt; li &gt; a<\/code> and <code>ul &gt; li &gt; ul.sub-menu<\/code>.<\/p>\n\n\n\n<p>ska-theme comes with a <strong>Dropdown<\/strong> preset that styles the individual dropdowns.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Dropdowns<\/h2>\n\n\n\n<p>Dropdown items are automatically created from the navigation menu structure. The items can be with the structure &#8220;parent -&gt; child 1, child 2, child 3&#8221; as well as &#8220;parent -&gt; child 1 -&gt; child 2 -&gt; child 3&#8221;. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example menu with dropdowns<\/h3>\n\n\n\n<div class=\"wp-block-ska-element not-prose\"><ul class=\"ska-menu wp-block-ska-menu flex [&amp;&gt;li&gt;*:not(ul)]:flex flex-row [&amp;&gt;li&gt;*:not(ul)]:flex-row gap-7 [&amp;&gt;li&gt;*:not(ul)]:gap-px [&amp;&gt;li&gt;*:not(ul)]:items-center ml-auto text-base font-medium [&amp;&gt;li&gt;*:not(ul)]:text-site [&amp;&gt;li&gt;*:not(ul)]:hover:text-link [&amp;&gt;li&gt;*:not(ul)]:[&amp;.active]:text-link-active [&amp;&gt;li&gt;*:not(ul)]:[&amp;.active]:underline [&amp;&gt;li&gt;*:not(ul)]:decoration-primary [&amp;&gt;li&gt;*:not(ul)]:decoration-2 [&amp;&gt;li&gt;*:not(ul)]:underline-offset-2 [&amp;&gt;li&gt;*:not(ul)]:whitespace-nowrap [&amp;&gt;li&gt;*:not(ul)]:transition-colors\" x-data=\"skaDropdown({&quot;on&quot;:&quot;hover&quot;,&quot;placement&quot;:&quot;bottom&quot;})\"><li id=\"menu-item-145\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-145\"><a href=\"#\">Home<\/a><\/li><li id=\"menu-item-146\" class=\"menu-item menu-item-type-post_type menu-item-object-post menu-item-146\"><a href=\"https:\/\/ska-blocks.com\/docs\/menu\/\">Menu<\/a><\/li><li id=\"menu-item-147\" x-bind=\"item(&#039;menu-item-147-1&#039;)\" class=\"ska-columns menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-147\"><a href=\"#\"><span>Blog<\/span><svg class=\"dropdown-icon\" aria-hidden=\"true\" viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.23017 7.20938C5.52875 6.92228 6.00353 6.93159 6.29063 7.23017L10 11.1679L13.7094 7.23017C13.9965 6.93159 14.4713 6.92228 14.7698 7.20938C15.0684 7.49647 15.0777 7.97125 14.7906 8.26983L10.5406 12.7698C10.3992 12.9169 10.204 13 10 13C9.79599 13 9.60078 12.9169 9.45938 12.7698L5.20938 8.26983C4.92228 7.97125 4.93159 7.49647 5.23017 7.20938Z\" fill=\"currentColor\"><\/path><\/svg><\/a><ul x-bind=\"dropdownContent(&#039;menu-item-147-1&#039;)\" x-cloak=\"true\" data-type=\"columns\" class=\"sub-menu ska-preset--ska-theme--dropdown\"><li id=\"menu-item-148\" class=\"ska-no-dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-148\"><a href=\"#\">Column 1<\/a><ul class=\"sub-menu\"><li id=\"menu-item-149\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-149\"><a href=\"#\">Post 1<\/a><\/li><li id=\"menu-item-150\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-150\"><a href=\"#\">Post 2<\/a><\/li><\/ul><\/li><li id=\"menu-item-151\" class=\"ska-no-dropdown menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-151\"><a href=\"#\">Column 2<\/a><ul class=\"sub-menu\"><li id=\"menu-item-152\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-152\"><a href=\"#\">Post 3<\/a><\/li><li id=\"menu-item-153\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-153\"><a href=\"#\">Post 4<\/a><\/li><\/ul><\/li><\/ul><\/li><li id=\"menu-item-154\" x-bind=\"item(&#039;menu-item-154-4&#039;)\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-154\"><a href=\"#\"><span>About<\/span><svg class=\"dropdown-icon\" aria-hidden=\"true\" viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.23017 7.20938C5.52875 6.92228 6.00353 6.93159 6.29063 7.23017L10 11.1679L13.7094 7.23017C13.9965 6.93159 14.4713 6.92228 14.7698 7.20938C15.0684 7.49647 15.0777 7.97125 14.7906 8.26983L10.5406 12.7698C10.3992 12.9169 10.204 13 10 13C9.79599 13 9.60078 12.9169 9.45938 12.7698L5.20938 8.26983C4.92228 7.97125 4.93159 7.49647 5.23017 7.20938Z\" fill=\"currentColor\"><\/path><\/svg><\/a><ul x-bind=\"dropdownContent(&#039;menu-item-154-4&#039;)\" x-cloak=\"true\" class=\"sub-menu ska-preset--ska-theme--dropdown\"><li id=\"menu-item-155\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-155\"><a href=\"#\">The team<\/a><\/li><li id=\"menu-item-156\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-156\"><a href=\"#\">Portfolio<\/a><\/li><li id=\"menu-item-157\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-157\"><a href=\"#\">Other<\/a><\/li><\/ul><\/li><li id=\"menu-item-158\" x-bind=\"item(&#039;menu-item-158-5&#039;)\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-158\"><a href=\"#\"><span>Contact<\/span><svg class=\"dropdown-icon\" aria-hidden=\"true\" viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.23017 7.20938C5.52875 6.92228 6.00353 6.93159 6.29063 7.23017L10 11.1679L13.7094 7.23017C13.9965 6.93159 14.4713 6.92228 14.7698 7.20938C15.0684 7.49647 15.0777 7.97125 14.7906 8.26983L10.5406 12.7698C10.3992 12.9169 10.204 13 10 13C9.79599 13 9.60078 12.9169 9.45938 12.7698L5.20938 8.26983C4.92228 7.97125 4.93159 7.49647 5.23017 7.20938Z\" fill=\"currentColor\"><\/path><\/svg><\/a><ul x-bind=\"dropdownContent(&#039;menu-item-158-5&#039;)\" x-cloak=\"true\" class=\"sub-menu ska-preset--ska-theme--dropdown\"><li id=\"menu-item-159\" x-bind=\"item(&#039;menu-item-159-6&#039;)\" x-data=\"skaDropdown({&quot;on&quot;:&quot;hover&quot;,&quot;placement&quot;:&quot;right-start&quot;})\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-159\"><a href=\"#\"><span>Deeply<\/span><svg class=\"dropdown-icon\" aria-hidden=\"true\" viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.23017 7.20938C5.52875 6.92228 6.00353 6.93159 6.29063 7.23017L10 11.1679L13.7094 7.23017C13.9965 6.93159 14.4713 6.92228 14.7698 7.20938C15.0684 7.49647 15.0777 7.97125 14.7906 8.26983L10.5406 12.7698C10.3992 12.9169 10.204 13 10 13C9.79599 13 9.60078 12.9169 9.45938 12.7698L5.20938 8.26983C4.92228 7.97125 4.93159 7.49647 5.23017 7.20938Z\" fill=\"currentColor\"><\/path><\/svg><\/a><ul x-bind=\"dropdownContent(&#039;menu-item-159-6&#039;)\" x-cloak=\"true\" data-type=\"dropdown\" class=\"sub-menu ska-preset--ska-theme--dropdown\"><li id=\"menu-item-160\" x-bind=\"item(&#039;menu-item-160-7&#039;)\" x-data=\"skaDropdown({&quot;on&quot;:&quot;hover&quot;,&quot;placement&quot;:&quot;right-start&quot;})\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-160\"><a href=\"#\"><span>Nested<\/span><svg class=\"dropdown-icon\" aria-hidden=\"true\" viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.23017 7.20938C5.52875 6.92228 6.00353 6.93159 6.29063 7.23017L10 11.1679L13.7094 7.23017C13.9965 6.93159 14.4713 6.92228 14.7698 7.20938C15.0684 7.49647 15.0777 7.97125 14.7906 8.26983L10.5406 12.7698C10.3992 12.9169 10.204 13 10 13C9.79599 13 9.60078 12.9169 9.45938 12.7698L5.20938 8.26983C4.92228 7.97125 4.93159 7.49647 5.23017 7.20938Z\" fill=\"currentColor\"><\/path><\/svg><\/a><ul x-bind=\"dropdownContent(&#039;menu-item-160-7&#039;)\" x-cloak=\"true\" data-type=\"dropdown\" class=\"sub-menu ska-preset--ska-theme--dropdown\"><li id=\"menu-item-161\" x-bind=\"item(&#039;menu-item-161-8&#039;)\" x-data=\"skaDropdown({&quot;on&quot;:&quot;hover&quot;,&quot;placement&quot;:&quot;right-start&quot;})\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-161\"><a href=\"#\"><span>Item<\/span><svg class=\"dropdown-icon\" aria-hidden=\"true\" viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.23017 7.20938C5.52875 6.92228 6.00353 6.93159 6.29063 7.23017L10 11.1679L13.7094 7.23017C13.9965 6.93159 14.4713 6.92228 14.7698 7.20938C15.0684 7.49647 15.0777 7.97125 14.7906 8.26983L10.5406 12.7698C10.3992 12.9169 10.204 13 10 13C9.79599 13 9.60078 12.9169 9.45938 12.7698L5.20938 8.26983C4.92228 7.97125 4.93159 7.49647 5.23017 7.20938Z\" fill=\"currentColor\"><\/path><\/svg><\/a><ul x-bind=\"dropdownContent(&#039;menu-item-161-8&#039;)\" x-cloak=\"true\" data-type=\"dropdown\" class=\"sub-menu ska-preset--ska-theme--dropdown\"><li id=\"menu-item-162\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-162\"><a href=\"#\">Child<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Dropdown columns<\/h3>\n\n\n\n<p>To achieve the columns demonstrated in the above menu under &#8220;Blog&#8221; item some additional classes need to be added to menu items.<\/p>\n\n\n\n<p>To add classes to menu items ensure that the <strong>CSS Classes<\/strong> option is enabled under <strong>Screen Options<\/strong> in the <strong>top right corner<\/strong> of the screen when editing a classing WordPress navigation menu:<\/p>\n\n\n\n<a aria-label=\"View image in full screen\" data-pswp-height=\"151\" data-pswp-width=\"1024\" data-ska-pswp=\"ska-pswp-9\" href=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2024\/03\/image-80.png\" class=\"wp-block-ska-image image\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2024\/03\/image-80.png\" alt=\"Enabling CSS Classes input for WP nav menu under Screen Options\" width=\"1024\" height=\"151\" loading=\"lazy\"\/><\/a>\n\n\n\n<p>To create columns add the <code>ska-columns<\/code> class to the root item and <code>ska-no-dropdown<\/code> classes to its&#8217; direct children:<\/p>\n\n\n\n<a aria-label=\"View image in full screen\" data-pswp-height=\"1228\" data-pswp-width=\"486\" data-ska-pswp=\"ska-pswp-10\" href=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2024\/03\/image-81.png\" class=\"wp-block-ska-image image\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2024\/03\/image-81.png\" width=\"486\" height=\"1228\" loading=\"lazy\"\/><\/a>\n\n\n\n<h2 class=\"wp-block-heading\">Dropdown icon<\/h2>\n\n\n\n<p>To customize the dropdown icon a filter in your child theme&#8217;s <strong>functions.php<\/strong> can be used:<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><header><span class=\"title\">Customize dropdown icon with a filter in child theme&#8217;s functions.php<\/span><span class=\"label language-php\">PHP<\/span><\/header><div class=\"content\"><pre class=\"code php language-php\"><code class=\"language-php\">\/**\n * @param string $icon SVG or other HTML element to render.\n * @param string $context_id Optional identifier of where the icon is being used (example: 'menu' | 'language-switcher').\n * @param mixed $context Optional additional context, such as the `Ska_Blocks_Menu_Block` or `Ska_Blocks_Language_Switcher_Block` instance.\n * @return string\n *\/\nadd_filter('ska_blocks_dropdown_icon', function($icon, $context_id, $context) {\n\tif($context_id === 'menu') {\n\t\treturn '&lt;svg class=\"dropdown-icon\" ...';\n\t}\n\treturn $icon;\n}, 10, 3);<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Dropdown config<\/h2>\n\n\n\n<p>To customize the configuration of the <a href=\"https:\/\/ska-blocks.com\/docs\/ska-theme\/dropdown\/\" data-type=\"post\" data-id=\"530\">dropdown module<\/a> used with menu block the following filter can be used:<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><header><span class=\"title\">Customize dropdown icon with a filter in child theme&#8217;s functions.php<\/span><span class=\"label language-php\">PHP<\/span><\/header><div class=\"content\"><pre class=\"code php language-php\"><code class=\"language-php\">\/**\n * @param array $config Dropdown module configuration.\n * @param array $attributes Block attributes.\n * @param WP_Block $block Block instance.\n *\/\nadd_filter('ska_menu_block_dropdown_config', function($config, $attributes, $block) {\n\t$config&#91;'shiftCrossAxis'] = false;\n\treturn $config;\n}, 10, 3);<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Custom dropdown<\/h2>\n\n\n\n<p>To build a customized &#8220;mega menu&#8221; a WordPress synced pattern can be used to replace the default dropdown content.<\/p>\n\n\n\n<p>Add a Synced pattern from <strong>Edit site -&gt; Synced patterns<\/strong>.<\/p>\n\n\n\n<p>The pattern should contain 1 root element, ideally with the <strong>Dropdown<\/strong> preset applied.<\/p>\n\n\n\n<p>When editing a root menu item under <strong>Appearance -&gt; Menus<\/strong>, select a pattern to use as custom dropdown content for that item:<\/p>\n\n\n\n<div role=\"figure\" class=\"wp-block-ska-image image\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2024\/03\/image-110.png\" width=\"426\" height=\"422\" loading=\"lazy\"\/><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Menu block renders a classic WordPress navigation menu. When using ska-theme, the legacy WordPress menus are re-enabled for a simpler alternative to the WordPress core Navigation block. The ska\/menu block has an option to select one of these menus and render it in the editor. When you don&#8217;t have any menus yet, it can&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[4],"class_list":["post-50","post","type-post","status-publish","format-standard","hentry","category-ska-theme","tag-blocks"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/50","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=50"}],"version-history":[{"count":2,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/50\/revisions"}],"predecessor-version":[{"id":288,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/50\/revisions\/288"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=50"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=50"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=50"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}