Menu - ska-docs

Simple menu

<!-- wp:ska/menu {"id":17,"skaBlocks":{"cx":"table [\u0026\u003ea]:[\u0026\u003eli]:block [\u0026\u003ea]:[\u0026\u003eli]:px-4 [\u0026\u003ea]:[\u0026\u003eli]:py-2 [\u0026_.sub-menu]:pl-4 [\u0026\u003e.sub-menu]:[\u0026\u003eli]:-mt-2.5 [\u0026\u003e.sub-menu]:[\u0026\u003eli]:mb-2.5 min-w-56 text-base [\u0026_a]:[\u0026_.sub-menu]:text-sm [\u0026\u003ea]:[\u0026\u003eli]:text-site [\u0026_a]:[\u0026_.sub-menu]:text-site-muted [\u0026.active:not(:hover)]:[\u0026\u003ea]:[\u0026\u003eli]:bg-gray-50 hover:[\u0026\u003ea]:[\u0026\u003eli]:bg-gray-100 rounded border divide-y shadow [\u0026\u003ea]:[\u0026\u003eli]:transition-colors","t":1709756495,"css":".table{display:table}.min-w-56{min-width:var(\u002d\u002dska-spacing-56)}.divide-y \u003e :not([hidden]) ~ :not([hidden]){\u002d\u002dtw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(\u002d\u002dtw-divide-y-reverse)));border-bottom-width:calc(1px * var(\u002d\u002dtw-divide-y-reverse))}.rounded{border-radius:var(\u002d\u002dska-border-radius)}.border{border-width:1px}.text-base{font-size:var(\u002d\u002dska-font-size-base);line-height:var(\u002d\u002dska-font-size-base-lh)}.shadow{\u002d\u002dtw-shadow:0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);\u002d\u002dtw-shadow-colored:0 1px 3px 0 var(\u002d\u002dtw-shadow-color),0 1px 2px -1px var(\u002d\u002dtw-shadow-color);box-shadow:var(\u002d\u002dtw-ring-offset-shadow,0 0 #0000),var(\u002d\u002dtw-ring-shadow,0 0 #0000),var(\u002d\u002dtw-shadow)}.\\[\\\u0026\\\u003e\\.sub-menu\\]\\:\\[\\\u0026\\\u003eli\\]\\:-mt-2\\.5\u003eli\u003e.sub-menu{margin-top:calc(var(\u002d\u002dska-spacing-2\\.5) * -1)}.\\[\\\u0026\\\u003e\\.sub-menu\\]\\:\\[\\\u0026\\\u003eli\\]\\:mb-2\\.5\u003eli\u003e.sub-menu{margin-bottom:var(\u002d\u002dska-spacing-2\\.5)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:block\u003eli\u003ea{display:block}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:px-4\u003eli\u003ea{padding-left:var(\u002d\u002dska-spacing-4);padding-right:var(\u002d\u002dska-spacing-4)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:py-2\u003eli\u003ea{padding-top:var(\u002d\u002dska-spacing-2);padding-bottom:var(\u002d\u002dska-spacing-2)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:text-site\u003eli\u003ea{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site),0.87)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:transition-colors\u003eli\u003ea{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}.hover\\:\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:bg-gray-100\u003eli\u003ea:hover{\u002d\u002dtw-bg-opacity:1;background-color:rgba(243,244,246,1)}.\\[\\\u0026\\.active\\:not\\(\\:hover\\)\\]\\:\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:bg-gray-50\u003eli\u003ea.active:not(:hover){\u002d\u002dtw-bg-opacity:1;background-color:rgba(249,250,251,1)}.\\[\\\u0026_\\.sub-menu\\]\\:pl-4 .sub-menu{padding-left:var(\u002d\u002dska-spacing-4)}.\\[\\\u0026_a\\]\\:\\[\\\u0026_\\.sub-menu\\]\\:text-sm .sub-menu a{font-size:var(\u002d\u002dska-font-size-sm);line-height:var(\u002d\u002dska-font-size-sm-lh)}.\\[\\\u0026_a\\]\\:\\[\\\u0026_\\.sub-menu\\]\\:text-site-muted .sub-menu a{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site-muted),0.7)}"},"skaBlocksSelectors":{"[\u0026\u003eli]":{"skaBlocksSelectors":{"[\u0026\u003ea]":{"skaBlocksPadding":{"v":{"$":{"@":"","x":"4","y":"2"}},"t":"axis"},"skaBlocksDisplay":{"v":{"$":{"@":"block"}}},"skaBlocksTextColor":{"v":{"$":{"@":"site"}}},"skaBlocksBackgroundColor":{"v":{"$":{"@":""},"[\u0026.active:not(:hover)]":{"@":"gray-50"},"hover":{"@":"gray-100"}}},"skaBlocksTransitionProperty":{"v":{"$":{"@":"colors"}}}}},"skaBlocksMargin":{"v":{"$":{"@":""},"[\u0026\u003e.sub-menu]":{"t":"-2.5","b":"2.5"}},"t":"sides"}},"[\u0026_.sub-menu]":{"skaBlocksSelectors":{"[\u0026_a]":{"skaBlocksTextColor":{"v":{"$":{"@":"site-muted"}}},"skaBlocksFontSize":{"v":{"$":{"@":"sm"}}}}},"skaBlocksPadding":{"v":{"$":{"@":"","l":"4"}},"t":"sides"}}},"skaBlocksDisplay":{"v":{"$":{"@":"table"}}},"skaBlocksMinWidth":{"v":{"$":{"@":"56"}},"a":[]},"skaBlocksFontSize":{"v":{"$":{"@":"base"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"DEFAULT"}}},"skaBlocksBorderWidth":{"v":{"$":{"@":"DEFAULT"}}},"skaBlocksDivideWidth":{"v":{"$":{"@":"","x":"","y":"DEFAULT"}}},"skaBlocksBoxShadow":{"v":{"$":{"@":"DEFAULT"}}}} /-->

