{"id":25,"date":"2025-09-26T08:50:47","date_gmt":"2025-09-26T08:50:47","guid":{"rendered":"https:\/\/ska-blocks.com\/docs\/2025\/09\/26\/menu\/"},"modified":"2025-09-27T08:20:53","modified_gmt":"2025-09-27T08:20:53","slug":"menu","status":"publish","type":"post","link":"https:\/\/ska-blocks.com\/docs\/menu\/","title":{"rendered":"Menu"},"content":{"rendered":"\n<p class=\"lead\">Examples of styling the <code>&lt;ul> -> &lt;li><\/code> elements produced by the <a href=\"https:\/\/ska-blocks.com\/docs\/menu-block\/\" data-type=\"post\" data-id=\"50\">Menu block<\/a> with Tailwind classes.<\/p>\n\n\n\n<p>Usage &#8211; copy the code for the desired appearance, paste it into your block editor, swap out the Menu block&#8217;s placeholder menu with one from your own WordPress nav menus. You can then edit the Tailwind classes to tailor the appearance further to meet your needs. If you&#8217;d like to re-use the appearance in multiple places and keep any changes in sync create a <a href=\"https:\/\/ska-blocks.com\/docs\/presets\/\" data-type=\"post\" data-id=\"46\">Preset<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Simple menu<\/h2>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\"><ul class=\"ska-menu wp-block-ska-menu table [&amp;&gt;li]:[&amp;&gt;a]:block [&amp;&gt;li]:[&amp;&gt;a]:px-5 [&amp;&gt;li]:[&amp;&gt;a]:py-2 [&amp;_.sub-menu]:pl-5 [&amp;&gt;li]:[&amp;&gt;.sub-menu]:-mt-2.5 [&amp;&gt;li]:[&amp;&gt;.sub-menu]:mb-2.5 min-w-56 text-base [&amp;_.sub-menu]:[&amp;_a]:text-sm [&amp;_a.active]:font-bold [&amp;&gt;li]:[&amp;&gt;a]:text-site [&amp;_.sub-menu]:[&amp;_a]:text-site-muted rounded border divide-y shadow\"><li class=\"menu-item\"><a href=\"https:\/\/ska-blocks.com\/docs\/\">Home<\/a><\/li><li class=\"menu-item\"><a href=\"#\">About<\/a><\/li><li class=\"menu-item\"><a href=\"#\">Services<\/a><\/li><li class=\"menu-item\"><a href=\"https:\/\/ska-blocks.com\/docs\/all\/\">Blog<\/a><\/li><li class=\"menu-item\"><a href=\"#\">Contact<\/a><\/li><\/ul><\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/menu {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;table [\\u0026\\u003eli]:[\\u0026\\u003ea]:block [\\u0026\\u003eli]:[\\u0026\\u003ea]:px-5 [\\u0026\\u003eli]:[\\u0026\\u003ea]:py-2 [\\u0026_.sub-menu]:pl-5 [\\u0026\\u003eli]:[\\u0026\\u003e.sub-menu]:-mt-2.5 [\\u0026\\u003eli]:[\\u0026\\u003e.sub-menu]:mb-2.5 min-w-56 text-base [\\u0026_.sub-menu]:[\\u0026_a]:text-sm [\\u0026_a.active]:font-bold [\\u0026\\u003eli]:[\\u0026\\u003ea]:text-site [\\u0026_.sub-menu]:[\\u0026_a]:text-site-muted rounded border divide-y shadow&quot;,&quot;css&quot;:&quot;.table{display:table}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:block\\u003eli\\u003ea{display:block}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:px-5\\u003eli\\u003ea{padding-inline:var(--spacing-5)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:py-2\\u003eli\\u003ea{padding-block:var(--spacing-2)}.\\u005c[\\u005c\\u0026_\\u005c.sub-menu\\u005c]\\u005c:pl-5 .sub-menu{padding-left:var(--spacing-5)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003e\\u005c.sub-menu\\u005c]\\u005c:-mt-2\\u005c.5\\u003eli\\u003e.sub-menu{margin-top:calc(var(--spacing-2_5)*-1)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003e\\u005c.sub-menu\\u005c]\\u005c:mb-2\\u005c.5\\u003eli\\u003e.sub-menu{margin-bottom:var(--spacing-2_5)}.min-w-56{min-width:var(--spacing-56)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.\\u005c[\\u005c\\u0026_\\u005c.sub-menu\\u005c]\\u005c:\\u005c[\\u005c\\u0026_a\\u005c]\\u005c:text-sm .sub-menu a{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.\\u005c[\\u005c\\u0026_a\\u005c.active\\u005c]\\u005c:font-bold a.active{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:text-site\\u003eli\\u003ea{color:var(--color-site)}.\\u005c[\\u005c\\u0026_\\u005c.sub-menu\\u005c]\\u005c:\\u005c[\\u005c\\u0026_a\\u005c]\\u005c:text-site-muted .sub-menu a{color:var(--color-site-muted)}.rounded{border-radius:var(--radius)}.border{border-style:var(--tw-border-style);border-width:1px}:where(.divide-y\\u003e:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}.shadow{--tw-shadow:var(--shadow-sm);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026\\u003eli]&quot;:{&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026\\u003ea]&quot;:{&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;5&quot;,&quot;y&quot;:&quot;2&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;block&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site&quot;}}}}},&quot;skaBlocksMargin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;[\\u0026\\u003e.sub-menu]&quot;:{&quot;t&quot;:&quot;-2.5&quot;,&quot;b&quot;:&quot;2.5&quot;}},&quot;t&quot;:&quot;sides&quot;}},&quot;[\\u0026_.sub-menu]&quot;:{&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026_a]&quot;:{&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site-muted&quot;}}},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;sm&quot;}}}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;l&quot;:&quot;5&quot;}},&quot;t&quot;:&quot;sides&quot;}}},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;table&quot;}}},&quot;skaBlocksMinWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;56&quot;}},&quot;a&quot;:[]},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;base&quot;}}},&quot;skaBlocksFontWeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;[\\u0026_a.active]&quot;:{&quot;@&quot;:&quot;bold&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksDivideWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;&quot;,&quot;y&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBoxShadow&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}}} \/--&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\">Menu with children<\/h2>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\"><ul class=\"ska-menu wp-block-ska-menu table [&amp;&gt;li]:[&amp;&gt;a]:block [&amp;&gt;li]:[&amp;&gt;a]:px-4 [&amp;&gt;li]:[&amp;&gt;a]:py-2 [&amp;_.sub-menu]:pl-4 [&amp;&gt;li]:[&amp;&gt;.sub-menu]:-mt-2.5 [&amp;&gt;li]:[&amp;&gt;.sub-menu]:mb-2.5 min-w-64 text-base [&amp;_.sub-menu]:[&amp;_a]:text-sm [&amp;&gt;li]:[&amp;&gt;a]:text-site [&amp;_.sub-menu]:[&amp;_a]:text-site-muted [&amp;&gt;li]:[&amp;&gt;a]:[&amp;.active:not(:hover)]:bg-gray-50 [&amp;&gt;li]:[&amp;&gt;a]:hover:bg-gray-100 rounded border divide-y shadow [&amp;&gt;li]:[&amp;&gt;a]:transition-colors\"><li class=\"menu-item\"><a href=\"https:\/\/ska-blocks.com\/docs\/\">Home<\/a><\/li><li class=\"menu-item\"><a href=\"#\">About<\/a><\/li><li class=\"menu-item menu-item-has-children\"><a href=\"#\">Services<\/a><ul class=\"sub-menu\"><li class=\"menu-item\"><a href=\"#\">Web design &amp; development<\/a><\/li><li class=\"menu-item\"><a href=\"#\">Digital marketing<\/a><\/li><li class=\"menu-item\"><a href=\"#\">SEO optimization<\/a><\/li><li class=\"menu-item\"><a href=\"#\">Content creation<\/a><\/li><li class=\"menu-item\"><a href=\"#\">E-commerce solutions<\/a><\/li><\/ul><\/li><li class=\"menu-item\"><a href=\"https:\/\/ska-blocks.com\/docs\/all\/\">Blog<\/a><\/li><li class=\"menu-item\"><a href=\"#\">Contact<\/a><\/li><\/ul><\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/menu {&quot;id&quot;:-2,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;table [\\u0026\\u003eli]:[\\u0026\\u003ea]:block [\\u0026\\u003eli]:[\\u0026\\u003ea]:px-4 [\\u0026\\u003eli]:[\\u0026\\u003ea]:py-2 [\\u0026_.sub-menu]:pl-4 [\\u0026\\u003eli]:[\\u0026\\u003e.sub-menu]:-mt-2.5 [\\u0026\\u003eli]:[\\u0026\\u003e.sub-menu]:mb-2.5 min-w-64 text-base [\\u0026_.sub-menu]:[\\u0026_a]:text-sm [\\u0026\\u003eli]:[\\u0026\\u003ea]:text-site [\\u0026_.sub-menu]:[\\u0026_a]:text-site-muted [\\u0026\\u003eli]:[\\u0026\\u003ea]:[\\u0026.active:not(:hover)]:bg-gray-50 [\\u0026\\u003eli]:[\\u0026\\u003ea]:hover:bg-gray-100 rounded border divide-y shadow [\\u0026\\u003eli]:[\\u0026\\u003ea]:transition-colors&quot;,&quot;css&quot;:&quot;.table{display:table}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:block\\u003eli\\u003ea{display:block}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:px-4\\u003eli\\u003ea{padding-inline:var(--spacing-4)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:py-2\\u003eli\\u003ea{padding-block:var(--spacing-2)}.\\u005c[\\u005c\\u0026_\\u005c.sub-menu\\u005c]\\u005c:pl-4 .sub-menu{padding-left:var(--spacing-4)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003e\\u005c.sub-menu\\u005c]\\u005c:-mt-2\\u005c.5\\u003eli\\u003e.sub-menu{margin-top:calc(var(--spacing-2_5)*-1)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003e\\u005c.sub-menu\\u005c]\\u005c:mb-2\\u005c.5\\u003eli\\u003e.sub-menu{margin-bottom:var(--spacing-2_5)}.min-w-64{min-width:var(--spacing-64)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.\\u005c[\\u005c\\u0026_\\u005c.sub-menu\\u005c]\\u005c:\\u005c[\\u005c\\u0026_a\\u005c]\\u005c:text-sm .sub-menu a{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:text-site\\u003eli\\u003ea{color:var(--color-site)}.\\u005c[\\u005c\\u0026_\\u005c.sub-menu\\u005c]\\u005c:\\u005c[\\u005c\\u0026_a\\u005c]\\u005c:text-site-muted .sub-menu a{color:var(--color-site-muted)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c.active\\u005c:not\\u005c(\\u005c:hover\\u005c)\\u005c]\\u005c:bg-gray-50\\u003eli\\u003ea.active:not(:hover){background-color:var(--color-gray-50)}@media (hover:hover){.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:hover\\u005c:bg-gray-100\\u003eli\\u003ea:hover{background-color:var(--color-gray-100)}}.rounded{border-radius:var(--radius)}.border{border-style:var(--tw-border-style);border-width:1px}:where(.divide-y\\u003e:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}.shadow{--tw-shadow:var(--shadow-sm);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:transition-colors\\u003eli\\u003ea{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026\\u003eli]&quot;:{&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026\\u003ea]&quot;:{&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;4&quot;,&quot;y&quot;:&quot;2&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;block&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;[\\u0026.active:not(:hover)]&quot;:{&quot;@&quot;:&quot;gray-50&quot;},&quot;hover&quot;:{&quot;@&quot;:&quot;gray-100&quot;}}},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;colors&quot;}}}}},&quot;skaBlocksMargin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;[\\u0026\\u003e.sub-menu]&quot;:{&quot;t&quot;:&quot;-2.5&quot;,&quot;b&quot;:&quot;2.5&quot;}},&quot;t&quot;:&quot;sides&quot;}},&quot;[\\u0026_.sub-menu]&quot;:{&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026_a]&quot;:{&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site-muted&quot;}}},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;sm&quot;}}}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;l&quot;:&quot;4&quot;}},&quot;t&quot;:&quot;sides&quot;}}},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;table&quot;}}},&quot;skaBlocksMinWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;64&quot;}},&quot;a&quot;:[]},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;base&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksDivideWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;&quot;,&quot;y&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBoxShadow&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}}} \/--&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\">Menu with dropdowns<\/h2>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\"><ul class=\"ska-menu wp-block-ska-menu table [&amp;&gt;li]:[&amp;&gt;a]:flex [&amp;&gt;li]:[&amp;&gt;a]:flex-row [&amp;&gt;li]:[&amp;&gt;a]:justify-between [&amp;&gt;li]:[&amp;&gt;a]:items-center [&amp;&gt;li]:[&amp;&gt;a]:px-5 [&amp;&gt;li]:[&amp;&gt;a]:py-2 [&amp;&gt;li]:[&amp;&gt;.sub-menu]:-mt-2.5 [&amp;&gt;li]:[&amp;&gt;.sub-menu]:mb-2.5 min-w-64 text-base [&amp;_a.active]:font-bold [&amp;&gt;li]:[&amp;&gt;a]:text-site rounded border divide-y shadow [&amp;&gt;li]:[&amp;&gt;a]:[&amp;&gt;.dropdown-icon]:-rotate-90\" x-data=\"skaDropdown({&quot;on&quot;:&quot;hover&quot;,&quot;placement&quot;:&quot;right-start&quot;})\"><li class=\"menu-item\"><a href=\"https:\/\/ska-blocks.com\/docs\/\">Home<\/a><\/li><li class=\"menu-item\"><a href=\"#\">About<\/a><\/li><li x-bind=\"item('ska-placeholder-services-2')\" class=\"menu-item menu-item-has-children\"><a href=\"#\"><span>Services<\/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('ska-placeholder-services-2')\" x-cloak class=\"sub-menu ska-preset--ska-theme--dropdown\"><li class=\"menu-item\"><a href=\"#\">Web design &amp; development<\/a><\/li><li class=\"menu-item\"><a href=\"#\">Digital marketing<\/a><\/li><li class=\"menu-item\"><a href=\"#\">SEO optimization<\/a><\/li><li class=\"menu-item\"><a href=\"#\">Content creation<\/a><\/li><li class=\"menu-item\"><a href=\"#\">E-commerce solutions<\/a><\/li><\/ul><\/li><li class=\"menu-item\"><a href=\"https:\/\/ska-blocks.com\/docs\/all\/\">Blog<\/a><\/li><li class=\"menu-item\"><a href=\"#\">Contact<\/a><\/li><\/ul><\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/menu {&quot;id&quot;:-2,&quot;dropdown&quot;:&quot;hover&quot;,&quot;dropdownPlacement&quot;:&quot;right-start&quot;,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;table [\\u0026\\u003eli]:[\\u0026\\u003ea]:flex [\\u0026\\u003eli]:[\\u0026\\u003ea]:flex-row [\\u0026\\u003eli]:[\\u0026\\u003ea]:justify-between [\\u0026\\u003eli]:[\\u0026\\u003ea]:items-center [\\u0026\\u003eli]:[\\u0026\\u003ea]:px-5 [\\u0026\\u003eli]:[\\u0026\\u003ea]:py-2 [\\u0026\\u003eli]:[\\u0026\\u003e.sub-menu]:-mt-2.5 [\\u0026\\u003eli]:[\\u0026\\u003e.sub-menu]:mb-2.5 min-w-64 text-base [\\u0026_a.active]:font-bold [\\u0026\\u003eli]:[\\u0026\\u003ea]:text-site rounded border divide-y shadow [\\u0026\\u003eli]:[\\u0026\\u003ea]:[\\u0026\\u003e.dropdown-icon]:-rotate-90&quot;,&quot;css&quot;:&quot;.table{display:table}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:flex\\u003eli\\u003ea{display:flex}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:flex-row\\u003eli\\u003ea{flex-direction:row}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:justify-between\\u003eli\\u003ea{justify-content:space-between}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:items-center\\u003eli\\u003ea{align-items:center}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:px-5\\u003eli\\u003ea{padding-inline:var(--spacing-5)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:py-2\\u003eli\\u003ea{padding-block:var(--spacing-2)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003e\\u005c.sub-menu\\u005c]\\u005c:-mt-2\\u005c.5\\u003eli\\u003e.sub-menu{margin-top:calc(var(--spacing-2_5)*-1)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003e\\u005c.sub-menu\\u005c]\\u005c:mb-2\\u005c.5\\u003eli\\u003e.sub-menu{margin-bottom:var(--spacing-2_5)}.min-w-64{min-width:var(--spacing-64)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.\\u005c[\\u005c\\u0026_a\\u005c.active\\u005c]\\u005c:font-bold a.active{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:text-site\\u003eli\\u003ea{color:var(--color-site)}.rounded{border-radius:var(--radius)}.border{border-style:var(--tw-border-style);border-width:1px}:where(.divide-y\\u003e:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}.shadow{--tw-shadow:var(--shadow-sm);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003e\\u005c.dropdown-icon\\u005c]\\u005c:-rotate-90\\u003eli\\u003ea\\u003e.dropdown-icon{rotate:-90deg}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026\\u003eli]&quot;:{&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026\\u003ea]&quot;:{&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;5&quot;,&quot;y&quot;:&quot;2&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;flex&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site&quot;}}},&quot;skaBlocksFlexDirection&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;row&quot;}}},&quot;skaBlocksAlignItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksJustifyContent&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;between&quot;}}},&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026\\u003e.dropdown-icon]&quot;:{&quot;skaBlocksRotate&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;-90&quot;}}}}}}},&quot;skaBlocksMargin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;[\\u0026\\u003e.sub-menu]&quot;:{&quot;t&quot;:&quot;-2.5&quot;,&quot;b&quot;:&quot;2.5&quot;}},&quot;t&quot;:&quot;sides&quot;}}},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;table&quot;}}},&quot;skaBlocksMinWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;64&quot;}},&quot;a&quot;:[]},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;base&quot;}}},&quot;skaBlocksFontWeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;[\\u0026_a.active]&quot;:{&quot;@&quot;:&quot;bold&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksDivideWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;&quot;,&quot;y&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBoxShadow&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}}} \/--&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\">Accordion menu<\/h2>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\"><ul class=\"ska-menu wp-block-ska-menu flex [&amp;_li&gt;.item]:flex flex-col [&amp;_li&gt;.item]:flex-row gap-2.5 [&amp;_li&gt;.item]:items-center [&amp;_li&gt;.item]:[&amp;&gt;button]:p-2 [&amp;_.sub-menu]:pt-1.5 [&amp;_.sub-menu]:pb-3 [&amp;_.sub-menu]:pl-3 [&amp;_li&gt;.item]:[&amp;&gt;button]:-m-2 [&amp;_li&gt;.item]:[&amp;&gt;button]:ml-auto! max-w-64 text-xl [&amp;_.sub-menu]:text-lg font-medium [&amp;_li_a]:tracking-tight [&amp;_li&gt;.item]:[&amp;&gt;button]:hover:text-primary-light [&amp;_li_a]:text-site [&amp;_li_a]:hover:text-site-subtext [&amp;_li&gt;.item]:[&amp;&gt;button]:transition-colors [&amp;_li&gt;.item]:[&amp;&gt;button]:[&amp;&gt;.dropdown-icon]:transition-transform [&amp;_li_a]:transition-colors [&amp;_li&gt;.item]:[&amp;&gt;button]:not-aria-[expanded=true]:[&amp;&gt;.dropdown-icon]:-rotate-90\" x-data=\"skaAccordion({&quot;exclusive&quot;:true})\"><li class=\"menu-item\"><a href=\"https:\/\/ska-blocks.com\/docs\/\">Home<\/a><\/li><li class=\"menu-item\"><a href=\"#\">About<\/a><\/li><li x-bind=\"item\" class=\"menu-item menu-item-has-children\"><div class=\"item\"><a id=\"ska-placeholder-services-3\" href=\"#\">Services<\/a><button x-bind=\"toggle\" aria-label=\"Expand &quot;Services&quot;\"><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><\/button><\/div><section x-bind=\"content\" x-cloak aria-labelledby=\"ska-placeholder-services-3\"><ul class=\"sub-menu\"><li class=\"menu-item\"><a href=\"#\">Web design &amp; development<\/a><\/li><li class=\"menu-item\"><a href=\"#\">Digital marketing<\/a><\/li><li class=\"menu-item\"><a href=\"#\">SEO optimization<\/a><\/li><li class=\"menu-item\"><a href=\"#\">Content creation<\/a><\/li><li class=\"menu-item\"><a href=\"#\">E-commerce solutions<\/a><\/li><\/ul><\/section><\/li><li class=\"menu-item\"><a href=\"https:\/\/ska-blocks.com\/docs\/all\/\">Blog<\/a><\/li><li class=\"menu-item\"><a href=\"#\">Contact<\/a><\/li><\/ul><\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/menu {&quot;id&quot;:-2,&quot;mode&quot;:&quot;accordion&quot;,&quot;accordionExclusive&quot;:true,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;flex [\\u0026_li\\u003e.item]:flex flex-col [\\u0026_li\\u003e.item]:flex-row gap-2.5 [\\u0026_li\\u003e.item]:items-center [\\u0026_li\\u003e.item]:[\\u0026\\u003ebutton]:p-2 [\\u0026_.sub-menu]:pt-1.5 [\\u0026_.sub-menu]:pb-3 [\\u0026_.sub-menu]:pl-3 [\\u0026_li\\u003e.item]:[\\u0026\\u003ebutton]:-m-2 [\\u0026_li\\u003e.item]:[\\u0026\\u003ebutton]:ml-auto! max-w-64 text-xl [\\u0026_.sub-menu]:text-lg font-medium [\\u0026_li_a]:tracking-tight [\\u0026_li\\u003e.item]:[\\u0026\\u003ebutton]:hover:text-primary-light [\\u0026_li_a]:text-site [\\u0026_li_a]:hover:text-site-subtext [\\u0026_li\\u003e.item]:[\\u0026\\u003ebutton]:transition-colors [\\u0026_li\\u003e.item]:[\\u0026\\u003ebutton]:[\\u0026\\u003e.dropdown-icon]:transition-transform [\\u0026_li_a]:transition-colors [\\u0026_li\\u003e.item]:[\\u0026\\u003ebutton]:not-aria-[expanded=true]:[\\u0026\\u003e.dropdown-icon]:-rotate-90&quot;,&quot;css&quot;:&quot;.flex{display:flex}.\\u005c[\\u005c\\u0026_li\\u005c\\u003e\\u005c.item\\u005c]\\u005c:flex li\\u003e.item{display:flex}.flex-col{flex-direction:column}.\\u005c[\\u005c\\u0026_li\\u005c\\u003e\\u005c.item\\u005c]\\u005c:flex-row li\\u003e.item{flex-direction:row}.gap-2\\u005c.5{gap:var(--spacing-2_5)}.\\u005c[\\u005c\\u0026_li\\u005c\\u003e\\u005c.item\\u005c]\\u005c:items-center li\\u003e.item{align-items:center}.\\u005c[\\u005c\\u0026_li\\u005c\\u003e\\u005c.item\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ebutton\\u005c]\\u005c:p-2 li\\u003e.item\\u003ebutton{padding:var(--spacing-2)}.\\u005c[\\u005c\\u0026_\\u005c.sub-menu\\u005c]\\u005c:pt-1\\u005c.5 .sub-menu{padding-top:var(--spacing-1_5)}.\\u005c[\\u005c\\u0026_\\u005c.sub-menu\\u005c]\\u005c:pb-3 .sub-menu{padding-bottom:var(--spacing-3)}.\\u005c[\\u005c\\u0026_\\u005c.sub-menu\\u005c]\\u005c:pl-3 .sub-menu{padding-left:var(--spacing-3)}.\\u005c[\\u005c\\u0026_li\\u005c\\u003e\\u005c.item\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ebutton\\u005c]\\u005c:-m-2 li\\u003e.item\\u003ebutton{margin:calc(var(--spacing-2)*-1)}.\\u005c[\\u005c\\u0026_li\\u005c\\u003e\\u005c.item\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ebutton\\u005c]\\u005c:ml-auto\\u005c! li\\u003e.item\\u003ebutton{margin-left:auto!important}.max-w-64{max-width:var(--spacing-64)}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.\\u005c[\\u005c\\u0026_\\u005c.sub-menu\\u005c]\\u005c:text-lg .sub-menu{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.\\u005c[\\u005c\\u0026_li_a\\u005c]\\u005c:tracking-tight li a{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}@media (hover:hover){.\\u005c[\\u005c\\u0026_li\\u005c\\u003e\\u005c.item\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ebutton\\u005c]\\u005c:hover\\u005c:text-primary-light li\\u003e.item\\u003ebutton:hover{color:var(--color-primary-light)}}.\\u005c[\\u005c\\u0026_li_a\\u005c]\\u005c:text-site li a{color:var(--color-site)}@media (hover:hover){.\\u005c[\\u005c\\u0026_li_a\\u005c]\\u005c:hover\\u005c:text-site-subtext li a:hover{color:var(--color-site-subtext)}}.\\u005c[\\u005c\\u0026_li\\u005c\\u003e\\u005c.item\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ebutton\\u005c]\\u005c:transition-colors li\\u003e.item\\u003ebutton{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.\\u005c[\\u005c\\u0026_li\\u005c\\u003e\\u005c.item\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ebutton\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003e\\u005c.dropdown-icon\\u005c]\\u005c:transition-transform li\\u003e.item\\u003ebutton\\u003e.dropdown-icon{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.\\u005c[\\u005c\\u0026_li_a\\u005c]\\u005c:transition-colors li a{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.\\u005c[\\u005c\\u0026_li\\u005c\\u003e\\u005c.item\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ebutton\\u005c]\\u005c:not-aria-\\u005c[expanded\\u005c=true\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003e\\u005c.dropdown-icon\\u005c]\\u005c:-rotate-90 li\\u003e.item\\u003ebutton:not([aria-expanded=true])\\u003e.dropdown-icon{rotate:-90deg}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksRender&quot;:{&quot;noRender&quot;:false},&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026_li\\u003e.item]&quot;:{&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;flex&quot;}}},&quot;skaBlocksFlexDirection&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;row&quot;}}},&quot;skaBlocksAlignItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026\\u003ebutton]&quot;:{&quot;skaBlocksMargin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;-2&quot;,&quot;l&quot;:&quot;auto!&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026\\u003e.dropdown-icon]&quot;:{&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;transform&quot;}}}}},&quot;skaBlocksRotate&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;not-aria-[expanded=true]:[\\u0026\\u003e.dropdown-icon]&quot;:{&quot;@&quot;:&quot;-90&quot;}}},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;colors&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;hover&quot;:{&quot;@&quot;:&quot;primary-light&quot;},&quot;aria-[expanded=true]&quot;:{&quot;@&quot;:&quot;&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;2&quot;}}}}}},&quot;[\\u0026_li_a]&quot;:{&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site&quot;},&quot;hover&quot;:{&quot;@&quot;:&quot;site-subtext&quot;},&quot;[\\u0026.active]&quot;:{&quot;@&quot;:&quot;&quot;}}},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;colors&quot;}}},&quot;skaBlocksLetterSpacing&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;tight&quot;}}}},&quot;[\\u0026_.sub-menu]&quot;:{&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;t&quot;:&quot;1.5&quot;,&quot;b&quot;:&quot;3&quot;,&quot;l&quot;:&quot;3&quot;,&quot;y&quot;:&quot;&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;lg&quot;}}}}},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;flex&quot;}}},&quot;skaBlocksFlexDirection&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;col&quot;}}},&quot;skaBlocksGap&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;2.5&quot;}}},&quot;skaBlocksMaxWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;64&quot;}}},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;xl&quot;}}},&quot;skaBlocksFontWeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;medium&quot;}}}} \/--&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\">Basic menu<\/h2>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\"><ul class=\"ska-menu wp-block-ska-menu table [&amp;&gt;li]:[&amp;&gt;a]:block [&amp;&gt;li]:[&amp;&gt;a]:px-4 [&amp;&gt;li]:[&amp;&gt;a]:py-1.5 [&amp;_.sub-menu]:pl-4 [&amp;&gt;li]:[&amp;&gt;.sub-menu]:mb-2.5 space-y-1 min-w-56 text-base [&amp;_.sub-menu]:[&amp;_a]:text-sm [&amp;&gt;li]:[&amp;&gt;a]:text-site [&amp;_.sub-menu]:[&amp;_a]:text-site-muted [&amp;&gt;li]:[&amp;&gt;a]:[&amp;.active:not(:hover)]:bg-gray-50 [&amp;&gt;li]:[&amp;&gt;a]:hover:bg-gray-100 [&amp;&gt;li]:[&amp;&gt;a]:rounded [&amp;&gt;li]:[&amp;&gt;a]:transition-colors\"><li class=\"menu-item\"><a href=\"https:\/\/ska-blocks.com\/docs\/\">Home<\/a><\/li><li class=\"menu-item\"><a href=\"#\">About<\/a><\/li><li class=\"menu-item\"><a href=\"#\">Services<\/a><\/li><li class=\"menu-item\"><a href=\"https:\/\/ska-blocks.com\/docs\/all\/\">Blog<\/a><\/li><li class=\"menu-item\"><a href=\"#\">Contact<\/a><\/li><\/ul><\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/menu {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;table [\\u0026\\u003eli]:[\\u0026\\u003ea]:block [\\u0026\\u003eli]:[\\u0026\\u003ea]:px-4 [\\u0026\\u003eli]:[\\u0026\\u003ea]:py-1.5 [\\u0026_.sub-menu]:pl-4 [\\u0026\\u003eli]:[\\u0026\\u003e.sub-menu]:mb-2.5 space-y-1 min-w-56 text-base [\\u0026_.sub-menu]:[\\u0026_a]:text-sm [\\u0026\\u003eli]:[\\u0026\\u003ea]:text-site [\\u0026_.sub-menu]:[\\u0026_a]:text-site-muted [\\u0026\\u003eli]:[\\u0026\\u003ea]:[\\u0026.active:not(:hover)]:bg-gray-50 [\\u0026\\u003eli]:[\\u0026\\u003ea]:hover:bg-gray-100 [\\u0026\\u003eli]:[\\u0026\\u003ea]:rounded [\\u0026\\u003eli]:[\\u0026\\u003ea]:transition-colors&quot;,&quot;css&quot;:&quot;.table{display:table}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:block\\u003eli\\u003ea{display:block}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:px-4\\u003eli\\u003ea{padding-inline:var(--spacing-4)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:py-1\\u005c.5\\u003eli\\u003ea{padding-block:var(--spacing-1_5)}.\\u005c[\\u005c\\u0026_\\u005c.sub-menu\\u005c]\\u005c:pl-4 .sub-menu{padding-left:var(--spacing-4)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003e\\u005c.sub-menu\\u005c]\\u005c:mb-2\\u005c.5\\u003eli\\u003e.sub-menu{margin-bottom:var(--spacing-2_5)}:where(.space-y-1\\u003e:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing-1)*var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing-1)*calc(1 - var(--tw-space-y-reverse)))}.min-w-56{min-width:var(--spacing-56)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.\\u005c[\\u005c\\u0026_\\u005c.sub-menu\\u005c]\\u005c:\\u005c[\\u005c\\u0026_a\\u005c]\\u005c:text-sm .sub-menu a{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:text-site\\u003eli\\u003ea{color:var(--color-site)}.\\u005c[\\u005c\\u0026_\\u005c.sub-menu\\u005c]\\u005c:\\u005c[\\u005c\\u0026_a\\u005c]\\u005c:text-site-muted .sub-menu a{color:var(--color-site-muted)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c.active\\u005c:not\\u005c(\\u005c:hover\\u005c)\\u005c]\\u005c:bg-gray-50\\u003eli\\u003ea.active:not(:hover){background-color:var(--color-gray-50)}@media (hover:hover){.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:hover\\u005c:bg-gray-100\\u003eli\\u003ea:hover{background-color:var(--color-gray-100)}}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:rounded\\u003eli\\u003ea{border-radius:var(--radius)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:transition-colors\\u003eli\\u003ea{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026\\u003eli]&quot;:{&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026\\u003ea]&quot;:{&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;4&quot;,&quot;y&quot;:&quot;1.5&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;block&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;[\\u0026.active:not(:hover)]&quot;:{&quot;@&quot;:&quot;gray-50&quot;},&quot;hover&quot;:{&quot;@&quot;:&quot;gray-100&quot;}}},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;colors&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}}}},&quot;skaBlocksMargin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;[\\u0026\\u003e.sub-menu]&quot;:{&quot;t&quot;:&quot;&quot;,&quot;b&quot;:&quot;2.5&quot;}},&quot;t&quot;:&quot;sides&quot;}},&quot;[\\u0026_.sub-menu]&quot;:{&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026_a]&quot;:{&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site-muted&quot;}}},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;sm&quot;}}}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;l&quot;:&quot;4&quot;}},&quot;t&quot;:&quot;sides&quot;}}},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;table&quot;}}},&quot;skaBlocksSpaceBetween&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;1&quot;}}},&quot;skaBlocksMinWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;56&quot;}},&quot;a&quot;:[]},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;base&quot;}}}} \/--&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\">Basic menu with children<\/h2>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\"><ul class=\"ska-menu wp-block-ska-menu table [&amp;&gt;li]:[&amp;&gt;a]:block [&amp;&gt;li]:[&amp;&gt;a]:px-4 [&amp;&gt;li]:[&amp;&gt;a]:py-1.5 [&amp;_.sub-menu]:pl-4 [&amp;&gt;li]:[&amp;&gt;.sub-menu]:mb-2.5 space-y-1 min-w-56 text-base [&amp;_.sub-menu]:[&amp;_a]:text-sm [&amp;&gt;li]:[&amp;&gt;a]:text-site [&amp;_.sub-menu]:[&amp;_a]:text-site-muted [&amp;&gt;li]:[&amp;&gt;a]:[&amp;.active:not(:hover)]:bg-gray-50 [&amp;&gt;li]:[&amp;&gt;a]:hover:bg-gray-100 [&amp;&gt;li]:[&amp;&gt;a]:rounded [&amp;&gt;li]:[&amp;&gt;a]:transition-colors\"><li class=\"menu-item\"><a href=\"https:\/\/ska-blocks.com\/docs\/\">Home<\/a><\/li><li class=\"menu-item\"><a href=\"#\">About<\/a><\/li><li class=\"menu-item menu-item-has-children\"><a href=\"#\">Services<\/a><ul class=\"sub-menu\"><li class=\"menu-item\"><a href=\"#\">Web design &amp; development<\/a><\/li><li class=\"menu-item\"><a href=\"#\">Digital marketing<\/a><\/li><li class=\"menu-item\"><a href=\"#\">SEO optimization<\/a><\/li><li class=\"menu-item\"><a href=\"#\">Content creation<\/a><\/li><li class=\"menu-item\"><a href=\"#\">E-commerce solutions<\/a><\/li><\/ul><\/li><li class=\"menu-item\"><a href=\"https:\/\/ska-blocks.com\/docs\/all\/\">Blog<\/a><\/li><li class=\"menu-item\"><a href=\"#\">Contact<\/a><\/li><\/ul><\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/menu {&quot;id&quot;:-2,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;table [\\u0026\\u003eli]:[\\u0026\\u003ea]:block [\\u0026\\u003eli]:[\\u0026\\u003ea]:px-4 [\\u0026\\u003eli]:[\\u0026\\u003ea]:py-1.5 [\\u0026_.sub-menu]:pl-4 [\\u0026\\u003eli]:[\\u0026\\u003e.sub-menu]:mb-2.5 space-y-1 min-w-56 text-base [\\u0026_.sub-menu]:[\\u0026_a]:text-sm [\\u0026\\u003eli]:[\\u0026\\u003ea]:text-site [\\u0026_.sub-menu]:[\\u0026_a]:text-site-muted [\\u0026\\u003eli]:[\\u0026\\u003ea]:[\\u0026.active:not(:hover)]:bg-gray-50 [\\u0026\\u003eli]:[\\u0026\\u003ea]:hover:bg-gray-100 [\\u0026\\u003eli]:[\\u0026\\u003ea]:rounded [\\u0026\\u003eli]:[\\u0026\\u003ea]:transition-colors&quot;,&quot;css&quot;:&quot;.table{display:table}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:block\\u003eli\\u003ea{display:block}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:px-4\\u003eli\\u003ea{padding-inline:var(--spacing-4)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:py-1\\u005c.5\\u003eli\\u003ea{padding-block:var(--spacing-1_5)}.\\u005c[\\u005c\\u0026_\\u005c.sub-menu\\u005c]\\u005c:pl-4 .sub-menu{padding-left:var(--spacing-4)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003e\\u005c.sub-menu\\u005c]\\u005c:mb-2\\u005c.5\\u003eli\\u003e.sub-menu{margin-bottom:var(--spacing-2_5)}:where(.space-y-1\\u003e:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing-1)*var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing-1)*calc(1 - var(--tw-space-y-reverse)))}.min-w-56{min-width:var(--spacing-56)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.\\u005c[\\u005c\\u0026_\\u005c.sub-menu\\u005c]\\u005c:\\u005c[\\u005c\\u0026_a\\u005c]\\u005c:text-sm .sub-menu a{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:text-site\\u003eli\\u003ea{color:var(--color-site)}.\\u005c[\\u005c\\u0026_\\u005c.sub-menu\\u005c]\\u005c:\\u005c[\\u005c\\u0026_a\\u005c]\\u005c:text-site-muted .sub-menu a{color:var(--color-site-muted)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c.active\\u005c:not\\u005c(\\u005c:hover\\u005c)\\u005c]\\u005c:bg-gray-50\\u003eli\\u003ea.active:not(:hover){background-color:var(--color-gray-50)}@media (hover:hover){.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:hover\\u005c:bg-gray-100\\u003eli\\u003ea:hover{background-color:var(--color-gray-100)}}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:rounded\\u003eli\\u003ea{border-radius:var(--radius)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:transition-colors\\u003eli\\u003ea{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026\\u003eli]&quot;:{&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026\\u003ea]&quot;:{&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;4&quot;,&quot;y&quot;:&quot;1.5&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;block&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;[\\u0026.active:not(:hover)]&quot;:{&quot;@&quot;:&quot;gray-50&quot;},&quot;hover&quot;:{&quot;@&quot;:&quot;gray-100&quot;}}},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;colors&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}}}},&quot;skaBlocksMargin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;[\\u0026\\u003e.sub-menu]&quot;:{&quot;t&quot;:&quot;&quot;,&quot;b&quot;:&quot;2.5&quot;}},&quot;t&quot;:&quot;sides&quot;}},&quot;[\\u0026_.sub-menu]&quot;:{&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026_a]&quot;:{&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site-muted&quot;}}},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;sm&quot;}}}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;l&quot;:&quot;4&quot;}},&quot;t&quot;:&quot;sides&quot;}}},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;table&quot;}}},&quot;skaBlocksSpaceBetween&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;1&quot;}}},&quot;skaBlocksMinWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;56&quot;}},&quot;a&quot;:[]},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;base&quot;}}}} \/--&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\">Left line menu<\/h2>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\"><ul class=\"ska-menu wp-block-ska-menu [&amp;_a]:flex [&amp;_a]:py-1 [&amp;_a]:pr-3 [&amp;&gt;li]:[&amp;&gt;a]:pl-4 [&amp;&gt;li]:[&amp;&gt;ul]:[&amp;&gt;li]:[&amp;&gt;a]:pl-7 [&amp;&gt;li]:[&amp;&gt;ul]:[&amp;&gt;li]:[&amp;&gt;ul]:[&amp;&gt;li]:[&amp;&gt;a]:pl-10 [&amp;&gt;li]:[&amp;&gt;ul]:[&amp;&gt;li]:[&amp;&gt;ul]:[&amp;&gt;li]:[&amp;&gt;ul]:[&amp;&gt;li]:[&amp;&gt;a]:pl-12 [&amp;&gt;li]:[&amp;&gt;ul]:[&amp;&gt;li]:[&amp;&gt;ul]:[&amp;&gt;li]:[&amp;&gt;ul]:[&amp;&gt;li]:[&amp;&gt;ul]:[&amp;&gt;li]:[&amp;&gt;a]:pl-14 [&amp;_a]:text-base [&amp;_a]:text-zinc-600 [&amp;_a]:hover:text-zinc-900 [&amp;_a]:[&amp;.active]:bg-zinc-800\/5 [&amp;_a]:hover:bg-zinc-800\/1 [&amp;_a]:rounded-r-full [&amp;_a]:border-l-2! [&amp;&gt;li]:[&amp;&gt;a]:border-l-2 [&amp;&gt;li]:[&amp;&gt;ul]:[&amp;&gt;li]:[&amp;&gt;ul]:[&amp;&gt;li]:[&amp;&gt;a]:border-l [&amp;&gt;li]:[&amp;&gt;ul]:[&amp;&gt;li]:[&amp;&gt;ul]:[&amp;&gt;li]:[&amp;&gt;ul]:[&amp;&gt;li]:[&amp;&gt;a]:border-l [&amp;&gt;li]:[&amp;&gt;ul]:[&amp;&gt;li]:[&amp;&gt;ul]:[&amp;&gt;li]:[&amp;&gt;ul]:[&amp;&gt;li]:[&amp;&gt;ul]:[&amp;&gt;li]:[&amp;&gt;a]:border-l [&amp;_a]:[&amp;.active]:border-primary [&amp;_a]:hover:border-primary\/75 [&amp;_a]:transition\"><li class=\"menu-item\"><a href=\"https:\/\/ska-blocks.com\/docs\/\">Home<\/a><\/li><li class=\"menu-item\"><a href=\"#\">About<\/a><\/li><li class=\"menu-item menu-item-has-children\"><a href=\"#\">Services<\/a><ul class=\"sub-menu\"><li class=\"menu-item\"><a href=\"#\">Web design &amp; development<\/a><\/li><li class=\"menu-item\"><a href=\"#\">Digital marketing<\/a><\/li><li class=\"menu-item\"><a href=\"#\">SEO optimization<\/a><\/li><li class=\"menu-item\"><a href=\"#\">Content creation<\/a><\/li><li class=\"menu-item\"><a href=\"#\">E-commerce solutions<\/a><\/li><\/ul><\/li><li class=\"menu-item\"><a href=\"https:\/\/ska-blocks.com\/docs\/all\/\">Blog<\/a><\/li><li class=\"menu-item\"><a href=\"#\">Contact<\/a><\/li><\/ul><\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/menu {&quot;id&quot;:-2,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;[\\u0026_a]:flex [\\u0026_a]:py-1 [\\u0026_a]:pr-3 [\\u0026\\u003eli]:[\\u0026\\u003ea]:pl-4 [\\u0026\\u003eli]:[\\u0026\\u003eul]:[\\u0026\\u003eli]:[\\u0026\\u003ea]:pl-7 [\\u0026\\u003eli]:[\\u0026\\u003eul]:[\\u0026\\u003eli]:[\\u0026\\u003eul]:[\\u0026\\u003eli]:[\\u0026\\u003ea]:pl-10 [\\u0026\\u003eli]:[\\u0026\\u003eul]:[\\u0026\\u003eli]:[\\u0026\\u003eul]:[\\u0026\\u003eli]:[\\u0026\\u003eul]:[\\u0026\\u003eli]:[\\u0026\\u003ea]:pl-12 [\\u0026\\u003eli]:[\\u0026\\u003eul]:[\\u0026\\u003eli]:[\\u0026\\u003eul]:[\\u0026\\u003eli]:[\\u0026\\u003eul]:[\\u0026\\u003eli]:[\\u0026\\u003eul]:[\\u0026\\u003eli]:[\\u0026\\u003ea]:pl-14 [\\u0026_a]:text-base [\\u0026_a]:text-zinc-600 [\\u0026_a]:hover:text-zinc-900 [\\u0026_a]:[\\u0026.active]:bg-zinc-800\/5 [\\u0026_a]:hover:bg-zinc-800\/1 [\\u0026_a]:rounded-r-full [\\u0026_a]:border-l-2! [\\u0026\\u003eli]:[\\u0026\\u003ea]:border-l-2 [\\u0026\\u003eli]:[\\u0026\\u003eul]:[\\u0026\\u003eli]:[\\u0026\\u003eul]:[\\u0026\\u003eli]:[\\u0026\\u003ea]:border-l [\\u0026\\u003eli]:[\\u0026\\u003eul]:[\\u0026\\u003eli]:[\\u0026\\u003eul]:[\\u0026\\u003eli]:[\\u0026\\u003eul]:[\\u0026\\u003eli]:[\\u0026\\u003ea]:border-l [\\u0026\\u003eli]:[\\u0026\\u003eul]:[\\u0026\\u003eli]:[\\u0026\\u003eul]:[\\u0026\\u003eli]:[\\u0026\\u003eul]:[\\u0026\\u003eli]:[\\u0026\\u003eul]:[\\u0026\\u003eli]:[\\u0026\\u003ea]:border-l [\\u0026_a]:[\\u0026.active]:border-primary [\\u0026_a]:hover:border-primary\/75 [\\u0026_a]:transition&quot;,&quot;css&quot;:&quot;.\\u005c[\\u005c\\u0026_a\\u005c]\\u005c:flex a{display:flex}.\\u005c[\\u005c\\u0026_a\\u005c]\\u005c:py-1 a{padding-block:var(--spacing-1)}.\\u005c[\\u005c\\u0026_a\\u005c]\\u005c:pr-3 a{padding-right:var(--spacing-3)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:pl-4\\u003eli\\u003ea{padding-left:var(--spacing-4)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eul\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:pl-7\\u003eli\\u003eul\\u003eli\\u003ea{padding-left:var(--spacing-7)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eul\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eul\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:pl-10\\u003eli\\u003eul\\u003eli\\u003eul\\u003eli\\u003ea{padding-left:var(--spacing-10)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eul\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eul\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eul\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:pl-12\\u003eli\\u003eul\\u003eli\\u003eul\\u003eli\\u003eul\\u003eli\\u003ea{padding-left:var(--spacing-12)}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eul\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eul\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eul\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eul\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:pl-14\\u003eli\\u003eul\\u003eli\\u003eul\\u003eli\\u003eul\\u003eli\\u003eul\\u003eli\\u003ea{padding-left:var(--spacing-14)}.\\u005c[\\u005c\\u0026_a\\u005c]\\u005c:text-base a{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.\\u005c[\\u005c\\u0026_a\\u005c]\\u005c:text-zinc-600 a{color:var(--color-zinc-600)}@media (hover:hover){.\\u005c[\\u005c\\u0026_a\\u005c]\\u005c:hover\\u005c:text-zinc-900 a:hover{color:var(--color-zinc-900)}}.\\u005c[\\u005c\\u0026_a\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c.active\\u005c]\\u005c:bg-zinc-800\\u005c\/5 a.active{background-color:#27272a0d}@supports (color:color-mix(in lab, red, red)){.\\u005c[\\u005c\\u0026_a\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c.active\\u005c]\\u005c:bg-zinc-800\\u005c\/5 a.active{background-color:color-mix(in oklab,var(--color-zinc-800)5%,transparent)}}@media (hover:hover){.\\u005c[\\u005c\\u0026_a\\u005c]\\u005c:hover\\u005c:bg-zinc-800\\u005c\/1 a:hover{background-color:#27272a03}@supports (color:color-mix(in lab, red, red)){.\\u005c[\\u005c\\u0026_a\\u005c]\\u005c:hover\\u005c:bg-zinc-800\\u005c\/1 a:hover{background-color:color-mix(in oklab,var(--color-zinc-800)1%,transparent)}}}.\\u005c[\\u005c\\u0026_a\\u005c]\\u005c:rounded-r-full a{border-top-right-radius:3.40282e38px;border-bottom-right-radius:3.40282e38px}.\\u005c[\\u005c\\u0026_a\\u005c]\\u005c:border-l-2\\u005c! a{border-left-style:var(--tw-border-style)!important;border-left-width:2px!important}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:border-l-2\\u003eli\\u003ea{border-left-style:var(--tw-border-style);border-left-width:2px}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eul\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eul\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:border-l\\u003eli\\u003eul\\u003eli\\u003eul\\u003eli\\u003ea{border-left-style:var(--tw-border-style);border-left-width:1px}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eul\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eul\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eul\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:border-l\\u003eli\\u003eul\\u003eli\\u003eul\\u003eli\\u003eul\\u003eli\\u003ea{border-left-style:var(--tw-border-style);border-left-width:1px}.\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eul\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eul\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eul\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eul\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eli\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003ea\\u005c]\\u005c:border-l\\u003eli\\u003eul\\u003eli\\u003eul\\u003eli\\u003eul\\u003eli\\u003eul\\u003eli\\u003ea{border-left-style:var(--tw-border-style);border-left-width:1px}.\\u005c[\\u005c\\u0026_a\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c.active\\u005c]\\u005c:border-primary a.active{border-color:var(--color-primary)}@media (hover:hover){.\\u005c[\\u005c\\u0026_a\\u005c]\\u005c:hover\\u005c:border-primary\\u005c\/75 a:hover{border-color:#2ba2e5bf}@supports (color:color-mix(in lab, red, red)){.\\u005c[\\u005c\\u0026_a\\u005c]\\u005c:hover\\u005c:border-primary\\u005c\/75 a:hover{border-color:color-mix(in oklab,var(--color-primary)75%,transparent)}}}.\\u005c[\\u005c\\u0026_a\\u005c]\\u005c:transition a{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026_a]&quot;:{&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;base&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;zinc-600&quot;},&quot;hover&quot;:{&quot;@&quot;:&quot;zinc-900&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;1&quot;,&quot;r&quot;:&quot;3&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksSelectors&quot;:[],&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;flex&quot;}}},&quot;skaBlocksBorderColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;[\\u0026.active]&quot;:{&quot;@&quot;:&quot;primary&quot;},&quot;hover&quot;:{&quot;@&quot;:&quot;primary\/75&quot;}}},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;[\\u0026.active]&quot;:{&quot;@&quot;:&quot;zinc-800\/5&quot;},&quot;hover&quot;:{&quot;@&quot;:&quot;zinc-800\/1&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;r&quot;:&quot;full&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;l&quot;:&quot;!2&quot;}},&quot;t&quot;:&quot;sides&quot;}},&quot;[\\u0026\\u003eli]&quot;:{&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026\\u003ea]&quot;:{&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;l&quot;:&quot;2&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;l&quot;:&quot;4&quot;}},&quot;t&quot;:&quot;sides&quot;}},&quot;[\\u0026\\u003eul]&quot;:{&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026\\u003eli]&quot;:{&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026\\u003ea]&quot;:{&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;l&quot;:&quot;7&quot;}},&quot;t&quot;:&quot;sides&quot;}},&quot;[\\u0026\\u003eul]&quot;:{&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026\\u003eli]&quot;:{&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026\\u003ea]&quot;:{&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;l&quot;:&quot;10&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;l&quot;:&quot;DEFAULT&quot;}},&quot;t&quot;:&quot;sides&quot;}},&quot;[\\u0026\\u003eul]&quot;:{&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026\\u003eli]&quot;:{&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026\\u003ea]&quot;:{&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;l&quot;:&quot;12&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;l&quot;:&quot;DEFAULT&quot;}},&quot;t&quot;:&quot;sides&quot;}},&quot;[\\u0026\\u003eul]&quot;:{&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026\\u003eli]&quot;:{&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026\\u003ea]&quot;:{&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;l&quot;:&quot;14&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;l&quot;:&quot;DEFAULT&quot;}},&quot;t&quot;:&quot;sides&quot;}}}}}}}}}}}}}}}}}}}}}} \/--&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Examples of styling the &lt;ul> -> &lt;li> elements produced by the Menu block with Tailwind classes. Usage &#8211; copy the code for the desired appearance, paste it into your block editor, swap out the Menu block&#8217;s placeholder menu with one from your own WordPress nav menus. You can then edit the Tailwind classes to tailor&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":[5],"class_list":["post-25","post","type-post","status-publish","format-standard","hentry","category-ska-theme","tag-ui"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/25","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=25"}],"version-history":[{"count":6,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/25\/revisions"}],"predecessor-version":[{"id":328,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/25\/revisions\/328"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=25"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=25"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}