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'
	/** Shift the dropdown on the main axis during placement (left/right). */
	shiftMainAxis?: boolean
	/** Shift the dropdown on the cross axis during placement (up/down). */
	shiftCrossAxis?: boolean
	/** When clicking a `.dropdown-icon` inside an `<a>` toggle the dropdown instead of following the link (default: `true`). */
	toggleOnDropdownIconClick?: boolean
}

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

WordPress core List block as a dropdown

Multiple dropdown items

Dropdowns with Menu block

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

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.