Menu with children

<!-- wp:ska/menu {"id":16,"skaBlocks":{"cx":"table [\u0026\u003ea]:[\u0026\u003eli]:block [\u0026\u003ea]:[\u0026\u003eli]:px-5 [\u0026\u003ea]:[\u0026\u003eli]:py-2 [\u0026_.sub-menu]:pl-5 [\u0026\u003e.sub-menu]:[\u0026\u003eli]:-mt-2.5 [\u0026\u003e.sub-menu]:[\u0026\u003eli]:mb-2.5 min-w-64 text-base [\u0026_a]:[\u0026_.sub-menu]:text-sm [\u0026_a.active]:font-bold [\u0026\u003ea]:[\u0026\u003eli]:text-site [\u0026_a]:[\u0026_.sub-menu]:text-site-muted rounded border divide-y shadow","t":1709756495,"css":".table{display:table}.min-w-64{min-width:var(\u002d\u002dska-spacing-64)}.divide-y \u003e :not([hidden]) ~ :not([hidden]){\u002d\u002dtw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(\u002d\u002dtw-divide-y-reverse)));border-bottom-width:calc(1px * var(\u002d\u002dtw-divide-y-reverse))}.rounded{border-radius:var(\u002d\u002dska-border-radius)}.border{border-width:1px}.text-base{font-size:var(\u002d\u002dska-font-size-base);line-height:var(\u002d\u002dska-font-size-base-lh)}.shadow{\u002d\u002dtw-shadow:0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);\u002d\u002dtw-shadow-colored:0 1px 3px 0 var(\u002d\u002dtw-shadow-color),0 1px 2px -1px var(\u002d\u002dtw-shadow-color);box-shadow:var(\u002d\u002dtw-ring-offset-shadow,0 0 #0000),var(\u002d\u002dtw-ring-shadow,0 0 #0000),var(\u002d\u002dtw-shadow)}.\\[\\\u0026\\\u003e\\.sub-menu\\]\\:\\[\\\u0026\\\u003eli\\]\\:-mt-2\\.5\u003eli\u003e.sub-menu{margin-top:calc(var(\u002d\u002dska-spacing-2\\.5) * -1)}.\\[\\\u0026\\\u003e\\.sub-menu\\]\\:\\[\\\u0026\\\u003eli\\]\\:mb-2\\.5\u003eli\u003e.sub-menu{margin-bottom:var(\u002d\u002dska-spacing-2\\.5)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:block\u003eli\u003ea{display:block}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:px-5\u003eli\u003ea{padding-left:var(\u002d\u002dska-spacing-5);padding-right:var(\u002d\u002dska-spacing-5)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:py-2\u003eli\u003ea{padding-top:var(\u002d\u002dska-spacing-2);padding-bottom:var(\u002d\u002dska-spacing-2)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:text-site\u003eli\u003ea{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site),0.87)}.\\[\\\u0026_\\.sub-menu\\]\\:pl-5 .sub-menu{padding-left:var(\u002d\u002dska-spacing-5)}.\\[\\\u0026_a\\.active\\]\\:font-bold a.active{font-weight:var(\u002d\u002dska-font-weight-bold)}.\\[\\\u0026_a\\]\\:\\[\\\u0026_\\.sub-menu\\]\\:text-sm .sub-menu a{font-size:var(\u002d\u002dska-font-size-sm);line-height:var(\u002d\u002dska-font-size-sm-lh)}.\\[\\\u0026_a\\]\\:\\[\\\u0026_\\.sub-menu\\]\\:text-site-muted .sub-menu a{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site-muted),0.7)}"},"skaBlocksSelectors":{"[\u0026\u003eli]":{"skaBlocksSelectors":{"[\u0026\u003ea]":{"skaBlocksPadding":{"v":{"$":{"@":"","x":"5","y":"2"}},"t":"axis"},"skaBlocksDisplay":{"v":{"$":{"@":"block"}}},"skaBlocksTextColor":{"v":{"$":{"@":"site"}}}}},"skaBlocksMargin":{"v":{"$":{"@":""},"[\u0026\u003e.sub-menu]":{"t":"-2.5","b":"2.5"}},"t":"sides"}},"[\u0026_.sub-menu]":{"skaBlocksSelectors":{"[\u0026_a]":{"skaBlocksTextColor":{"v":{"$":{"@":"site-muted"}}},"skaBlocksFontSize":{"v":{"$":{"@":"sm"}}}}},"skaBlocksPadding":{"v":{"$":{"@":"","l":"5"}},"t":"sides"}}},"skaBlocksDisplay":{"v":{"$":{"@":"table"}}},"skaBlocksMinWidth":{"v":{"$":{"@":"64"}},"a":[]},"skaBlocksFontSize":{"v":{"$":{"@":"base"}}},"skaBlocksFontWeight":{"v":{"$":{"@":""},"[\u0026_a.active]":{"@":"bold"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"DEFAULT"}}},"skaBlocksBorderWidth":{"v":{"$":{"@":"DEFAULT"}}},"skaBlocksDivideWidth":{"v":{"$":{"@":"","x":"","y":"DEFAULT"}}},"skaBlocksBoxShadow":{"v":{"$":{"@":"DEFAULT"}}}} /-->

Menu with dropdowns

<!-- wp:ska/menu {"id":16,"dropdown":"hover","dropdownPlacement":"right-start","skaBlocks":{"cx":"table [\u0026\u003ea]:[\u0026\u003eli]:flex [\u0026\u003ea]:[\u0026\u003eli]:flex-row [\u0026\u003ea]:[\u0026\u003eli]:justify-between [\u0026\u003ea]:[\u0026\u003eli]:items-center [\u0026\u003ea]:[\u0026\u003eli]:px-5 [\u0026\u003ea]:[\u0026\u003eli]:py-2 [\u0026\u003e.sub-menu]:[\u0026\u003eli]:-mt-2.5 [\u0026\u003e.sub-menu]:[\u0026\u003eli]:mb-2.5 min-w-64 text-base [\u0026_a.active]:font-bold [\u0026\u003ea]:[\u0026\u003eli]:text-site rounded border divide-y shadow [\u0026\u003e.dropdown-icon]:[\u0026\u003ea]:[\u0026\u003eli]:-rotate-90","t":1709756495,"css":".table{display:table}.min-w-64{min-width:var(\u002d\u002dska-spacing-64)}.divide-y \u003e :not([hidden]) ~ :not([hidden]){\u002d\u002dtw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(\u002d\u002dtw-divide-y-reverse)));border-bottom-width:calc(1px * var(\u002d\u002dtw-divide-y-reverse))}.rounded{border-radius:var(\u002d\u002dska-border-radius)}.border{border-width:1px}.text-base{font-size:var(\u002d\u002dska-font-size-base);line-height:var(\u002d\u002dska-font-size-base-lh)}.shadow{\u002d\u002dtw-shadow:0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);\u002d\u002dtw-shadow-colored:0 1px 3px 0 var(\u002d\u002dtw-shadow-color),0 1px 2px -1px var(\u002d\u002dtw-shadow-color);box-shadow:var(\u002d\u002dtw-ring-offset-shadow,0 0 #0000),var(\u002d\u002dtw-ring-shadow,0 0 #0000),var(\u002d\u002dtw-shadow)}.\\[\\\u0026\\\u003e\\.sub-menu\\]\\:\\[\\\u0026\\\u003eli\\]\\:-mt-2\\.5\u003eli\u003e.sub-menu{margin-top:calc(var(\u002d\u002dska-spacing-2\\.5) * -1)}.\\[\\\u0026\\\u003e\\.sub-menu\\]\\:\\[\\\u0026\\\u003eli\\]\\:mb-2\\.5\u003eli\u003e.sub-menu{margin-bottom:var(\u002d\u002dska-spacing-2\\.5)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:flex\u003eli\u003ea{display:flex}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:flex-row\u003eli\u003ea{flex-direction:row}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:items-center\u003eli\u003ea{align-items:center}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:justify-between\u003eli\u003ea{justify-content:space-between}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:px-5\u003eli\u003ea{padding-left:var(\u002d\u002dska-spacing-5);padding-right:var(\u002d\u002dska-spacing-5)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:py-2\u003eli\u003ea{padding-top:var(\u002d\u002dska-spacing-2);padding-bottom:var(\u002d\u002dska-spacing-2)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:text-site\u003eli\u003ea{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site),0.87)}.\\[\\\u0026\\\u003e\\.dropdown-icon\\]\\:\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:-rotate-90\u003eli\u003ea\u003e.dropdown-icon{\u002d\u002dtw-rotate:-90deg;transform:translate(var(\u002d\u002dtw-translate-x),var(\u002d\u002dtw-translate-y)) rotate(var(\u002d\u002dtw-rotate)) skewX(var(\u002d\u002dtw-skew-x)) skewY(var(\u002d\u002dtw-skew-y)) scaleX(var(\u002d\u002dtw-scale-x)) scaleY(var(\u002d\u002dtw-scale-y))}.\\[\\\u0026_a\\.active\\]\\:font-bold a.active{font-weight:var(\u002d\u002dska-font-weight-bold)}"},"skaBlocksSelectors":{"[\u0026\u003eli]":{"skaBlocksSelectors":{"[\u0026\u003ea]":{"skaBlocksPadding":{"v":{"$":{"@":"","x":"5","y":"2"}},"t":"axis"},"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksTextColor":{"v":{"$":{"@":"site"}}},"skaBlocksFlexDirection":{"v":{"$":{"@":"row"}}},"skaBlocksAlignItems":{"v":{"$":{"@":"center"}}},"skaBlocksJustifyContent":{"v":{"$":{"@":"between"}}},"skaBlocksSelectors":{"[\u0026\u003e.dropdown-icon]":{"skaBlocksRotate":{"v":{"$":{"@":"-90"}}}}}}},"skaBlocksMargin":{"v":{"$":{"@":""},"[\u0026\u003e.sub-menu]":{"t":"-2.5","b":"2.5"}},"t":"sides"}}},"skaBlocksDisplay":{"v":{"$":{"@":"table"}}},"skaBlocksMinWidth":{"v":{"$":{"@":"64"}},"a":[]},"skaBlocksFontSize":{"v":{"$":{"@":"base"}}},"skaBlocksFontWeight":{"v":{"$":{"@":""},"[\u0026_a.active]":{"@":"bold"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"DEFAULT"}}},"skaBlocksBorderWidth":{"v":{"$":{"@":"DEFAULT"}}},"skaBlocksDivideWidth":{"v":{"$":{"@":"","x":"","y":"DEFAULT"}}},"skaBlocksBoxShadow":{"v":{"$":{"@":"DEFAULT"}}}} /-->

