AlpineJS BFCache example

index.html

<script src="//unpkg.com/alpinejs" defer></script>
 
<div x-data="menuExample" x-bind="eventListeners">
	<button @click="toggle">Expand</button>
 
    <div x-show="open">
		Menu Content...
    </div>
</div>

<script>
	document.addEventListener('alpine:init', () => {
		Alpine.data('menuExample', () => ({
  			open: false,
			toggle() {
				this.open = !this.open
			},
	  		eventListeners: {
				['@pageshow.window'](event) {
                    if (event.persisted) {
                        this.open = false
                    };
				}
		  	}
    	}))
	})
</script>

I would probably change the if statement within @pageshow.window to:

if (event.persisted && this.open) {
    this.toggle();
};

All possible future accessibility handling (such as aria-expanded on menuExample) will probably also happen in toggle(). Meaning that calling toggle() directly prevents the need for double work.

I disagree, the state is handled by open value.

The action to close the menu is the correct way, while it should not be possible, the toggle can open the menu, which could cause unwanted side effects.

This give you an example the aria roles can be set using just the open state.

<div x-data="menuExample" x-bind="eventListeners">
    <button
       @click="toggle"
       :aria-expanded="open"
    >Expand</button>
 
    <div x-show="open">
		Menu Content...
    </div>
</div>