How to Create Tabs with URL Navigation with Alpine JS
Creating tabs with URL navigation doesn't require much extra work from creating standard tabs, all you need is a way for Alpine JS to read the hash in the URL and set the active tab value.
Here's what the example is using:
x-init="activeTab = window.location.hash?.replace('#', '') || 'details'"
Which is using the optional chaining method on
.replace() for the hash, this is the equivalent of writing:
window.location.hash ? window.location.hash.replace('#', '') : 'details'
Both approaches work, the first one is a little neater.
As the preview is in an
<iframe> you won't see the URL changing. However, if you to the component code for the preview you will see it working.