Skip to content

Instantly share code, notes, and snippets.

@w3collective

w3collective/alpine-dropdown.html

Created June 28, 2021 05:46
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save w3collective/b7e4eafa1858cc0e9138cc8eab484ebb to your computer and use it in GitHub Desktop.
Save w3collective/b7e4eafa1858cc0e9138cc8eab484ebb to your computer and use it in GitHub Desktop.
Download ZIP
Building a dropdown menu using Alpine.js
Raw
alpine-dropdown.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Alpine.js - Dropdown menu</title>
<style>
.rotated {
transform: rotate(90deg);
display: inline-block;
}
</style>
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<div x-data="{ open: false }" x-on:click.outside="open = false">
<button x-on:click="open = !open">My Account <span :class="{'rotated': open}">&raquo;</span></button>
<ul x-show="open" x-transition.opacity>
<li><a href="#">Edit Profile</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Log Out</a></li>
</ul>
</div>
<script src="https://unpkg.com/alpinejs@3.1.0/dist/cdn.min.js"></script>
</body>
</html>
@w3collective
Copy link
Author

Source => https://w3collective.com/dropdown-alpine-js/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment