Menu - ska-docs

Simple menu

<!-- wp:ska/menu {"id":17,"skaBlocks":{"cx":"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-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 rounded border divide-y shadow [\u0026\u003eli]:[\u0026\u003ea]:transition-colors","css":".table{display:table}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:block\u003eli\u003ea{display:block}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:px-4\u003eli\u003ea{padding-inline:var(\u002d\u002dspacing-4)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:py-2\u003eli\u003ea{padding-block:var(\u002d\u002dspacing-2)}.\\[\\\u0026_\\.sub-menu\\]\\:pl-4 .sub-menu{padding-left:var(\u002d\u002dspacing-4)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003e\\.sub-menu\\]\\:-mt-2\\.5\u003eli\u003e.sub-menu{margin-top:calc(var(\u002d\u002dspacing-2_5)*-1)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003e\\.sub-menu\\]\\:mb-2\\.5\u003eli\u003e.sub-menu{margin-bottom:var(\u002d\u002dspacing-2_5)}.min-w-56{min-width:var(\u002d\u002dspacing-56)}.text-base{font-size:var(\u002d\u002dtext-base);line-height:var(\u002d\u002dtw-leading,var(\u002d\u002dtext-base\u002d\u002dline-height))}.\\[\\\u0026_\\.sub-menu\\]\\:\\[\\\u0026_a\\]\\:text-sm .sub-menu a{font-size:var(\u002d\u002dtext-sm);line-height:var(\u002d\u002dtw-leading,var(\u002d\u002dtext-sm\u002d\u002dline-height))}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:text-site\u003eli\u003ea{color:var(\u002d\u002dcolor-site)}.\\[\\\u0026_\\.sub-menu\\]\\:\\[\\\u0026_a\\]\\:text-site-muted .sub-menu a{color:var(\u002d\u002dcolor-site-muted)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\.active\\:not\\(\\:hover\\)\\]\\:bg-gray-50\u003eli\u003ea.active:not(:hover){background-color:oklch(.985 .002 247.839)}@media (hover:hover){.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:hover\\:bg-gray-100\u003eli\u003ea:hover{background-color:oklch(.967 .003 264.542)}}.rounded{border-radius:var(\u002d\u002dradius)}.border{border-style:var(\u002d\u002dtw-border-style);border-width:1px}:where(.divide-y\u003e:not(:last-child)){\u002d\u002dtw-divide-y-reverse:0;border-bottom-style:var(\u002d\u002dtw-border-style);border-top-style:var(\u002d\u002dtw-border-style);border-top-width:calc(1px*var(\u002d\u002dtw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(\u002d\u002dtw-divide-y-reverse)))}.shadow{\u002d\u002dtw-shadow:var(\u002d\u002dshadow-sm);box-shadow:var(\u002d\u002dtw-inset-shadow),var(\u002d\u002dtw-inset-ring-shadow),var(\u002d\u002dtw-ring-offset-shadow),var(\u002d\u002dtw-ring-shadow),var(\u002d\u002dtw-shadow)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:transition-colors\u003eli\u003ea{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,\u002d\u002dtw-gradient-from,\u002d\u002dtw-gradient-via,\u002d\u002dtw-gradient-to;transition-timing-function:var(\u002d\u002dtw-ease,var(\u002d\u002ddefault-transition-timing-function));transition-duration:var(\u002d\u002dtw-duration,var(\u002d\u002ddefault-transition-duration))}","t":1740957313},"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\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-64 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","css":".table{display:table}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:block\u003eli\u003ea{display:block}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:px-5\u003eli\u003ea{padding-inline:var(\u002d\u002dspacing-5)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:py-2\u003eli\u003ea{padding-block:var(\u002d\u002dspacing-2)}.\\[\\\u0026_\\.sub-menu\\]\\:pl-5 .sub-menu{padding-left:var(\u002d\u002dspacing-5)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003e\\.sub-menu\\]\\:-mt-2\\.5\u003eli\u003e.sub-menu{margin-top:calc(var(\u002d\u002dspacing-2_5)*-1)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003e\\.sub-menu\\]\\:mb-2\\.5\u003eli\u003e.sub-menu{margin-bottom:var(\u002d\u002dspacing-2_5)}.min-w-64{min-width:var(\u002d\u002dspacing-64)}.text-base{font-size:var(\u002d\u002dtext-base);line-height:var(\u002d\u002dtw-leading,var(\u002d\u002dtext-base\u002d\u002dline-height))}.\\[\\\u0026_\\.sub-menu\\]\\:\\[\\\u0026_a\\]\\:text-sm .sub-menu a{font-size:var(\u002d\u002dtext-sm);line-height:var(\u002d\u002dtw-leading,var(\u002d\u002dtext-sm\u002d\u002dline-height))}.\\[\\\u0026_a\\.active\\]\\:font-bold a.active{\u002d\u002dtw-font-weight:var(\u002d\u002dfont-weight-bold);font-weight:var(\u002d\u002dfont-weight-bold)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:text-site\u003eli\u003ea{color:var(\u002d\u002dcolor-site)}.\\[\\\u0026_\\.sub-menu\\]\\:\\[\\\u0026_a\\]\\:text-site-muted .sub-menu a{color:var(\u002d\u002dcolor-site-muted)}.rounded{border-radius:var(\u002d\u002dradius)}.border{border-style:var(\u002d\u002dtw-border-style);border-width:1px}:where(.divide-y\u003e:not(:last-child)){\u002d\u002dtw-divide-y-reverse:0;border-bottom-style:var(\u002d\u002dtw-border-style);border-top-style:var(\u002d\u002dtw-border-style);border-top-width:calc(1px*var(\u002d\u002dtw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(\u002d\u002dtw-divide-y-reverse)))}.shadow{\u002d\u002dtw-shadow:var(\u002d\u002dshadow-sm);box-shadow:var(\u002d\u002dtw-inset-shadow),var(\u002d\u002dtw-inset-ring-shadow),var(\u002d\u002dtw-ring-offset-shadow),var(\u002d\u002dtw-ring-shadow),var(\u002d\u002dtw-shadow)}","t":1740957313},"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\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","css":".table{display:table}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:flex\u003eli\u003ea{display:flex}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:flex-row\u003eli\u003ea{flex-direction:row}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:justify-between\u003eli\u003ea{justify-content:space-between}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:items-center\u003eli\u003ea{align-items:center}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:px-5\u003eli\u003ea{padding-inline:var(\u002d\u002dspacing-5)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:py-2\u003eli\u003ea{padding-block:var(\u002d\u002dspacing-2)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003e\\.sub-menu\\]\\:-mt-2\\.5\u003eli\u003e.sub-menu{margin-top:calc(var(\u002d\u002dspacing-2_5)*-1)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003e\\.sub-menu\\]\\:mb-2\\.5\u003eli\u003e.sub-menu{margin-bottom:var(\u002d\u002dspacing-2_5)}.min-w-64{min-width:var(\u002d\u002dspacing-64)}.text-base{font-size:var(\u002d\u002dtext-base);line-height:var(\u002d\u002dtw-leading,var(\u002d\u002dtext-base\u002d\u002dline-height))}.\\[\\\u0026_a\\.active\\]\\:font-bold a.active{\u002d\u002dtw-font-weight:var(\u002d\u002dfont-weight-bold);font-weight:var(\u002d\u002dfont-weight-bold)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:text-site\u003eli\u003ea{color:var(\u002d\u002dcolor-site)}.rounded{border-radius:var(\u002d\u002dradius)}.border{border-style:var(\u002d\u002dtw-border-style);border-width:1px}:where(.divide-y\u003e:not(:last-child)){\u002d\u002dtw-divide-y-reverse:0;border-bottom-style:var(\u002d\u002dtw-border-style);border-top-style:var(\u002d\u002dtw-border-style);border-top-width:calc(1px*var(\u002d\u002dtw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(\u002d\u002dtw-divide-y-reverse)))}.shadow{\u002d\u002dtw-shadow:var(\u002d\u002dshadow-sm);box-shadow:var(\u002d\u002dtw-inset-shadow),var(\u002d\u002dtw-inset-ring-shadow),var(\u002d\u002dtw-ring-offset-shadow),var(\u002d\u002dtw-ring-shadow),var(\u002d\u002dtw-shadow)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\\u003e\\.dropdown-icon\\]\\:-rotate-90\u003eli\u003ea\u003e.dropdown-icon{rotate:-90deg}","t":1740957313},"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\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","css":".table{display:table}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:block\u003eli\u003ea{display:block}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:px-4\u003eli\u003ea{padding-inline:var(\u002d\u002dspacing-4)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:py-1\\.5\u003eli\u003ea{padding-block:var(\u002d\u002dspacing-1_5)}.\\[\\\u0026_\\.sub-menu\\]\\:pl-4 .sub-menu{padding-left:var(\u002d\u002dspacing-4)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003e\\.sub-menu\\]\\:mb-2\\.5\u003eli\u003e.sub-menu{margin-bottom:var(\u002d\u002dspacing-2_5)}:where(.space-y-1\u003e:not(:last-child)){\u002d\u002dtw-space-y-reverse:0;margin-block-start:calc(var(\u002d\u002dspacing-1)*var(\u002d\u002dtw-space-y-reverse));margin-block-end:calc(var(\u002d\u002dspacing-1)*calc(1 - var(\u002d\u002dtw-space-y-reverse)))}.min-w-56{min-width:var(\u002d\u002dspacing-56)}.text-base{font-size:var(\u002d\u002dtext-base);line-height:var(\u002d\u002dtw-leading,var(\u002d\u002dtext-base\u002d\u002dline-height))}.\\[\\\u0026_\\.sub-menu\\]\\:\\[\\\u0026_a\\]\\:text-sm .sub-menu a{font-size:var(\u002d\u002dtext-sm);line-height:var(\u002d\u002dtw-leading,var(\u002d\u002dtext-sm\u002d\u002dline-height))}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:text-site\u003eli\u003ea{color:var(\u002d\u002dcolor-site)}.\\[\\\u0026_\\.sub-menu\\]\\:\\[\\\u0026_a\\]\\:text-site-muted .sub-menu a{color:var(\u002d\u002dcolor-site-muted)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\.active\\:not\\(\\:hover\\)\\]\\:bg-gray-50\u003eli\u003ea.active:not(:hover){background-color:oklch(.985 .002 247.839)}@media (hover:hover){.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:hover\\:bg-gray-100\u003eli\u003ea:hover{background-color:oklch(.967 .003 264.542)}}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:rounded\u003eli\u003ea{border-radius:var(\u002d\u002dradius)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:transition-colors\u003eli\u003ea{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,\u002d\u002dtw-gradient-from,\u002d\u002dtw-gradient-via,\u002d\u002dtw-gradient-to;transition-timing-function:var(\u002d\u002dtw-ease,var(\u002d\u002ddefault-transition-timing-function));transition-duration:var(\u002d\u002dtw-duration,var(\u002d\u002ddefault-transition-duration))}","t":1740957313},"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\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","css":".table{display:table}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:block\u003eli\u003ea{display:block}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:px-4\u003eli\u003ea{padding-inline:var(\u002d\u002dspacing-4)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:py-1\\.5\u003eli\u003ea{padding-block:var(\u002d\u002dspacing-1_5)}.\\[\\\u0026_\\.sub-menu\\]\\:pl-4 .sub-menu{padding-left:var(\u002d\u002dspacing-4)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003e\\.sub-menu\\]\\:mb-2\\.5\u003eli\u003e.sub-menu{margin-bottom:var(\u002d\u002dspacing-2_5)}:where(.space-y-1\u003e:not(:last-child)){\u002d\u002dtw-space-y-reverse:0;margin-block-start:calc(var(\u002d\u002dspacing-1)*var(\u002d\u002dtw-space-y-reverse));margin-block-end:calc(var(\u002d\u002dspacing-1)*calc(1 - var(\u002d\u002dtw-space-y-reverse)))}.min-w-56{min-width:var(\u002d\u002dspacing-56)}.text-base{font-size:var(\u002d\u002dtext-base);line-height:var(\u002d\u002dtw-leading,var(\u002d\u002dtext-base\u002d\u002dline-height))}.\\[\\\u0026_\\.sub-menu\\]\\:\\[\\\u0026_a\\]\\:text-sm .sub-menu a{font-size:var(\u002d\u002dtext-sm);line-height:var(\u002d\u002dtw-leading,var(\u002d\u002dtext-sm\u002d\u002dline-height))}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:text-site\u003eli\u003ea{color:var(\u002d\u002dcolor-site)}.\\[\\\u0026_\\.sub-menu\\]\\:\\[\\\u0026_a\\]\\:text-site-muted .sub-menu a{color:var(\u002d\u002dcolor-site-muted)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:\\[\\\u0026\\.active\\:not\\(\\:hover\\)\\]\\:bg-gray-50\u003eli\u003ea.active:not(:hover){background-color:oklch(.985 .002 247.839)}@media (hover:hover){.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:hover\\:bg-gray-100\u003eli\u003ea:hover{background-color:oklch(.967 .003 264.542)}}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:rounded\u003eli\u003ea{border-radius:var(\u002d\u002dradius)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:transition-colors\u003eli\u003ea{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,\u002d\u002dtw-gradient-from,\u002d\u002dtw-gradient-via,\u002d\u002dtw-gradient-to;transition-timing-function:var(\u002d\u002dtw-ease,var(\u002d\u002ddefault-transition-timing-function));transition-duration:var(\u002d\u002dtw-duration,var(\u002d\u002ddefault-transition-duration))}","t":1740957313},"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\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","css":".\\[\\\u0026_a\\]\\:flex a{display:flex}.\\[\\\u0026_a\\]\\:py-1 a{padding-block:var(\u002d\u002dspacing-1)}.\\[\\\u0026_a\\]\\:pr-3 a{padding-right:var(\u002d\u002dspacing-3)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:pl-4\u003eli\u003ea{padding-left:var(\u002d\u002dspacing-4)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:pl-7\u003eli\u003eul\u003eli\u003ea{padding-left:var(\u002d\u002dspacing-7)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:pl-10\u003eli\u003eul\u003eli\u003eul\u003eli\u003ea{padding-left:var(\u002d\u002dspacing-10)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:pl-12\u003eli\u003eul\u003eli\u003eul\u003eli\u003eul\u003eli\u003ea{padding-left:var(\u002d\u002dspacing-12)}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:pl-14\u003eli\u003eul\u003eli\u003eul\u003eli\u003eul\u003eli\u003eul\u003eli\u003ea{padding-left:var(\u002d\u002dspacing-14)}.\\[\\\u0026_a\\]\\:text-base a{font-size:var(\u002d\u002dtext-base);line-height:var(\u002d\u002dtw-leading,var(\u002d\u002dtext-base\u002d\u002dline-height))}.\\[\\\u0026_a\\]\\:text-zinc-600 a{color:oklch(.442 .017 285.786)}@media (hover:hover){.\\[\\\u0026_a\\]\\:hover\\:text-zinc-900 a:hover{color:oklch(.21 .006 285.885)}}.\\[\\\u0026_a\\]\\:\\[\\\u0026\\.active\\]\\:bg-zinc-800\\/5 a.active{background-color:color-mix(in oklab,oklch(.274 .006 286.033)5%,transparent)}@media (hover:hover){.\\[\\\u0026_a\\]\\:hover\\:bg-zinc-800\\/1 a:hover{background-color:color-mix(in oklab,oklch(.274 .006 286.033)1%,transparent)}}.\\[\\\u0026_a\\]\\:rounded-r-full a{border-top-right-radius:3.40282e38px;border-bottom-right-radius:3.40282e38px}.\\[\\\u0026_a\\]\\:border-l-2\\! a{border-left-style:var(\u002d\u002dtw-border-style)!important;border-left-width:2px!important}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:border-l-2\u003eli\u003ea{border-left-style:var(\u002d\u002dtw-border-style);border-left-width:2px}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:border-l\u003eli\u003eul\u003eli\u003eul\u003eli\u003ea{border-left-style:var(\u002d\u002dtw-border-style);border-left-width:1px}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:border-l\u003eli\u003eul\u003eli\u003eul\u003eli\u003eul\u003eli\u003ea{border-left-style:var(\u002d\u002dtw-border-style);border-left-width:1px}.\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003eul\\]\\:\\[\\\u0026\\\u003eli\\]\\:\\[\\\u0026\\\u003ea\\]\\:border-l\u003eli\u003eul\u003eli\u003eul\u003eli\u003eul\u003eli\u003eul\u003eli\u003ea{border-left-style:var(\u002d\u002dtw-border-style);border-left-width:1px}.\\[\\\u0026_a\\]\\:\\[\\\u0026\\.active\\]\\:border-primary a.active{border-color:var(\u002d\u002dcolor-primary)}@media (hover:hover){.\\[\\\u0026_a\\]\\:hover\\:border-primary\\/75 a:hover{border-color:color-mix(in oklab,var(\u002d\u002dcolor-primary)75%,transparent)}}.\\[\\\u0026_a\\]\\:transition a{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,\u002d\u002dtw-gradient-from,\u002d\u002dtw-gradient-via,\u002d\u002dtw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter;transition-timing-function:var(\u002d\u002dtw-ease,var(\u002d\u002ddefault-transition-timing-function));transition-duration:var(\u002d\u002dtw-duration,var(\u002d\u002ddefault-transition-duration))}","t":1740957313},"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"}}}}}}}}}}}}}}}}}}}}}} /-->