DEV Community

Michael Burrows
Michael Burrows

Posted on • Originally published at w3collective.com

9 3

Building a dropdown menu using Alpine.js

AlpineJS is a small JavaScript framework for composing behavior directly in HTML markup. In this tutorial I’ll show you how the framework can be used to build a dropdown menu component. If you’ve never worked with Alpine before this will serve as a simple introduction to the framework.

For the purposes of this tutorial you can load the framework via CDN:

<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

With Alpine loaded create a wrapper <div> with the following attributes:

<div x-data="{ open: false }" x-on:click.outside="open = false">
  // ...
</div>
Enter fullscreen mode Exit fullscreen mode

x-data defines a chunk of HTML as an Alpine component and provides data for that component to reference. x-on:click.outside set’s the open data to false which will hide the dropdown when anywhere outside the component is clicked.

Next inside the wrapper <div> add a button that’ll trigger the dropdown’s visibility:

<button x-on:click="open = !open">
  My Account
</button>
Enter fullscreen mode Exit fullscreen mode

Another x-on:click this time we’re only tracking clicks directly on the button itself.

Now for the dropdown menu which is an unordered list with a x-show attribute:

<ul x-show="open">
  <li><a href="#">Edit Profile</a></li>
  <li><a href="#">Settings</a></li>
  <li><a href="#">Log Out</a></li>        
</ul>
Enter fullscreen mode Exit fullscreen mode

When open equals true the x-show attribute will change the visibility of the <ul> element. At this point in the tutorial we have a basic functioning dropdown, let’s add a couple of finishing touches to improve the look and feel. First let’s add an icon that’ll represent the state of the dropdown menu:

<button x-on:click="open = !open">
  My Account 
  <span :class="{'rotated': open}">&raquo;</span>
</button>
Enter fullscreen mode Exit fullscreen mode

If you view the source code after the button has been clicked you’ll see the rotated class has been applied to the <span> element:

Image description

We can now apply some CSS to rotate the icon indicating the menu is open:

.rotated {
  transform: rotate(90deg);
  display: inline-block;
}
Enter fullscreen mode Exit fullscreen mode

Finally we’ll add a transition so the opening and closing of the dropdown appears smoother:

<ul x-show="open" x-transition.opacity>
 ...       
</ul>
Enter fullscreen mode Exit fullscreen mode

That’s all for this tutorial. As you’ve just seen by adding some simple Alpine attributes to HTML markup it relatively easy to create a functioning dropdown menu. With what you learnt in this tutorial you could also start building other UI elements with show/hide functionality and Alpine.js.

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (1)

Collapse
 
comforx profile image
comforx

You could check the "menu" component in Vimesh Headless UI ( github.com/vimeshjs/vimesh-headless ), an alpinejs alternative of Tailwind Headless UI.

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay