{"id":34,"date":"2025-09-26T08:50:50","date_gmt":"2025-09-26T08:50:50","guid":{"rendered":"https:\/\/ska-blocks.com\/docs\/2025\/09\/26\/dropdown\/"},"modified":"2025-09-27T08:41:38","modified_gmt":"2025-09-27T08:41:38","slug":"dropdown","status":"publish","type":"post","link":"https:\/\/ska-blocks.com\/docs\/dropdown\/","title":{"rendered":"Dropdown"},"content":{"rendered":"\n

ska-theme includes an Alpine.js component for creating dropdowns.<\/p>\n\n\n\n

For creating a dropdown, add the x-data=\"skaDropdown\"<\/code> 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')\"<\/code> attribute. The element that contains the dropdown should have the x-bind=\"dropdown('dropdownId')\"<\/code> attribute and the element’s tag name should be <template><\/code> which is invisible on the front end. When it is time to show the dropdown the dropdown module will take the contents (x-teleport<\/code>) 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<\/strong> which provides consistent styling for dropdowns as well as includes classes for animation.<\/p>\n\n\n\n

Module arguments<\/span>TypeScript<\/span><\/header>
interface DropdownConfig {\n\t\/** When `click` is specified then dropdown opens on click, otherwise opens on hover. *\/\n\ton?: 'click'\n\t\/** Use `floating-ui`. Defaults to true, set to false to not use. *\/\n\tfloating?: boolean\n\t\/** Where to place the floating element relative to its reference element. *\/\n\tplacement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'\n\t\/** Shift the dropdown on the main axis during placement (left\/right). *\/\n\tshiftMainAxis?: boolean\n\t\/** Shift the dropdown on the cross axis during placement (up\/down). *\/\n\tshiftCrossAxis?: boolean\n\t\/** When clicking a `.dropdown-icon` inside an `<a>` toggle the dropdown instead of following the link (default: `true`). *\/\n\ttoggleOnDropdownIconClick?: boolean\n}<\/code><\/pre><\/div><\/div>\n\n\n\n
Arguments can be specified like this: x-data=\"skaDropdown({on: 'click', placement: 'left'})\"<\/code>.<\/p>\n\n\n\n
In summary, this is what the markup of a dropdown represented as CSS selectors:<\/p>\n\n\n\n
div[x-data=\"skaDropdown\"]\n\tdiv[x-bind=\"item('dropdownId')\"]\n\t\tbutton\/a \/\/ Dropdown trigger\n\ttemplate[x-bind=\"dropdown('dropdownId')]\n\t\tdiv\/ul.ska-preset-dropdown\n\t\t\tdiv\/li\/etc \/\/ Dropdown content<\/code><\/pre><\/div><\/div>\n\n\n\n
For the element that uses the Dropdown preset<\/strong> you can add CSS variables --ska-dropdown-gap<\/code> (determines how much margin to leave on top of the dropdown) and --ska-dropdown-expand<\/code> (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<\/code> to the “Add classes or utility…” input of ska-blocks and this will create a Tailwind class [--ska-dropdown-gap:2rem]<\/code> which adds 2rem<\/code> margin to the top of the dropdown.<\/p>\n\n\n\n
Example dropdown<\/h2>\n\n\n
\n
\n
\n
\n