Basic menu

<!-- wp:ska/menu {"id":17,"skaBlocks":{"cx":"table [\u0026\u003ea]:[\u0026\u003eli]:block [\u0026\u003ea]:[\u0026\u003eli]:px-4 [\u0026\u003ea]:[\u0026\u003eli]:py-1.5 [\u0026_.sub-menu]:pl-4 [\u0026\u003e.sub-menu]:[\u0026\u003eli]:mb-2.5 space-y-1 min-w-56 text-base [\u0026_a]:[\u0026_.sub-menu]:text-sm [\u0026\u003ea]:[\u0026\u003eli]:text-site [\u0026_a]:[\u0026_.sub-menu]:text-site-muted [\u0026.active:not(:hover)]:[\u0026\u003ea]:[\u0026\u003eli]:bg-gray-50 hover:[\u0026\u003ea]:[\u0026\u003eli]:bg-gray-100 [\u0026\u003ea]:[\u0026\u003eli]:rounded [\u0026\u003ea]:[\u0026\u003eli]:transition-colors","t":1709756495,"css":".table{display:table}.min-w-56{min-width:var(\u002d\u002dska-spacing-56)}.space-y-1 \u003e :not([hidden]) ~ :not([hidden]){\u002d\u002dtw-space-y-reverse:0;margin-top:calc(var(\u002d\u002dska-spacing-1) * calc(1 - var(\u002d\u002dtw-space-y-reverse)));margin-bottom:calc(var(\u002d\u002dska-spacing-1) * var(\u002d\u002dtw-space-y-reverse))}.text-base{font-size:var(\u002d\u002dska-font-size-base);line-height:var(\u002d\u002dska-font-size-base-lh)}.\\[\\\u0026\\\u003e\\.sub-menu\\]\\:\\[\\\u0026\\\u003eli\\]\\:mb-2\\.5\u003eli\u003e.sub-menu{margin-bottom:var(\u002d\u002dska-spacing-2\\.5)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:block\u003eli\u003ea{display:block}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:rounded\u003eli\u003ea{border-radius:var(\u002d\u002dska-border-radius)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:px-4\u003eli\u003ea{padding-left:var(\u002d\u002dska-spacing-4);padding-right:var(\u002d\u002dska-spacing-4)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:py-1\\.5\u003eli\u003ea{padding-top:var(\u002d\u002dska-spacing-1\\.5);padding-bottom:var(\u002d\u002dska-spacing-1\\.5)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:text-site\u003eli\u003ea{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site),0.87)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:transition-colors\u003eli\u003ea{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}.hover\\:\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:bg-gray-100\u003eli\u003ea:hover{\u002d\u002dtw-bg-opacity:1;background-color:rgba(243,244,246,1)}.\\[\\\u0026\\.active\\:not\\(\\:hover\\)\\]\\:\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:bg-gray-50\u003eli\u003ea.active:not(:hover){\u002d\u002dtw-bg-opacity:1;background-color:rgba(249,250,251,1)}.\\[\\\u0026_\\.sub-menu\\]\\:pl-4 .sub-menu{padding-left:var(\u002d\u002dska-spacing-4)}.\\[\\\u0026_a\\]\\:\\[\\\u0026_\\.sub-menu\\]\\:text-sm .sub-menu a{font-size:var(\u002d\u002dska-font-size-sm);line-height:var(\u002d\u002dska-font-size-sm-lh)}.\\[\\\u0026_a\\]\\:\\[\\\u0026_\\.sub-menu\\]\\:text-site-muted .sub-menu a{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site-muted),0.7)}"},"skaBlocksSelectors":{"[\u0026\u003eli]":{"skaBlocksSelectors":{"[\u0026\u003ea]":{"skaBlocksPadding":{"v":{"$":{"@":"","x":"4","y":"1.5"}},"t":"axis"},"skaBlocksDisplay":{"v":{"$":{"@":"block"}}},"skaBlocksTextColor":{"v":{"$":{"@":"site"}}},"skaBlocksBackgroundColor":{"v":{"$":{"@":""},"[\u0026.active:not(:hover)]":{"@":"gray-50"},"hover":{"@":"gray-100"}}},"skaBlocksTransitionProperty":{"v":{"$":{"@":"colors"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"DEFAULT"}}}}},"skaBlocksMargin":{"v":{"$":{"@":""},"[\u0026\u003e.sub-menu]":{"t":"","b":"2.5"}},"t":"sides"}},"[\u0026_.sub-menu]":{"skaBlocksSelectors":{"[\u0026_a]":{"skaBlocksTextColor":{"v":{"$":{"@":"site-muted"}}},"skaBlocksFontSize":{"v":{"$":{"@":"sm"}}}}},"skaBlocksPadding":{"v":{"$":{"@":"","l":"4"}},"t":"sides"}}},"skaBlocksDisplay":{"v":{"$":{"@":"table"}}},"skaBlocksSpaceBetween":{"v":{"$":{"@":"","y":"1"}}},"skaBlocksMinWidth":{"v":{"$":{"@":"56"}},"a":[]},"skaBlocksFontSize":{"v":{"$":{"@":"base"}}}} /-->

Basic menu with children

<!-- wp:ska/menu {"id":16,"skaBlocks":{"cx":"table [\u0026\u003ea]:[\u0026\u003eli]:block [\u0026\u003ea]:[\u0026\u003eli]:px-4 [\u0026\u003ea]:[\u0026\u003eli]:py-1.5 [\u0026_.sub-menu]:pl-4 [\u0026\u003e.sub-menu]:[\u0026\u003eli]:mb-2.5 space-y-1 min-w-56 text-base [\u0026_a]:[\u0026_.sub-menu]:text-sm [\u0026\u003ea]:[\u0026\u003eli]:text-site [\u0026_a]:[\u0026_.sub-menu]:text-site-muted [\u0026.active:not(:hover)]:[\u0026\u003ea]:[\u0026\u003eli]:bg-gray-50 hover:[\u0026\u003ea]:[\u0026\u003eli]:bg-gray-100 [\u0026\u003ea]:[\u0026\u003eli]:rounded [\u0026\u003ea]:[\u0026\u003eli]:transition-colors","t":1709756495,"css":".table{display:table}.min-w-56{min-width:var(\u002d\u002dska-spacing-56)}.space-y-1 \u003e :not([hidden]) ~ :not([hidden]){\u002d\u002dtw-space-y-reverse:0;margin-top:calc(var(\u002d\u002dska-spacing-1) * calc(1 - var(\u002d\u002dtw-space-y-reverse)));margin-bottom:calc(var(\u002d\u002dska-spacing-1) * var(\u002d\u002dtw-space-y-reverse))}.text-base{font-size:var(\u002d\u002dska-font-size-base);line-height:var(\u002d\u002dska-font-size-base-lh)}.\\[\\\u0026\\\u003e\\.sub-menu\\]\\:\\[\\\u0026\\\u003eli\\]\\:mb-2\\.5\u003eli\u003e.sub-menu{margin-bottom:var(\u002d\u002dska-spacing-2\\.5)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:block\u003eli\u003ea{display:block}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:rounded\u003eli\u003ea{border-radius:var(\u002d\u002dska-border-radius)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:px-4\u003eli\u003ea{padding-left:var(\u002d\u002dska-spacing-4);padding-right:var(\u002d\u002dska-spacing-4)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:py-1\\.5\u003eli\u003ea{padding-top:var(\u002d\u002dska-spacing-1\\.5);padding-bottom:var(\u002d\u002dska-spacing-1\\.5)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:text-site\u003eli\u003ea{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site),0.87)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:transition-colors\u003eli\u003ea{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}.hover\\:\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:bg-gray-100\u003eli\u003ea:hover{\u002d\u002dtw-bg-opacity:1;background-color:rgba(243,244,246,1)}.\\[\\\u0026\\.active\\:not\\(\\:hover\\)\\]\\:\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:bg-gray-50\u003eli\u003ea.active:not(:hover){\u002d\u002dtw-bg-opacity:1;background-color:rgba(249,250,251,1)}.\\[\\\u0026_\\.sub-menu\\]\\:pl-4 .sub-menu{padding-left:var(\u002d\u002dska-spacing-4)}.\\[\\\u0026_a\\]\\:\\[\\\u0026_\\.sub-menu\\]\\:text-sm .sub-menu a{font-size:var(\u002d\u002dska-font-size-sm);line-height:var(\u002d\u002dska-font-size-sm-lh)}.\\[\\\u0026_a\\]\\:\\[\\\u0026_\\.sub-menu\\]\\:text-site-muted .sub-menu a{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site-muted),0.7)}"},"skaBlocksSelectors":{"[\u0026\u003eli]":{"skaBlocksSelectors":{"[\u0026\u003ea]":{"skaBlocksPadding":{"v":{"$":{"@":"","x":"4","y":"1.5"}},"t":"axis"},"skaBlocksDisplay":{"v":{"$":{"@":"block"}}},"skaBlocksTextColor":{"v":{"$":{"@":"site"}}},"skaBlocksBackgroundColor":{"v":{"$":{"@":""},"[\u0026.active:not(:hover)]":{"@":"gray-50"},"hover":{"@":"gray-100"}}},"skaBlocksTransitionProperty":{"v":{"$":{"@":"colors"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"DEFAULT"}}}}},"skaBlocksMargin":{"v":{"$":{"@":""},"[\u0026\u003e.sub-menu]":{"t":"","b":"2.5"}},"t":"sides"}},"[\u0026_.sub-menu]":{"skaBlocksSelectors":{"[\u0026_a]":{"skaBlocksTextColor":{"v":{"$":{"@":"site-muted"}}},"skaBlocksFontSize":{"v":{"$":{"@":"sm"}}}}},"skaBlocksPadding":{"v":{"$":{"@":"","l":"4"}},"t":"sides"}}},"skaBlocksDisplay":{"v":{"$":{"@":"table"}}},"skaBlocksSpaceBetween":{"v":{"$":{"@":"","y":"1"}}},"skaBlocksMinWidth":{"v":{"$":{"@":"56"}},"a":[]},"skaBlocksFontSize":{"v":{"$":{"@":"base"}}}} /-->

Left line menu

<!-- wp:ska/menu {"id":16,"skaBlocks":{"cx":"[\u0026_a]:flex [\u0026_a]:py-1 [\u0026_a]:pr-3 [\u0026\u003ea]:[\u0026\u003eli]:pl-4 [\u0026\u003ea]:[\u0026\u003eli]:[\u0026\u003eul]:[\u0026\u003eli]:pl-7 [\u0026\u003ea]:[\u0026\u003eli]:[\u0026\u003eul]:[\u0026\u003eli]:[\u0026\u003eul]:[\u0026\u003eli]:pl-10 [\u0026\u003ea]:[\u0026\u003eli]:[\u0026\u003eul]:[\u0026\u003eli]:[\u0026\u003eul]:[\u0026\u003eli]:[\u0026\u003eul]:[\u0026\u003eli]:pl-12 [\u0026\u003ea]:[\u0026\u003eli]:[\u0026\u003eul]:[\u0026\u003eli]:[\u0026\u003eul]:[\u0026\u003eli]:[\u0026\u003eul]:[\u0026\u003eli]:[\u0026\u003eul]:[\u0026\u003eli]:pl-14 [\u0026_a]:text-base [\u0026_a]:text-zinc-600 hover:[\u0026_a]:text-zinc-900 [\u0026.active]:[\u0026_a]:bg-zinc-800/5 hover:[\u0026_a]:bg-zinc-800/1 [\u0026_a]:rounded-r-full [\u0026_a]:!border-l-2 [\u0026\u003ea]:[\u0026\u003eli]:border-l-2 [\u0026\u003ea]:[\u0026\u003eli]:[\u0026\u003eul]:[\u0026\u003eli]:[\u0026\u003eul]:[\u0026\u003eli]:border-l [\u0026\u003ea]:[\u0026\u003eli]:[\u0026\u003eul]:[\u0026\u003eli]:[\u0026\u003eul]:[\u0026\u003eli]:[\u0026\u003eul]:[\u0026\u003eli]:border-l [\u0026\u003ea]:[\u0026\u003eli]:[\u0026\u003eul]:[\u0026\u003eli]:[\u0026\u003eul]:[\u0026\u003eli]:[\u0026\u003eul]:[\u0026\u003eli]:[\u0026\u003eul]:[\u0026\u003eli]:border-l [\u0026.active]:[\u0026_a]:border-primary hover:[\u0026_a]:border-primary/75 [\u0026_a]:transition","t":1709756495,"css":".\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:border-l-2\u003eli\u003ea{border-left-width:2px}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:pl-4\u003eli\u003ea{padding-left:var(\u002d\u002dska-spacing-4)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:border-l\u003eli\u003eul\u003eli\u003eul\u003eli\u003eul\u003eli\u003eul\u003eli\u003ea{border-left-width:1px}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:border-l\u003eli\u003eul\u003eli\u003eul\u003eli\u003eul\u003eli\u003ea{border-left-width:1px}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:border-l\u003eli\u003eul\u003eli\u003eul\u003eli\u003ea{border-left-width:1px}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:pl-14\u003eli\u003eul\u003eli\u003eul\u003eli\u003eul\u003eli\u003eul\u003eli\u003ea{padding-left:var(\u002d\u002dska-spacing-14)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:pl-12\u003eli\u003eul\u003eli\u003eul\u003eli\u003eul\u003eli\u003ea{padding-left:var(\u002d\u002dska-spacing-12)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:pl-10\u003eli\u003eul\u003eli\u003eul\u003eli\u003ea{padding-left:var(\u002d\u002dska-spacing-10)}.\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:pl-7\u003eli\u003eul\u003eli\u003ea{padding-left:var(\u002d\u002dska-spacing-7)}.\\[\\\u0026_a\\]\\:flex a{display:flex}.\\[\\\u0026_a\\]\\:rounded-r-full a{border-top-right-radius:var(\u002d\u002dska-border-radius-full);border-bottom-right-radius:var(\u002d\u002dska-border-radius-full)}.\\[\\\u0026_a\\]\\:\\!border-l-2 a{border-left-width:2px!important}.\\[\\\u0026_a\\]\\:py-1 a{padding-top:var(\u002d\u002dska-spacing-1);padding-bottom:var(\u002d\u002dska-spacing-1)}.\\[\\\u0026_a\\]\\:pr-3 a{padding-right:var(\u002d\u002dska-spacing-3)}.\\[\\\u0026_a\\]\\:text-base a{font-size:var(\u002d\u002dska-font-size-base);line-height:var(\u002d\u002dska-font-size-base-lh)}.\\[\\\u0026_a\\]\\:text-zinc-600 a{\u002d\u002dtw-text-opacity:1;color:rgba(82,82,91,1)}.\\[\\\u0026_a\\]\\:transition a{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}.hover\\:\\[\\\u0026_a\\]\\:border-primary\\/75 a:hover{border-color:rgba(var(\u002d\u002dska-rgb-primary),0.75)}.hover\\:\\[\\\u0026_a\\]\\:bg-zinc-800\\/1 a:hover{background-color:rgba(39,39,42,0.01)}.hover\\:\\[\\\u0026_a\\]\\:text-zinc-900 a:hover{\u002d\u002dtw-text-opacity:1;color:rgba(24,24,27,1)}.\\[\\\u0026\\.active\\]\\:\\[\\\u0026_a\\]\\:border-primary a.active{\u002d\u002dtw-border-opacity:1;border-color:rgba(var(\u002d\u002dska-rgb-primary),1)}.\\[\\\u0026\\.active\\]\\:\\[\\\u0026_a\\]\\:bg-zinc-800\\/5 a.active{background-color:rgba(39,39,42,0.05)}"},"skaBlocksSelectors":{"[\u0026_a]":{"skaBlocksFontSize":{"v":{"$":{"@":"base"}}},"skaBlocksTextColor":{"v":{"$":{"@":"zinc-600"},"hover":{"@":"zinc-900"}}},"skaBlocksPadding":{"v":{"$":{"@":"","y":"1","r":"3"}},"t":"sides"},"skaBlocksSelectors":[],"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksBorderColor":{"v":{"$":{"@":""},"[\u0026.active]":{"@":"primary"},"hover":{"@":"primary/75"}}},"skaBlocksTransitionProperty":{"v":{"$":{"@":"DEFAULT"}}},"skaBlocksBackgroundColor":{"v":{"$":{"@":""},"[\u0026.active]":{"@":"zinc-800/5"},"hover":{"@":"zinc-800/1"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"","r":"full"}},"t":"sides"},"skaBlocksBorderWidth":{"v":{"$":{"@":"","l":"!2"}},"t":"sides"}},"[\u0026\u003eli]":{"skaBlocksSelectors":{"[\u0026\u003ea]":{"skaBlocksBorderWidth":{"v":{"$":{"@":"","l":"2"}},"t":"sides"},"skaBlocksPadding":{"v":{"$":{"@":"","l":"4"}},"t":"sides"}},"[\u0026\u003eul]":{"skaBlocksSelectors":{"[\u0026\u003eli]":{"skaBlocksSelectors":{"[\u0026\u003ea]":{"skaBlocksPadding":{"v":{"$":{"@":"","l":"7"}},"t":"sides"}},"[\u0026\u003eul]":{"skaBlocksSelectors":{"[\u0026\u003eli]":{"skaBlocksSelectors":{"[\u0026\u003ea]":{"skaBlocksPadding":{"v":{"$":{"@":"","l":"10"}},"t":"sides"},"skaBlocksBorderWidth":{"v":{"$":{"@":"","l":"DEFAULT"}},"t":"sides"}},"[\u0026\u003eul]":{"skaBlocksSelectors":{"[\u0026\u003eli]":{"skaBlocksSelectors":{"[\u0026\u003ea]":{"skaBlocksPadding":{"v":{"$":{"@":"","l":"12"}},"t":"sides"},"skaBlocksBorderWidth":{"v":{"$":{"@":"","l":"DEFAULT"}},"t":"sides"}},"[\u0026\u003eul]":{"skaBlocksSelectors":{"[\u0026\u003eli]":{"skaBlocksSelectors":{"[\u0026\u003ea]":{"skaBlocksPadding":{"v":{"$":{"@":"","l":"14"}},"t":"sides"},"skaBlocksBorderWidth":{"v":{"$":{"@":"","l":"DEFAULT"}},"t":"sides"}}}}}}}}}}}}}}}}}}}}}} /-->