@flexilla/alpine-dropdown
Advanced tools
AlpineJS plugin for adding Dropdown functionality to your AlpineJS components
Simple Interactive Dropdown Component for Alpine.js
Part of the Flexilla library - A collection of UI components for Alpine.js
The Alpine Dropdown component provides a lightweight and flexible dropdown menu implementation for Alpine.js applications. It features:
Include the following <script> tag in the <head> of your document, just before Alpine.
<script src="https://cdn.jsdelivr.net/npm/@flexilla/alpine-dropdown@latest/dist/cdn.min.js" defer></script>
npm install @flexilla/alpine-dropdown
Add the x-dropdown directive to your project by importing the package before starting Alpine.
import Alpine from 'alpinejs';
import PluginDropdown from '@flexilla/alpine-dropdown';
Alpine.plugin(PluginDropdown);
Alpine.start();
<button data-dropdown-trigger data-dropdown-id="dropdown-1"
class="border border-zinc-800 hover:bg-zinc-950 bg-zinc-900 text-white px-4 py-2 rounded-lg text-sm">
Open Dropdown
</button>
<div x-dropdown x-data role="list" id="dropdown-1" data-fx-popper
class="fixed top-[--fx-popper-placement-y] left-[--fx-popper-placement-x] z-20 w-56 border border-zinc-800 bg-zinc-900/80 text-zinc-50 backdrop-filter backdrop-blur-xl rounded-lg flex flex-col overflow-hidden opacity-0 invisible fx-open:opacity-100 fx-open:visible ease-linear transition-transform translate-y-4 fx-open:translate-y-0">
<a href="#" class="focus:outline focus:bg-zinc-900/90 outline-none focus:outline-blue-500 ease-linear flex hover-bg-zinc-800/80 p-2 rounded-md">
Item 1
</a>
<a href="/" class="focus:outline focus:bg-zinc-900/90 outline-none focus:outline-blue-500 ease-linear flex hover-bg-zinc-800/80 p-2 rounded-md">Item 2</a>
<a href="#" class="focus:outline focus:bg-zinc-900/90 outline-none focus:outline-blue-500 ease-linear flex hover-bg-zinc-800/80 p-2 rounded-md">Item 3</a>
<a href="#" class="focus:outline focus:bg-zinc-900/90 outline-none focus:outline-blue-500 ease-linear flex hover-bg-zinc-800/80 p-2 rounded-md">Item 4</a>
</div>
For detailed documentation, customization options, and advanced usage examples, visit the Flexilla Dropdown documentation.
Copyright (c) 2025 Johnkat MJ and contributors.
Licensed under the MIT license, see LICENSE for details.
FAQs
AlpineJS plugin for adding Dropdown functionality to your AlpineJS components
We found that @flexilla/alpine-dropdown demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
A supply chain attack on Axios introduced a malicious dependency, plain-crypto-js@4.2.1, published minutes earlier and absent from the project’s GitHub releases.
Research
Malicious versions of the Telnyx Python SDK on PyPI delivered credential-stealing malware via a multi-stage supply chain attack.
Security News
TeamPCP is partnering with ransomware group Vect to turn open source supply chain attacks on tools like Trivy and LiteLLM into large-scale ransomware operations.