data-aether-click-outside

This attribute detects when a user clicks outside of the focused element and automatically closes it. It is an essential UX standard for Dropdown menus and Modals in modern web interfaces.

01 Usage

This is a "Boolean Attribute." Simply adding it to the target element is sufficient.

index.html

<!-- Wrapper -->
<div class="relative">

    <!-- 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-dropdown">
        Open
    </button>

    <!-- Dropdown Menu -->
    <div
        id="demo-dropdown"
        class="hidden absolute left-0 mt-2 w-48 bg-primary border border-primary rounded-lg shadow-lg py-1 z-10"
        data-aether-click-outside>
        <a href="#" class="block px-4 py-2 text-sm text-secondary hover:bg-secondary hover:text-primary transition-colors">Profile</a>
        <a href="#" class="block px-4 py-2 text-sm text-secondary hover:bg-secondary hover:text-primary transition-colors">Settings</a>
    </div>

</div>

02 Smart Stack Management

Nested Elements

AetherUI tracks open windows using a "Stack" logic.

For example; if a Dropdown is opened from within an active Modal, clicking on the screen (empty space) will cause the system to close the topmost Dropdown first. The Modal remains open. On the second click, the Modal will close.