data-aether-sync-url

This attribute synchronizes the UI state with the browser's address bar. When a user opens a Modal, the #id is automatically added to the end of the URL.

01 Usage

This is a "Boolean Attribute." It is typically added to Triggers. Interactions within the group where it is added will begin updating the URL hash.

index.html

<!-- Trigger -->
<button
    class="px-4 py-2 cursor-pointer bg-primary border border-primary rounded-lg text-primary hover:text-primary-interactive hover:border-primary-interactive transition-colors flex items-center gap-2"
    data-aether-trigger="ui-control"
    data-aether-target="demo-modal"
    data-aether-sync-url>
    Open
</button>

<!-- Wrapper -->
<div
    id="demo-modal"
    class="hidden fixed inset-0 z-50 flex items-center justify-center p-4"
    data-aether-scroll-lock
    data-aether-focus-trap>

    <!-- Backdrop -->
    <div class="absolute inset-0 bg-primary/80 backdrop-blur-sm"
        data-aether-trigger="ui-control"
        data-aether-target="demo-modal"
        data-aether-action="close"></div>

    <!-- Content -->
    <div class="relative bg-secondary border border-primary w-full max-w-md p-6 rounded-2xl shadow-2xl scale-100 transition-all">
        <h3 class="text-xl font-bold text-primary mb-2">Hello World</h3>
        <p class="text-secondary mb-6">This modal updates the URL hash automatically.</p>

        <button
            class="px-4 py-2 w-full cursor-pointer text-secondary hover:text-primary bg-tertiary hover:bg-tertiary-interactive rounded-lg transition-colors"
            data-aether-trigger="ui-control"
            data-aether-target="demo-modal"
            data-aether-action="close">
            Close
        </button>
    </div>

</div>

02 Events and Behavior

This feature doesn't just change the URL; it also updates the page when the URL changes.

Event	Result
Moment of Click	User clicks the "Profile" button -> Address bar updates to #profile.
Sharing / Refresh	If the user refreshes the page or sends the link to a friend, AetherUI reads the #id value from the URL and automatically opens that Modal.

03 Why Should I Use It?

Shareability

It allows your users to send a link that directly opens a specific Modal.