Dropdown

<!-- 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 group"
        data-aether-trigger="ui-control"
        data-aether-target="example-dropdown-1">
        Open
        <svg class="size-4 text-tertiary group-hover:text-primary transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
        </svg>
    </button>

    <!-- Dropdown Menu -->
    <div id="example-dropdown-1" class="hidden absolute left-0 mt-2 w-48 bg-secondary border border-primary rounded-xl shadow-xl z-50 overflow-hidden origin-top-right transition-all"
        data-aether-click-outside
        data-aether-active-class="block"
        data-aether-inactive-class="hidden">
        <div class="py-1">
            <a href="#" class="block px-4 py-2.5 text-sm text-secondary hover:text-primary hover:bg-primary/30 transition-colors">Aether Link</a>
            <a href="#" class="block px-4 py-2.5 text-sm text-secondary hover:text-primary hover:bg-primary/30 transition-colors">Aether Link</a>
            <a href="#" class="block px-4 py-2.5 text-sm text-secondary hover:text-primary hover:bg-primary/30 transition-colors">Aether Link</a>
        </div>
    </div>
</div>

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

    <!-- Main 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 group"
        data-aether-trigger="ui-control"
        data-aether-target="menu-l1">
        Open
        <svg class="size-4 opacity-70" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
        </svg>
    </button>

    <!-- Level 1 Menu -->
    <div id="menu-l1" class="hidden absolute left-0 mt-2 w-56 bg-secondary border border-primary rounded-xl shadow-2xl z-40 py-2 flex flex-col gap-1"
        data-aether-click-outside
        data-aether-active-class="flex"
        data-aether-inactive-class="hidden">

        <a href="#" class="w-full px-4 py-2.5 text-sm text-secondary hover:text-primary hover:bg-primary/30 transition-colors rounded-lg flex items-center justify-between">Aether Link</a>

        <!-- Nested Wrapper (L2) -->
        <div class="relative">
            <button class="w-full px-4 py-2.5 text-sm text-secondary hover:text-primary hover:bg-primary/30 transition-colors rounded-lg flex items-center justify-between group"
                data-aether-trigger="ui-control"
                data-aether-target="menu-l2">
                <span>Aether Dropdown</span>
                <svg class="size-3.5 text-tertiary group-hover:text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
            </button>

            <!-- Level 2 Menu -->
            <div id="menu-l2" class="hidden absolute left-full top-0 ml-2 w-52 bg-secondary border border-primary rounded-xl shadow-2xl z-50 py-2 flex flex-col gap-1"
                data-aether-click-outside
                data-aether-active-class="flex"
                data-aether-inactive-class="hidden">

                <a href="#" class="w-full px-4 py-2.5 text-sm text-secondary hover:text-primary hover:bg-primary/30 transition-colors rounded-lg flex items-center justify-between">Aether Link</a>

                <!-- Nested Wrapper (L3) -->
                <div class="relative">
                    <button class="w-full px-4 py-2.5 text-sm text-secondary hover:text-primary hover:bg-primary/30 transition-colors rounded-lg flex items-center justify-between group"
                        data-aether-trigger="ui-control"
                        data-aether-target="menu-l3">
                        <span>Aether Dropdown</span>
                        <svg class="size-3.5 text-tertiary group-hover:text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </button>

                    <!-- Level 3 Menu -->
                    <div id="menu-l3" class="hidden absolute left-full top-0 ml-2 w-48 bg-secondary border border-primary rounded-xl shadow-2xl z-[60] py-2 flex flex-col gap-1"
                        data-aether-click-outside
                        data-aether-active-class="flex"
                        data-aether-inactive-class="hidden">
                        <a href="#" class="w-full px-4 py-2.5 text-sm text-secondary hover:text-primary hover:bg-primary/30 transition-colors rounded-lg flex items-center justify-between">Aether Link</a>
                        <a href="#" class="w-full px-4 py-2.5 text-sm text-secondary hover:text-primary hover:bg-primary/30 transition-colors rounded-lg flex items-center justify-between">Aether Link</a>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>