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.