1<nav
2  aria-labelledby="nav-heading"
3  x-data="{ isOpen: false }"
4  :aria-expanded="isOpen"
5>
6  <h2 id="nav-heading">Alpine.js Accessible Navigation</h2>
7  <button
8    :aria-expanded="isOpen"
9    aria-controls="nav-list"
10    @click="isOpen = !isOpen"
11  >
12    See Alpine Resources
13  </button>
14  <ul :hidden="!isOpen" id="nav-list">
15    <li>
16      <a href="https://github.com/alpinejs/alpine">Alpine.js Docs</a>
17    </li>
18    <li>
19      <a href="https://github.com/alpinejs/awesome-alpine"
20        >Awesome Alpine.js list</a
21      >
22    </li>
23    <li>
24      <a href="https://alpinejs.codewithhugo.com/newsletter"
25        >Alpine.js Weekly Newsletter</a
26      >
27    </li>
28  </ul>
29</nav>