alpine.toggleable.js

  function toggleable(id) {
    return {
      id: id,
      show: false,
      bodyNeedsOverflowHidden: false,
      originalOverflow: '',

      id() {
        return id || `toggleable-${Math.random().toString(36).substr(2, 10)}`
      },

      open(bodyNeedsOverflowHidden) {
        this.show = true;
        
        if (bodyNeedsOverflowHidden === true) {
          this.originalOverflow = document.body.style.overflow;
          this.bodyNeedsOverflowHidden = !!bodyNeedsOverflowHidden;
          document.body.style.overflow = 'hidden';
        }
      },

      close() {
        this.show = false;
        
        if (this.bodyNeedsOverflowHidden) {
          document.body.style.overflow = this.originalOverflow;
        }
      },

      toggle(bodyNeedsOverflowHidden) {
        if (this.isOpen()) {
          this.close();
        } else {
          this.open(bodyNeedsOverflowHidden);
        }
      },

      isOpen() {
        return this.show === true
      }
    }
  }

your.blade.php

<!-- normal dropdown -->
<nav x-data="toggleable()">
    <button type="button" :aria-expanded="isOpen()" :aria-controls="id()" @click="toggle()">click</button>
    <div :id="id()" x-show="isOpen()" @click.away="close()" x-cloak>
        <ul>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
        </ul>
    </div>
</nav>

<!-- dropdown with body scroll freezed -->
<nav x-data="toggleable()">
    <button type="button" :aria-expanded="isOpen()" :aria-controls="id()" @click="toggle(true)">click</button>
    <div :id="id()" x-show="isOpen()" @click.away="close()" x-cloak>
        <ul>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
        </ul>
    </div>
</nav>


<!-- dropdown with custom id -->
<nav x-data="toggleable('primary-navigation')">
    <button type="button" :aria-expanded="isOpen()" :aria-controls="id()" @click="toggle()">click</button>
    <div :id="id()" x-show="isOpen()" @click.away="close()" x-cloak>
        <ul>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
            <li><a href="#">item</a></li>
        </ul>
    </div>
</nav>