Alpine: Ejemplo básico

 <div x-data="getData()" x-init="iniciar()"> <!-- solo poniendo x-data ya se aplica alpine a este div -->
        <button x-on:click="checkOpen()">
            Menú
        </button>

        <nav x-show="abrir" x-on:click.away="cerrar()"> <!-- away para cuando se pulse fuera del nav -->
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
            </ul>
        </nav>
    </div>

    <script>
        function getData() {
            return {
                abrir: null,
                iniciar() {
                    this.abrir = false
                },
                checkOpen() {
                    this.abrir = !this.abrir
                },
                cerrar() {
                    this.abrir = false
                }
            }
        }
    </script>