Documentation
Docs

Dropdown

ska-theme includes an Alpine.js component for creating dropdowns.

For creating a dropdown, add the x-data="skaDropdown" attribute to the root element that contains one or many elements that trigger a dropdown as well as the dropdown elements.
The button or another element that triggers a dropdown should have a wrapper with the x-bind="item('dropdownId')" attribute. The element that contains the dropdown should have the x-bind="dropdown('dropdownId')" attribute and the element’s tag name should be <template> which is invisible on the front end. When it is time to show the dropdown the dropdown module will take the contents (x-teleport) of the template element and render them inside the wrapper for the dropdown trigger. The element directly inside the template should use the Dropdown preset which provides consistent styling for dropdowns as well as includes classes for animation.

Module argumentsTypeScript
interface DropdownConfig {
	/** When `click` is specified then dropdown opens on click, otherwise opens on hover. */
	on?: 'click'
	/** Use `floating-ui`. Defaults to true, set to false to not use. */
	floating?: boolean
	/** Where to place the floating element relative to its reference element. */
	placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'
}

Arguments can be specified like this: x-data="skaDropdown({on: 'click', placement: 'left'})".

In summary, this is what the markup of a dropdown represented as CSS selectors:

div[x-data="skaDropdown"]
	div[x-bind="item('dropdownId')"]
		button/a // Dropdown trigger
	template[x-bind="dropdown('dropdownId')]
		div/ul.ska-preset-dropdown
			div/li/etc // Dropdown content

For the element that uses the Dropdown preset you can add CSS variables --ska-dropdown-gap (determines how much margin to leave on top of the dropdown) and --ska-dropdown-expand (determines how much invisible space to add around the dropdown that still counts as hovering over the dropdown).
For example if your dropdown is opening too close to the dropdown trigger, enter --ska-dropdown-gap:2rem to the “Add classes or utility…” input of ska-blocks and this will create a Tailwind class [--ska-dropdown-gap:2rem] which adds 2rem margin to the top of the dropdown.

Example dropdown

<!-- wp:ska/element {"metadata":{"name":"Dropdown wrapper"},"skaBlocksAttributes":{"record":{"x-data":"skaDropdown({on: 'hover', placement: 'bottom'})"}},"skaBlocks":{"cx":"","t":1709756495,"css":""},"skaBlocksVariables":{"record":[]}} -->
<div x-data="skaDropdown({on: 'hover', placement: 'bottom'})" class="wp-block-ska-element"><!-- wp:ska/element {"metadata":{"name":"Dropdown trigger wrapper"},"skaBlocksAttributes":{"record":{"x-bind":"item('dropdown-1')"}}} -->
<div x-bind="item('dropdown-1')" class="wp-block-ska-element"><!-- wp:ska/text {"metadata":{"name":"Dropdown trigger"},"skaBlocksAs":{"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":[]},"skaBlocks":{"p":[{"id":"ska-theme:button","isStatic":true},{"id":"ska-theme:primaryButton","isStatic":true}]}} -->
<button class="wp-block-ska-text ska-text">Hover me</button>
<!-- /wp:ska/text --></div>
<!-- /wp:ska/element -->

<!-- wp:ska/element {"metadata":{"name":"Dropdown template"},"skaBlocksAs":{"element":"template"},"skaBlocksAttributes":{"record":{"x-bind":"dropdown('dropdown-1')"}}} -->
<template x-bind="dropdown('dropdown-1')" class="wp-block-ska-element"><!-- wp:ska/element {"metadata":{"name":"Dropdown"},"skaBlocksPadding":{"v":{"$":{"@":"2.5"}}},"skaBlocksWidth":{"v":{"$":{"@":"max"}}},"skaBlocksMaxWidth":{"v":{"$":{"@":"96"}},"a":["[96vw]"]},"skaBlocksAs":{"customElement":"template","element":"div"},"skaBlocksAttributes":{"record":[]},"skaBlocks":{"cx":"[\u002d\u002dska-dropdown-gap:theme(spacing[4])] p-2.5 w-max max-w-96","t":1709756495,"css":".w-max{width:-moz-max-content;width:max-content}.max-w-96{max-width:var(\u002d\u002dska-spacing-96)}.p-2{padding:var(\u002d\u002dska-spacing-2)}.p-2\\.5{padding:var(\u002d\u002dska-spacing-2\\.5)}.\\[\u002d\u002dska-dropdown-gap\\:theme\\(spacing\\[4\\]\\)\\]{\u002d\u002dska-dropdown-gap:var(\u002d\u002dska-spacing-4)}","p":[{"id":"ska-theme:dropdown","isStatic":true}]},"skaBlocksVariables":{"record":{"\u002d\u002dska-dropdown-gap":{"value":"theme(spacing[4])","type":"spacing"}}}} -->
<div class="[--ska-dropdown-gap:theme(spacing[4])] p-2.5 w-max max-w-96 wp-block-ska-element"><!-- wp:heading {"level":4,"skaBlocks":{"cx":"text-lg","t":1709756495,"css":".text-lg{font-size:var(\u002d\u002dska-font-size-lg);line-height:var(\u002d\u002dska-font-size-lg-lh)}"},"skaBlocksFontSize":{"v":{"$":{"@":"lg"}}}} -->
<h4 class="text-lg wp-block-heading">Lorem ipsum</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Fusce sagittis est felis, nec condimentum turpis finibus et.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Etiam eget nisl justo. Aliquam erat volutpat.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:ska/element --></template>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element -->

WordPress core List block as a dropdown

<!-- wp:ska/element {"metadata":{"name":"Dropdown wrapper"},"skaBlocksAttributes":{"record":{"x-data":"skaDropdown({on: 'click', placement: 'bottom-start'})"}},"skaBlocks":{"cx":"","t":1709756495,"css":""},"skaBlocksVariables":{"record":[]}} -->
<div x-data="skaDropdown({on: 'click', placement: 'bottom-start'})" class="wp-block-ska-element"><!-- wp:ska/element {"metadata":{"name":"Dropdown trigger wrapper"},"skaBlocksAttributes":{"record":{"x-bind":"item('dropdown-click')"}}} -->
<div x-bind="item('dropdown-click')" class="wp-block-ska-element"><!-- wp:ska/text {"metadata":{"name":"Dropdown trigger"},"skaBlocksAs":{"customElement":"button","element":"custom"},"skaBlocksAttributes":{"record":[]},"skaBlocks":{"p":[{"id":"ska-theme:button","isStatic":true},{"id":"ska-theme:primaryButton","isStatic":true}]}} -->
<button class="wp-block-ska-text ska-text">Click here</button>
<!-- /wp:ska/text --></div>
<!-- /wp:ska/element -->

<!-- wp:ska/element {"metadata":{"name":"Dropdown template"},"skaBlocksAs":{"element":"template"},"skaBlocksAttributes":{"record":{"x-bind":"dropdown('dropdown-click')"}}} -->
<template x-bind="dropdown('dropdown-click')" class="wp-block-ska-element"><!-- wp:list {"skaBlocks":{"p":[{"id":"ska-theme:dropdown","isStatic":true}],"cx":"[\u002d\u002dska-dropdown-gap:theme(spacing[2])]","t":1709756495,"css":".\\[\u002d\u002dska-dropdown-gap\\:theme\\(spacing\\[2\\]\\)\\]{\u002d\u002dska-dropdown-gap:var(\u002d\u002dska-spacing-2)}"},"skaBlocksVariables":{"record":{"\u002d\u002dska-dropdown-gap":{"value":"theme(spacing[2])","type":"spacing"}}}} -->
<ul class="[--ska-dropdown-gap:theme(spacing[2])] wp-block-list"><!-- wp:list-item -->
<li><a href="#">Dropdown item 1</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="#">Dropdown item 2</a></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><a href="#">Dropdown item 3</a></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></template>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element -->

Multiple dropdown items

<!-- wp:ska/element {"metadata":{"name":"Dropdowns"},"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksPosition":{"v":{"$":{"@":"relative"}}},"skaBlocksFlexDirection":{"v":{"$":{"@":"row"}}},"skaBlocksGap":{"v":{"$":{"@":"4"}},"a":[]},"skaBlocksAlignItems":{"v":{"$":{"@":"center"}}},"skaBlocksAttributes":{"record":{"x-data":"skaDropdown({ on: 'click', placement: 'bottom' })"}},"skaBlocks":{"cx":"flex *:flex relative flex-row gap-4 *:justify-center items-center *:items-center *:text-site hover:*:text-link *:transition-colors","t":1709756495,"css":".relative{position:relative}.flex{display:flex}.flex-row{flex-direction:row}.items-center{align-items:center}.gap-4{gap:var(\u002d\u002dska-spacing-4)}.\\*\\:flex \u003e *{display:flex}.\\*\\:items-center \u003e *{align-items:center}.\\*\\:justify-center \u003e *{justify-content:center}.\\*\\:text-site \u003e *{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site),0.87)}.\\*\\:transition-colors \u003e *{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\\:\\*\\:text-link \u003e *:hover{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-link),1)}"},"skaBlocksVariables":{"record":[]},"skaBlocksSelectors":{"*":{"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksAlignItems":{"v":{"$":{"@":"center"}}},"skaBlocksJustifyContent":{"v":{"$":{"@":"center"}}},"skaBlocksTextColor":{"v":{"$":{"@":"site"},"hover":{"@":"link"}}},"skaBlocksTransitionProperty":{"v":{"$":{"@":"colors"}}}}}} -->
<div x-data="skaDropdown({ on: 'click', placement: 'bottom' })" class="flex *:flex relative flex-row gap-4 *:justify-center items-center *:items-center *:text-site hover:*:text-link *:transition-colors wp-block-ska-element"><!-- wp:ska/element {"metadata":{"name":"Search item"},"skaBlocksPosition":{"v":{"$":{"@":"relative"}}},"skaBlocksAttributes":{"record":{"x-bind":"item('search')"}},"skaBlocks":{"cx":"relative","t":1709756495,"css":".relative{position:relative}"}} -->
<div x-bind="item('search')" class="relative wp-block-ska-element"><!-- wp:ska/element {"metadata":{"name":"Search button"},"skaBlocksAs":{"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"aria-label":"Search"}},"skaBlocks":{"cx":"","t":1701864221,"css":""}} -->
<button aria-label="Search" class="wp-block-ska-element"><!-- wp:ska/image {"mode":"svg","svg":"\u003csvg viewBox=\u00220 0 20 20\u0022 fill=\u0022none\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022\u003e\n\t\u003cpath fill-rule=\u0022evenodd\u0022 clip-rule=\u0022evenodd\u0022 d=\u0022M9 3.5C5.96243 3.5 3.5 5.96243 3.5 9C3.5 12.0376 5.96243 14.5 9 14.5C10.519 14.5 11.893 13.8852 12.8891 12.8891C13.8852 11.893 14.5 10.519 14.5 9C14.5 5.96243 12.0376 3.5 9 3.5ZM2 9C2 5.13401 5.13401 2 9 2C12.866 2 16 5.13401 16 9C16 10.6625 15.4197 12.1906 14.4517 13.3911L17.7803 16.7197C18.0732 17.0126 18.0732 17.4874 17.7803 17.7803C17.4874 18.0732 17.0126 18.0732 16.7197 17.7803L13.3911 14.4517C12.1906 15.4197 10.6625 16 9 16C5.13401 16 2 12.866 2 9Z\u0022 fill=\u0022currentColor\u0022 /\u003e\n\u003c/svg\u003e","collection":"heroicons","icon":"20/solid/magnifying-glass","wrap":false,"sanitize":false,"skaBlocks":{"cx":"w-6 h-auto","t":1709756495,"css":".h-auto{height:auto}.w-6{width:var(\u002d\u002dska-spacing-6)}"},"skaBlocksAttributes":{"record":{"aria-hidden":"true"}},"skaBlocksWidth":{"v":{"$":{"@":"6"}}},"skaBlocksHeight":{"v":{"$":{"@":"auto"}}}} -->
<svg aria-hidden="true" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-6 h-auto wp-block-ska-image">
	<path fill-rule="evenodd" clip-rule="evenodd" d="M9 3.5C5.96243 3.5 3.5 5.96243 3.5 9C3.5 12.0376 5.96243 14.5 9 14.5C10.519 14.5 11.893 13.8852 12.8891 12.8891C13.8852 11.893 14.5 10.519 14.5 9C14.5 5.96243 12.0376 3.5 9 3.5ZM2 9C2 5.13401 5.13401 2 9 2C12.866 2 16 5.13401 16 9C16 10.6625 15.4197 12.1906 14.4517 13.3911L17.7803 16.7197C18.0732 17.0126 18.0732 17.4874 17.7803 17.7803C17.4874 18.0732 17.0126 18.0732 16.7197 17.7803L13.3911 14.4517C12.1906 15.4197 10.6625 16 9 16C5.13401 16 2 12.866 2 9Z" fill="currentColor"></path>
</svg>
<!-- /wp:ska/image --></button>
<!-- /wp:ska/element -->

<!-- wp:ska/element {"skaBlocksDisplay":{"v":{"$":{"@":""},"editor":{"@":"inline-block"},"editor:[\u0026:not(.is-selected):not(.has-child-selected)]":{"@":"hidden"}}},"skaBlocksPosition":{"v":{"$":{"@":""},"editor":{"@":"fixed"}}},"skaBlocksAs":{"customElement":"template","element":"template"},"skaBlocksAttributes":{"record":{"x-bind":"dropdown('search')"}},"skaBlocks":{"cx":"editor:inline-block editor:[\u0026:not(.is-selected):not(.has-child-selected)]:hidden editor:fixed","t":1709756495,"css":":is(.is-root-container) .editor\\:fixed{position:fixed}:is(.is-root-container) .editor\\:inline-block{display:inline-block}:is(.is-root-container) .editor\\:\\[\\\u0026\\:not\\(\\.is-selected\\)\\:not\\(\\.has-child-selected\\)\\]\\:hidden:not(.is-selected):not(.has-child-selected){display:none}"},"skaBlocksVariation":"ska-theme:dropdown"} -->
<template x-bind="dropdown('search')" class="editor:inline-block editor:[&:not(.is-selected):not(.has-child-selected)]:hidden editor:fixed wp-block-ska-element"><!-- wp:ska/element {"skaBlocksPadding":{"v":{"$":{"@":"2.5"}}},"skaBlocksWidth":{"v":{"$":{"@":"max"}}},"skaBlocksMaxWidth":{"v":{"$":{"@":"[96vw]"}},"a":["[96vw]"]},"skaBlocksAs":{"customElement":"template","element":"div"},"skaBlocksAttributes":{"record":[]},"skaBlocks":{"cx":"p-2.5 w-max max-w-[96vw]","t":1709756495,"css":".w-max{width:-moz-max-content;width:max-content}.max-w-\\[96vw\\]{max-width:96vw}.p-2{padding:var(\u002d\u002dska-spacing-2)}.p-2\\.5{padding:var(\u002d\u002dska-spacing-2\\.5)}","p":[{"id":"ska-theme:dropdown","isStatic":true}]},"skaBlocksVariables":{"record":[]}} -->
<div class="p-2.5 w-max max-w-[96vw] wp-block-ska-element"><!-- wp:ska/element {"skaBlocksAs":{"element":"custom","customElement":"form"},"skaBlocksAttributes":{"record":{"role":"search","method":"GET","action":"/"}},"skaBlocks":{"cx":"","t":1687719496,"css":""}} -->
<form role="search" method="GET" action="/" class="wp-block-ska-element"><!-- wp:ska/element {"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksPosition":{"v":{"$":{"@":"relative"}}},"skaBlocksFlexDirection":{"v":{"$":{"@":"row"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"md"}}},"skaBlocksBoxShadow":{"v":{"$":{"@":"sm"}}},"skaBlocksAs":{"element":"div"},"skaBlocks":{"cx":"flex relative flex-row rounded-md shadow-sm","t":1709756495,"css":".relative{position:relative}.flex{display:flex}.flex-row{flex-direction:row}.rounded-md{border-radius:var(\u002d\u002dska-border-radius-md)}.shadow-sm{\u002d\u002dtw-shadow:0 1px 2px 0 rgb(0 0 0/0.05);\u002d\u002dtw-shadow-colored:0 1px 2px 0 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)}"}} -->
<div class="flex relative flex-row rounded-md shadow-sm wp-block-ska-element"><!-- wp:ska/text {"skaBlocksDisplay":{"v":{"$":{"@":"block"}}},"skaBlocksZIndex":{"v":{"$":{"@":""},"focus":{"@":"10"}}},"skaBlocksPadding":{"v":{"$":{"@":"","l":"12"}},"t":"sides"},"skaBlocksWidth":{"v":{"$":{"@":"full"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"","r":"!none"}},"t":"sides"},"skaBlocksBoxShadow":{"v":{"$":{"@":"!none"}}},"skaBlocksAs":{"element":"custom","customElement":"input"},"skaBlocksAttributes":{"record":{"type":"search","name":"s","placeholder":"Search…"}},"skaBlocks":{"cx":"block focus:z-10 pl-12 w-full !rounded-r-none !shadow-none","t":1709756495,"css":".block{display:block}.w-full{width:100%}.\\!rounded-r-none{border-top-right-radius:var(\u002d\u002dska-border-radius-none)!important;border-bottom-right-radius:var(\u002d\u002dska-border-radius-none)!important}.pl-12{padding-left:var(\u002d\u002dska-spacing-12)}.\\!shadow-none{\u002d\u002dtw-shadow:0 0 #0000!important;\u002d\u002dtw-shadow-colored:0 0 var(\u002d\u002dtw-shadow-color)!important;box-shadow:var(\u002d\u002dtw-ring-offset-shadow,0 0 #0000),var(\u002d\u002dtw-ring-shadow,0 0 #0000),var(\u002d\u002dtw-shadow)!important}.focus\\:z-10:focus{z-index:10}"}} -->
<input type="search" name="s" placeholder="Search…" class="block focus:z-10 pl-12 w-full !rounded-r-none !shadow-none wp-block-ska-text ska-text" id="dropdown-search"/>
<!-- /wp:ska/text -->

<!-- wp:ska/element {"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksPosition":{"v":{"$":{"@":"absolute"}}},"skaBlocksTopRightBottomLeft":{"v":{"$":{"@":"","iy":"0","l":"0"}},"t":"inset-axis"},"skaBlocksZIndex":{"v":{"$":{"@":"20"}}},"skaBlocksAlignItems":{"v":{"$":{"@":"center"}}},"skaBlocksPadding":{"v":{"$":{"@":"","l":"4"}},"t":"sides"},"skaBlocksPointerEvents":{"v":{"$":{"@":"none"}}},"skaBlocksAs":{"element":"div"},"skaBlocks":{"cx":"flex absolute left-0 inset-y-0 z-20 items-center pl-4 pointer-events-none","t":1709756495,"css":".pointer-events-none{pointer-events:none}.absolute{position:absolute}.inset-y-0{top:var(\u002d\u002dska-spacing-0);bottom:var(\u002d\u002dska-spacing-0)}.left-0{left:var(\u002d\u002dska-spacing-0)}.z-20{z-index:20}.flex{display:flex}.items-center{align-items:center}.pl-4{padding-left:var(\u002d\u002dska-spacing-4)}"}} -->
<div class="flex absolute left-0 inset-y-0 z-20 items-center pl-4 pointer-events-none wp-block-ska-element"><!-- wp:ska/image {"mode":"svg","svg":"\u003csvg viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022\u003e\n\t\u003cpath fill-rule=\u0022evenodd\u0022 clip-rule=\u0022evenodd\u0022 d=\u0022M10.5 3.75C6.77208 3.75 3.75 6.77208 3.75 10.5C3.75 14.2279 6.77208 17.25 10.5 17.25C12.3642 17.25 14.0506 16.4953 15.273 15.273C16.4953 14.0506 17.25 12.3642 17.25 10.5C17.25 6.77208 14.2279 3.75 10.5 3.75ZM2.25 10.5C2.25 5.94365 5.94365 2.25 10.5 2.25C15.0563 2.25 18.75 5.94365 18.75 10.5C18.75 12.5078 18.032 14.3491 16.8399 15.7793L21.5303 20.4697C21.8232 20.7626 21.8232 21.2374 21.5303 21.5303C21.2374 21.8232 20.7626 21.8232 20.4697 21.5303L15.7793 16.8399C14.3491 18.032 12.5078 18.75 10.5 18.75C5.94365 18.75 2.25 15.0563 2.25 10.5Z\u0022 fill=\u0022currentColor\u0022 /\u003e\n\u003c/svg\u003e","collection":"heroicons","icon":"24/solid/magnifying-glass","wrap":false,"skaBlocks":{"cx":"w-5 h-auto text-gray-400","t":1709756495,"css":".h-auto{height:auto}.w-5{width:var(\u002d\u002dska-spacing-5)}.text-gray-400{\u002d\u002dtw-text-opacity:1;color:rgba(156,163,175,1)}"},"skaBlocksWidth":{"v":{"$":{"@":"5"}}},"skaBlocksHeight":{"v":{"$":{"@":"auto"}}},"skaBlocksTextColor":{"v":{"$":{"@":"gray-400"}}}} -->
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-5 h-auto text-gray-400 wp-block-ska-image" aria-hidden="true">
	<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5 3.75C6.77208 3.75 3.75 6.77208 3.75 10.5C3.75 14.2279 6.77208 17.25 10.5 17.25C12.3642 17.25 14.0506 16.4953 15.273 15.273C16.4953 14.0506 17.25 12.3642 17.25 10.5C17.25 6.77208 14.2279 3.75 10.5 3.75ZM2.25 10.5C2.25 5.94365 5.94365 2.25 10.5 2.25C15.0563 2.25 18.75 5.94365 18.75 10.5C18.75 12.5078 18.032 14.3491 16.8399 15.7793L21.5303 20.4697C21.8232 20.7626 21.8232 21.2374 21.5303 21.5303C21.2374 21.8232 20.7626 21.8232 20.4697 21.5303L15.7793 16.8399C14.3491 18.032 12.5078 18.75 10.5 18.75C5.94365 18.75 2.25 15.0563 2.25 10.5Z" fill="currentColor"></path>
</svg>
<!-- /wp:ska/image --></div>
<!-- /wp:ska/element -->

<!-- wp:ska/text {"className":"flex-shrink-0","skaBlocksZIndex":{"v":{"$":{"@":""},"focus":{"@":"10"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"","l":"none","r":"DEFAULT"}},"t":"sides"},"skaBlocksAs":{"href":"#","opensInNewTab":false,"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"type":"submit"}},"skaBlocks":{"cx":"focus:z-10 rounded-r rounded-l-none","t":1709756495,"css":".flex-shrink-0{flex-shrink:0}.rounded-l-none{border-top-left-radius:var(\u002d\u002dska-border-radius-none);border-bottom-left-radius:var(\u002d\u002dska-border-radius-none)}.rounded-r{border-top-right-radius:var(\u002d\u002dska-border-radius);border-bottom-right-radius:var(\u002d\u002dska-border-radius)}.focus\\:z-10:focus{z-index:10}","p":[{"id":"ska-theme:button","isStatic":true},{"id":"ska-theme:primaryButton","isStatic":true}]}} -->
<button type="submit" class="focus:z-10 rounded-r rounded-l-none wp-block-ska-text ska-text flex-shrink-0">Search</button>
<!-- /wp:ska/text --></div>
<!-- /wp:ska/element --></form>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element --></template>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element -->

<!-- wp:ska/element {"metadata":{"name":"My account item"},"skaBlocksPosition":{"v":{"$":{"@":"relative"}}},"skaBlocksAttributes":{"record":{"x-bind":"item('my-account')"}},"skaBlocks":{"cx":"relative","t":1709756495,"css":".relative{position:relative}"}} -->
<div x-bind="item('my-account')" class="relative wp-block-ska-element"><!-- wp:ska/element {"metadata":{"name":"My account button"},"skaBlocksAs":{"customElement":"button","href":"","opensInNewTab":false,"element":"custom"},"skaBlocksAttributes":{"record":{"aria-label":"My account"}},"skaBlocks":{"cx":"","t":1701864221,"css":""}} -->
<button aria-label="My account" class="wp-block-ska-element"><!-- wp:ska/image {"mode":"svg","svg":"\u003csvg viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022\u003e\n\t\u003cpath fill-rule=\u0022evenodd\u0022 clip-rule=\u0022evenodd\u0022 d=\u0022M18.6854 19.0971C20.5721 17.3191 21.75 14.7971 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 14.7971 3.42785 17.3191 5.31463 19.0971C7.06012 20.7419 9.41234 21.75 12 21.75C14.5877 21.75 16.9399 20.7419 18.6854 19.0971ZM6.14512 17.8123C7.51961 16.0978 9.63161 15 12 15C14.3684 15 16.4804 16.0978 17.8549 17.8123C16.3603 19.3178 14.289 20.25 12 20.25C9.711 20.25 7.63973 19.3178 6.14512 17.8123ZM15.75 9C15.75 11.0711 14.0711 12.75 12 12.75C9.92893 12.75 8.25 11.0711 8.25 9C8.25 6.92893 9.92893 5.25 12 5.25C14.0711 5.25 15.75 6.92893 15.75 9Z\u0022 fill=\u0022currentColor\u0022 /\u003e\n\u003c/svg\u003e","collection":"heroicons","icon":"24/solid/user-circle","wrap":false,"sanitize":false,"skaBlocks":{"cx":"w-6 h-auto","t":1709756495,"css":".h-auto{height:auto}.w-6{width:var(\u002d\u002dska-spacing-6)}"},"skaBlocksAttributes":{"record":{"aria-hidden":"true"}},"skaBlocksWidth":{"v":{"$":{"@":"6"}}},"skaBlocksHeight":{"v":{"$":{"@":"auto"}}}} -->
<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-6 h-auto wp-block-ska-image">
	<path fill-rule="evenodd" clip-rule="evenodd" d="M18.6854 19.0971C20.5721 17.3191 21.75 14.7971 21.75 12C21.75 6.61522 17.3848 2.25 12 2.25C6.61522 2.25 2.25 6.61522 2.25 12C2.25 14.7971 3.42785 17.3191 5.31463 19.0971C7.06012 20.7419 9.41234 21.75 12 21.75C14.5877 21.75 16.9399 20.7419 18.6854 19.0971ZM6.14512 17.8123C7.51961 16.0978 9.63161 15 12 15C14.3684 15 16.4804 16.0978 17.8549 17.8123C16.3603 19.3178 14.289 20.25 12 20.25C9.711 20.25 7.63973 19.3178 6.14512 17.8123ZM15.75 9C15.75 11.0711 14.0711 12.75 12 12.75C9.92893 12.75 8.25 11.0711 8.25 9C8.25 6.92893 9.92893 5.25 12 5.25C14.0711 5.25 15.75 6.92893 15.75 9Z" fill="currentColor"></path>
</svg>
<!-- /wp:ska/image --></button>
<!-- /wp:ska/element -->

<!-- wp:ska/element {"skaBlocksDisplay":{"v":{"$":{"@":""},"editor:[\u0026:not(.is-selected):not(.has-child-selected)]":{"@":"hidden"}}},"skaBlocksPosition":{"v":{"$":{"@":""},"editor":{"@":"fixed"}}},"skaBlocksAs":{"customElement":"template","element":"template"},"skaBlocksAttributes":{"record":{"x-bind":"dropdown('my-account')"}},"skaBlocks":{"cx":"editor:[\u0026:not(.is-selected):not(.has-child-selected)]:hidden editor:fixed","t":1709756495,"css":":is(.is-root-container) .editor\\:fixed{position:fixed}:is(.is-root-container) .editor\\:\\[\\\u0026\\:not\\(\\.is-selected\\)\\:not\\(\\.has-child-selected\\)\\]\\:hidden:not(.is-selected):not(.has-child-selected){display:none}"},"skaBlocksVariation":"ska-theme:dropdown"} -->
<template x-bind="dropdown('my-account')" class="editor:[&:not(.is-selected):not(.has-child-selected)]:hidden editor:fixed wp-block-ska-element"><!-- wp:ska/element {"skaBlocksAs":{"customElement":"template","element":"ul"},"skaBlocksAttributes":{"record":[]},"skaBlocks":{"cx":"","t":1703535564,"css":"","p":[{"id":"ska-theme:dropdown","isStatic":true}]},"skaBlocksVariables":{"record":[]}} -->
<ul class="wp-block-ska-element"><!-- wp:ska/element {"skaBlocksDisplay":{"v":{"$":{"@":""},"[body.logged-in_\u0026]":{"@":"hidden"}}},"skaBlocksAs":{"element":"li"},"skaBlocks":{"cx":"[body.logged-in_\u0026]:hidden","t":1709756495,"css":"body.logged-in .\\[body\\.logged-in_\\\u0026\\]\\:hidden{display:none}"}} -->
<li class="[body.logged-in_&]:hidden wp-block-ska-element"><!-- wp:ska/text {"skaBlocksAs":{"element":"a","href":"#ska-link\u002d\u002dwc-my-account","opensInNewTab":false}} -->
<a href="#ska-link--wc-my-account" class="wp-block-ska-text ska-text">Log in</a>
<!-- /wp:ska/text --></li>
<!-- /wp:ska/element -->

<!-- wp:ska/element {"skaBlocksDisplay":{"v":{"$":{"@":""},"[body.logged-in_\u0026]":{"@":"hidden"}}},"skaBlocksAs":{"element":"li"},"skaBlocks":{"cx":"[body.logged-in_\u0026]:hidden","t":1709756495,"css":"body.logged-in .\\[body\\.logged-in_\\\u0026\\]\\:hidden{display:none}"}} -->
<li class="[body.logged-in_&]:hidden wp-block-ska-element"><!-- wp:ska/text {"skaBlocksAs":{"element":"a","href":"#ska-link\u002d\u002dwc-my-account","opensInNewTab":false}} -->
<a href="#ska-link--wc-my-account" class="wp-block-ska-text ska-text">Sign up</a>
<!-- /wp:ska/text --></li>
<!-- /wp:ska/element -->

<!-- wp:ska/element {"skaBlocksDisplay":{"v":{"$":{"@":""},"[body:not(.logged-in)_\u0026]":{"@":"hidden"}}},"skaBlocksAs":{"element":"li"},"skaBlocks":{"cx":"[body:not(.logged-in)_\u0026]:hidden","t":1709756495,"css":"body:not(.logged-in) .\\[body\\:not\\(\\.logged-in\\)_\\\u0026\\]\\:hidden{display:none}"}} -->
<li class="[body:not(.logged-in)_&]:hidden wp-block-ska-element"><!-- wp:ska/text {"skaBlocksAs":{"element":"a","href":"#ska-link\u002d\u002dwc-my-account","opensInNewTab":false}} -->
<a href="#ska-link--wc-my-account" class="wp-block-ska-text ska-text">My account</a>
<!-- /wp:ska/text --></li>
<!-- /wp:ska/element -->

<!-- wp:ska/element {"skaBlocksDisplay":{"v":{"$":{"@":""},"[body:not(.logged-in)_\u0026]":{"@":"hidden"}}},"skaBlocksAs":{"element":"li"},"skaBlocks":{"cx":"[body:not(.logged-in)_\u0026]:hidden","t":1709756495,"css":"body:not(.logged-in) .\\[body\\:not\\(\\.logged-in\\)_\\\u0026\\]\\:hidden{display:none}"}} -->
<li class="[body:not(.logged-in)_&]:hidden wp-block-ska-element"><!-- wp:ska/text {"skaBlocksAs":{"element":"a","href":"/konto/customer-logout"}} -->
<a href="/konto/customer-logout" class="wp-block-ska-text ska-text">Sign out</a>
<!-- /wp:ska/text --></li>
<!-- /wp:ska/element --></ul>
<!-- /wp:ska/element --></template>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element -->

Dropdowns with Menu block

When using the Menu block dropdowns are automatically created based on the WordPress nav menu structure.

<!-- wp:ska/menu {"id":16,"dropdown":"hover","skaBlocks":{"cx":"flex [\u0026\u003eli\u003e*:not(ul)]:flex flex-row [\u0026\u003eli\u003e*:not(ul)]:flex-row gap-7 [\u0026\u003eli\u003e*:not(ul)]:gap-px [\u0026\u003eli\u003e*:not(ul)]:items-center ml-auto text-base font-medium [\u0026\u003eli\u003e*:not(ul)]:text-site hover:[\u0026\u003eli\u003e*:not(ul)]:text-link [\u0026.active]:[\u0026\u003eli\u003e*:not(ul)]:text-link-active [\u0026.active]:[\u0026\u003eli\u003e*:not(ul)]:underline [\u0026\u003eli\u003e*:not(ul)]:decoration-primary [\u0026\u003eli\u003e*:not(ul)]:decoration-2 [\u0026\u003eli\u003e*:not(ul)]:underline-offset-2 [\u0026\u003eli\u003e*:not(ul)]:whitespace-nowrap [\u0026\u003eli\u003e*:not(ul)]:transition-colors","t":1709756495,"css":".ml-auto{margin-left:auto}.flex{display:flex}.flex-row{flex-direction:row}.gap-7{gap:var(\u002d\u002dska-spacing-7)}.text-base{font-size:var(\u002d\u002dska-font-size-base);line-height:var(\u002d\u002dska-font-size-base-lh)}.font-medium{font-weight:var(\u002d\u002dska-font-weight-medium)}.\\[\\\u0026\\\u003eli\\\u003e\\*\\:not\\(ul\\)\\]\\:flex\u003eli\u003e*:not(ul){display:flex}.\\[\\\u0026\\\u003eli\\\u003e\\*\\:not\\(ul\\)\\]\\:flex-row\u003eli\u003e*:not(ul){flex-direction:row}.\\[\\\u0026\\\u003eli\\\u003e\\*\\:not\\(ul\\)\\]\\:items-center\u003eli\u003e*:not(ul){align-items:center}.\\[\\\u0026\\\u003eli\\\u003e\\*\\:not\\(ul\\)\\]\\:gap-px\u003eli\u003e*:not(ul){gap:var(\u002d\u002dska-spacing-px)}.\\[\\\u0026\\\u003eli\\\u003e\\*\\:not\\(ul\\)\\]\\:whitespace-nowrap\u003eli\u003e*:not(ul){white-space:nowrap}.\\[\\\u0026\\\u003eli\\\u003e\\*\\:not\\(ul\\)\\]\\:text-site\u003eli\u003e*:not(ul){\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site),0.87)}.\\[\\\u0026\\\u003eli\\\u003e\\*\\:not\\(ul\\)\\]\\:decoration-primary\u003eli\u003e*:not(ul){text-decoration-color:rgba(var(\u002d\u002dska-rgb-primary),1)}.\\[\\\u0026\\\u003eli\\\u003e\\*\\:not\\(ul\\)\\]\\:decoration-2\u003eli\u003e*:not(ul){text-decoration-thickness:2px}.\\[\\\u0026\\\u003eli\\\u003e\\*\\:not\\(ul\\)\\]\\:underline-offset-2\u003eli\u003e*:not(ul){text-underline-offset:2px}.\\[\\\u0026\\\u003eli\\\u003e\\*\\:not\\(ul\\)\\]\\:transition-colors\u003eli\u003e*:not(ul){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\\\u003eli\\\u003e\\*\\:not\\(ul\\)\\]\\:text-link\u003eli\u003e*:not(ul):hover{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-link),1)}.\\[\\\u0026\\.active\\]\\:\\[\\\u0026\\\u003eli\\\u003e\\*\\:not\\(ul\\)\\]\\:text-link-active\u003eli\u003e*:not(ul).active{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-link-active),1)}.\\[\\\u0026\\.active\\]\\:\\[\\\u0026\\\u003eli\\\u003e\\*\\:not\\(ul\\)\\]\\:underline\u003eli\u003e*:not(ul).active{text-decoration-line:underline}"},"skaBlocksSelectors":{"[\u0026\u003eli\u003e*:not(ul)]":{"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksFlexDirection":{"v":{"$":{"@":"row"}}},"skaBlocksAlignItems":{"v":{"$":{"@":"center"}}},"skaBlocksGap":{"v":{"$":{"@":"px"}}},"skaBlocksTextColor":{"v":{"$":{"@":"site"},"hover":{"@":"link"},"[\u0026.active]":{"@":"link-active"}}},"skaBlocksTextDecoration":{"v":{"$":{"@":""},"[\u0026.active]":{"@":"underline"}}},"skaBlocksTextDecorationColor":{"v":{"$":{"@":"primary"}}},"skaBlocksTextDecorationThickness":{"v":{"$":{"@":"2"}}},"skaBlocksTextUnderlineOffset":{"v":{"$":{"@":"2"}}},"skaBlocksTransitionProperty":{"v":{"$":{"@":"colors"}}},"skaBlocksWhitespace":{"v":{"$":{"@":"nowrap"}}}}},"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksFlexDirection":{"v":{"$":{"@":"row"}}},"skaBlocksGap":{"v":{"$":{"@":"7"}}},"skaBlocksMargin":{"v":{"$":{"@":"","l":"auto"}},"t":"sides"},"skaBlocksFontSize":{"v":{"$":{"@":"base"}}},"skaBlocksFontWeight":{"v":{"$":{"@":"medium"}}}} /-->

Dropdown variation (experimental)

ska-theme has a variation called “Dropdown” which you can enter the same way as a regular block.

The Dropdown variation is a <template> element with a List inside that has the Dropdown preset. The variation also has the classes:

editor:inline-block [&:not(.is-selected):not(.has-child-selected)]:editor:hidden editor:p-4

which means it is not visible unless you select this block. This allows to place a dropdowns in a tight place, such as a header.