Dropdown components

Toggle contextual overlays for displaying lists of links and more with the ZedAdmin dropdown component.

Basic example
To trigger dropdowns inside ZedAdmin, we leverage the power of AlpineJS. so make sure you always use Alpine snippet codes inside your tags. 
 <div x-data="{open: false}" class="dropdown-container">
    <button @click="open = !open" class="btn btn-sm btn-primary" type="button">Dropdown button <ion-icon name="chevron-down-outline"></ion-icon> </button>
    <!-- Dropdown menu -->
    <div x-show="open" @click.outside="open = false" class="dropdown">
        <ul class="dropdown-menu">
            <li>
                <a href="#" class="dropdown-item">Dashboard</a>
            </li>
            <li>
                <a href="#" class="dropdown-item">Settings</a>
            </li>
            <li>
                <a href="#" class="dropdown-item">Earnings</a>
            </li>
            <li>
                <a href="#" class="dropdown-item">Sign out</a>
            </li>
        </ul>
    </div>
</div>
Dropdown divider
Simply by just using border-{direction} you can divide your dropdown items from each other!
in the example bellow, we've used border-t and border-gray-200 
 <div x-data="{open: false}" class="dropdown-container">
    <button @click="open = !open" class="btn btn-primary" type="button">Dropdown button <ion-icon name="chevron-down-outline"></ion-icon> </button>
    <!-- Dropdown menu -->
    <div x-show="open" @click.outside="open = false" class="dropdown">
        <ul class="dropdown-menu">
            <li>
                <a href="javascript:void(0)" class="dropdown-item">Dashboard</a>
            </li>
            <li>
                <a href="javascript:void(0)" class="dropdown-item">Settings</a>
            </li>
            <li>
                <a href="javascript:void(0)" class="dropdown-item">Earnings</a>
            </li>
            <li class="border-t border-gray-200">
                <a href="javascript:void(0)" class="dropdown-item">Sign out</a>
            </li>
        </ul>
    </div>
</div>
Split button
The easiest way to create split button for opening the dropdown, is using our .btn-group from the button component.
Notice: in the example bellow, we've added left-14 the the ul.dropdown in order to show dropdown area in the best place. 
 <div x-data="{open: false}" class="dropdown-container">
    <div class="btn-group">
        <button type="button" class="btn btn-sm btn-secondary">Example button</button>
        <button @click="open = !open" type="button" class="btn btn-sm btn-secondary"> <ion-icon name="chevron-down-outline"></ion-icon> </button>
    </div>

    <!-- Dropdown menu -->
    <div x-show="open" @click.outside="open = false" class="dropdown left-14">
        <ul class="dropdown-menu">
            <li>
                <a href="javascript:void(0)" class="dropdown-item">Dashboard</a>
            </li>
            <li>
                <a href="javascript:void(0)" class="dropdown-item">Settings</a>
            </li>
            <li>
                <a href="javascript:void(0)" class="dropdown-item">Earnings</a>
            </li>
            <li class="border-t border-gray-200">
                <a href="javascript:void(0)" class="dropdown-item">Sign out</a>
            </li>
        </ul>
    </div>
</div>