Ynex - Laravel Tailwind CSS Admin & Dashboard Template

Dropdowns

 <div class="ti-btn-list flex align-center flex-wrap">
<div class="hs-dropdown ti-dropdown">
    <button class="ti-btn btn-wave ti-btn-primary-full ti-dropdown-toggle !py-2"
        type="button" id="dropdownMenuButton1"
        aria-expanded="false">
        Dropdown button<i
            class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
    </button>
    <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
        aria-labelledby="dropdownMenuButton1">
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                action</a></li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
                here</a></li>
    </ul>
</div>
<div class="hs-dropdown ti-dropdown">
    <a class="ti-btn btn-wave ti-btn-secondary-full ti-dropdown-toggle !py-2"
        href="javascript:void(0);" role="button" id="dropdownMenuLink"
        aria-expanded="false">
        Dropdown link<i
            class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
    </a>
    <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
        aria-labelledby="dropdownMenuLink">
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                action</a></li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
                here</a></li>
    </ul>
</div>
</div>

Single Botton Dropdowns

<div class="ti-btn-list">
    <div class="ti-btn-group">
        <div class="hs-dropdown ti-dropdown">
            <button class="ti-btn btn-wave ti-btn-primary-full ti-dropdown-toggle" type="button"
                id="dropdownMenuButton1"
                aria-expanded="false">
                Action<i
                    class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
            </button>
            <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                aria-labelledby="dropdownMenuButton1">
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
                </li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                        action</a></li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                        else here</a></li>
            </ul>
        </div>
    </div>
    <div class="ti-btn-group">
        <div class="hs-dropdown ti-dropdown">
            <button class="ti-btn btn-wave ti-btn-secondary-full ti-dropdown-toggle"
                type="button" id="dropdownMenuButton1"
                aria-expanded="false">
                Action<i
                    class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
            </button>
            <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                aria-labelledby="dropdownMenuButton1">
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
                </li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                        action</a></li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                        else here</a></li>
            </ul>
        </div>
    </div>
    <div class="ti-btn-group">
        <div class="hs-dropdown ti-dropdown">
            <button class="ti-btn btn-wave ti-btn-success-full ti-dropdown-toggle" type="button"
                id="dropdownMenuButton1"
                aria-expanded="false">
                Action<i
                    class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
            </button>
            <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                aria-labelledby="dropdownMenuButton1">
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
                </li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                        action</a></li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                        else here</a></li>
            </ul>
        </div>
    </div>
    <div class="ti-btn-group">
        <div class="hs-dropdown ti-dropdown">
            <button class="ti-btn btn-wave ti-btn-info-full ti-dropdown-toggle" type="button"
                id="dropdownMenuButton1"
                aria-expanded="false">
                Action<i
                    class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
            </button>
            <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                aria-labelledby="dropdownMenuButton1">
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
                </li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                        action</a></li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                        else here</a></li>
            </ul>
        </div>
    </div>
    <div class="ti-btn-group">
        <div class="hs-dropdown ti-dropdown">
            <button class="ti-btn btn-wave ti-btn-warning-full ti-dropdown-toggle" type="button"
                id="dropdownMenuButton1"
                aria-expanded="false">
                Action<i
                    class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
            </button>
            <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                aria-labelledby="dropdownMenuButton1">
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
                </li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                        action</a></li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                        else here</a></li>
            </ul>
        </div>
    </div>
    <div class="ti-btn-group">
        <div class="hs-dropdown ti-dropdown">
            <button class="ti-btn btn-wave ti-btn-danger-full ti-dropdown-toggle" type="button"
                id="dropdownMenuButton1"
                aria-expanded="false">
                Action<i
                    class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
            </button>
            <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                aria-labelledby="dropdownMenuButton1">
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
                </li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                        action</a></li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                        else here</a></li>
            </ul>
        </div>
    </div>
</div>

Rounded dropdown buttons

<div class="ti-btn-list">
    <div class="ti-btn-group">
        <div class="hs-dropdown ti-dropdown">
            <button class="ti-btn btn-wave ti-btn-primary-full ti-dropdown-toggle !rounded-full"
                type="button" id="dropdownMenuButton1"
                aria-expanded="false">
                Action<i
                    class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
            </button>
            <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                aria-labelledby="dropdownMenuButton1">
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
                </li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                        action</a></li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                        else here</a></li>
            </ul>
        </div>
    </div>
    <div class="ti-btn-group">
        <div class="hs-dropdown ti-dropdown">
            <button
                class="ti-btn btn-wave ti-btn-secondary-full ti-dropdown-toggle !rounded-full"
                type="button" id="dropdownMenuButton1"
                aria-expanded="false">
                Action<i
                    class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
            </button>
            <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                aria-labelledby="dropdownMenuButton1">
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
                </li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                        action</a></li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                        else here</a></li>
            </ul>
        </div>
    </div>
    <div class="ti-btn-group">
        <div class="hs-dropdown ti-dropdown">
            <button class="ti-btn btn-wave ti-btn-success-full ti-dropdown-toggle !rounded-full"
                type="button" id="dropdownMenuButton1"
                aria-expanded="false">
                Action<i
                    class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
            </button>
            <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                aria-labelledby="dropdownMenuButton1">
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
                </li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                        action</a></li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                        else here</a></li>
            </ul>
        </div>
    </div>
    <div class="ti-btn-group">
        <div class="hs-dropdown ti-dropdown">
            <button class="ti-btn btn-wave ti-btn-info-full ti-dropdown-toggle !rounded-full"
                type="button" id="dropdownMenuButton1"
                aria-expanded="false">
                Action<i
                    class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
            </button>
            <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                aria-labelledby="dropdownMenuButton1">
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
                </li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                        action</a></li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                        else here</a></li>
            </ul>
        </div>
    </div>
    <div class="ti-btn-group">
        <div class="hs-dropdown ti-dropdown">
            <button class="ti-btn btn-wave ti-btn-warning-full ti-dropdown-toggle !rounded-full"
                type="button" id="dropdownMenuButton1"
                aria-expanded="false">
                Action<i
                    class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
            </button>
            <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                aria-labelledby="dropdownMenuButton1">
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
                </li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                        action</a></li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                        else here</a></li>
            </ul>
        </div>
    </div>
    <div class="ti-btn-group">
        <div class="hs-dropdown ti-dropdown">
            <button class="ti-btn btn-wave ti-btn-danger-full ti-dropdown-toggle !rounded-full"
                type="button" id="dropdownMenuButton1"
                aria-expanded="false">
                Action<i
                    class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
            </button>
            <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                aria-labelledby="dropdownMenuButton1">
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
                </li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                        action</a></li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                        else here</a></li>
            </ul>
        </div>
    </div>
</div>

Outline Botton Dropdowns

<div class="ti-btn-list">
<div class="ti-btn-group">
    <div class="hs-dropdown ti-dropdown">
        <button class="ti-btn btn-wave ti-btn-outline-primary ti-dropdown-toggle"
            type="button" id="dropdownMenuButton1"
            aria-expanded="false">
            Action<i class="ri-arrow-down-s-line align-middle inline-block"></i>
        </button>
        <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
            aria-labelledby="dropdownMenuButton1">
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
            </li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                    action</a></li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                    else here</a></li>
        </ul>
    </div>
</div>
<div class="ti-btn-group">
    <div class="hs-dropdown ti-dropdown">
        <button class="ti-btn btn-wave ti-btn-outline-secondary ti-dropdown-toggle"
            type="button" id="dropdownMenuButton1"
            aria-expanded="false">
            Action<i class="ri-arrow-down-s-line align-middle inline-block"></i>
        </button>
        <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
            aria-labelledby="dropdownMenuButton1">
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
            </li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                    action</a></li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                    else here</a></li>
        </ul>
    </div>
</div>
<div class="ti-btn-group">
    <div class="hs-dropdown ti-dropdown">
        <button class="ti-btn btn-wave ti-btn-outline-success ti-dropdown-toggle"
            type="button" id="dropdownMenuButton1"
            aria-expanded="false">
            Action<i class="ri-arrow-down-s-line align-middle inline-block"></i>
        </button>
        <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
            aria-labelledby="dropdownMenuButton1">
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
            </li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                    action</a></li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                    else here</a></li>
        </ul>
    </div>
</div>
<div class="ti-btn-group">
    <div class="hs-dropdown ti-dropdown">
        <button class="ti-btn btn-wave ti-btn-outline-info ti-dropdown-toggle" type="button"
            id="dropdownMenuButton1"
            aria-expanded="false">
            Action<i class="ri-arrow-down-s-line align-middle inline-block"></i>
        </button>
        <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
            aria-labelledby="dropdownMenuButton1">
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
            </li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                    action</a></li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                    else here</a></li>
        </ul>
    </div>
</div>
<div class="ti-btn-group">
    <div class="hs-dropdown ti-dropdown">
        <button class="ti-btn btn-wave ti-btn-outline-warning ti-dropdown-toggle"
            type="button" id="dropdownMenuButton1"
            aria-expanded="false">
            Action<i class="ri-arrow-down-s-line align-middle inline-block"></i>
        </button>
        <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
            aria-labelledby="dropdownMenuButton1">
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
            </li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                    action</a></li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                    else here</a></li>
        </ul>
    </div>
</div>
<div class="ti-btn-group">
    <div class="hs-dropdown ti-dropdown">
        <button class="ti-btn btn-wave ti-btn-outline-danger ti-dropdown-toggle"
            type="button" id="dropdownMenuButton1"
            aria-expanded="false">
            Action<i class="ri-arrow-down-s-line align-middle inline-block"></i>
        </button>
        <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
            aria-labelledby="dropdownMenuButton1">
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
            </li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                    action</a></li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                    else here</a></li>
        </ul>
    </div>
</div>
</div>

Outline Botton Dropdowns

<div class="ti-btn-list">
    <div class="ti-btn-group">
        <div class="hs-dropdown ti-dropdown">
            <button
                class="ti-btn btn-wave ti-btn-outline-primary ti-dropdown-toggle !rounded-full"
                type="button" id="dropdownMenuButton1"
                aria-expanded="false">
                Action<i class="ri-arrow-down-s-line align-middle inline-block"></i>
            </button>
            <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                aria-labelledby="dropdownMenuButton1">
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
                </li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                        action</a></li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                        else here</a></li>
            </ul>
        </div>
    </div>
    <div class="ti-btn-group">
        <div class="hs-dropdown ti-dropdown">
            <button
                class="ti-btn btn-wave ti-btn-outline-secondary ti-dropdown-toggle !rounded-full"
                type="button" id="dropdownMenuButton1"
                aria-expanded="false">
                Action<i class="ri-arrow-down-s-line align-middle inline-block"></i>
            </button>
            <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                aria-labelledby="dropdownMenuButton1">
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
                </li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                        action</a></li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                        else here</a></li>
            </ul>
        </div>
    </div>
    <div class="ti-btn-group">
        <div class="hs-dropdown ti-dropdown">
            <button
                class="ti-btn btn-wave ti-btn-outline-success ti-dropdown-toggle !rounded-full"
                type="button" id="dropdownMenuButton1"
                aria-expanded="false">
                Action<i class="ri-arrow-down-s-line align-middle inline-block"></i>
            </button>
            <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                aria-labelledby="dropdownMenuButton1">
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
                </li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                        action</a></li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                        else here</a></li>
            </ul>
        </div>
    </div>
    <div class="ti-btn-group">
        <div class="hs-dropdown ti-dropdown">
            <button class="ti-btn btn-wave ti-btn-outline-info ti-dropdown-toggle !rounded-full"
                type="button" id="dropdownMenuButton1"
                aria-expanded="false">
                Action<i class="ri-arrow-down-s-line align-middle inline-block"></i>
            </button>
            <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                aria-labelledby="dropdownMenuButton1">
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
                </li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                        action</a></li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                        else here</a></li>
            </ul>
        </div>
    </div>
    <div class="ti-btn-group">
        <div class="hs-dropdown ti-dropdown">
            <button
                class="ti-btn btn-wave ti-btn-outline-warning ti-dropdown-toggle !rounded-full"
                type="button" id="dropdownMenuButton1"
                aria-expanded="false">
                Action<i class="ri-arrow-down-s-line align-middle inline-block"></i>
            </button>
            <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                aria-labelledby="dropdownMenuButton1">
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
                </li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                        action</a></li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                        else here</a></li>
            </ul>
        </div>
    </div>
    <div class="ti-btn-group">
        <div class="hs-dropdown ti-dropdown">
            <button
                class="ti-btn btn-wave ti-btn-outline-danger ti-dropdown-toggle !rounded-full"
                type="button" id="dropdownMenuButton1"
                aria-expanded="false">
                Action<i class="ri-arrow-down-s-line align-middle inline-block"></i>
            </button>
            <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                aria-labelledby="dropdownMenuButton1">
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
                </li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                        action</a></li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                        else here</a></li>
            </ul>
        </div>
    </div>
</div>

Split Buttons

 <div class="ti-btn-list">
    <div class="ti-btn-group !m-0">
        <div class="hs-dropdown ti-dropdown">
            <button
                class="ti-btn btn-wave  ti-btn-primary-full !me-0 !rounded-e-none ti-dropdown-toggle"
                type="button" id="dropdownMenuButton1"
                aria-expanded="false">
                Action
            </button>
            <button
                class="ti-btn btn-wave  ti-btn-primary-full opacity-[0.85] !rounded-s-none"><i
                    class="ri-arrow-down-s-line align-middle inline-block"></i></button>

            <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                aria-labelledby="dropdownMenuButton1">
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
                </li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                        action</a></li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                        else here</a></li>
            </ul>
        </div>
    </div>
    <div class="ti-btn-group !m-0">
        <div class="hs-dropdown ti-dropdown">
            <button
                class="ti-btn btn-wave  ti-btn-secondary-full !me-0 !rounded-e-none ti-dropdown-toggle"
                type="button" id="dropdownMenuButton1"
                aria-expanded="false">
                Action
            </button>
            <button
                class="ti-btn btn-wave  ti-btn-secondary-full opacity-[0.85] !rounded-s-none"><i
                    class="ri-arrow-down-s-line align-middle inline-block"></i></button>

            <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                aria-labelledby="dropdownMenuButton1">
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
                </li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                        action</a></li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                        else here</a></li>
            </ul>
        </div>
    </div>
    <div class="ti-btn-group !m-0">
        <div class="hs-dropdown ti-dropdown">
            <button
                class="ti-btn btn-wave  ti-btn-success-full !me-0 !rounded-e-none ti-dropdown-toggle"
                type="button" id="dropdownMenuButton1"
                aria-expanded="false">
                Action
            </button>
            <button
                class="ti-btn btn-wave  ti-btn-success-full opacity-[0.85] !rounded-s-none"><i
                    class="ri-arrow-down-s-line align-middle inline-block"></i></button>

            <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                aria-labelledby="dropdownMenuButton1">
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
                </li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                        action</a></li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                        else here</a></li>
            </ul>
        </div>
    </div>
    <div class="ti-btn-group !m-0">
        <div class="hs-dropdown ti-dropdown">
            <button
                class="ti-btn btn-wave  ti-btn-info-full !me-0 !rounded-e-none ti-dropdown-toggle"
                type="button" id="dropdownMenuButton1"
                aria-expanded="false">
                Action
            </button>
            <button
                class="ti-btn btn-wave  ti-btn-info-full opacity-[0.85] !rounded-s-none"><i
                    class="ri-arrow-down-s-line align-middle inline-block"></i></button>

            <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                aria-labelledby="dropdownMenuButton1">
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
                </li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                        action</a></li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                        else here</a></li>
            </ul>
        </div>
    </div>
    <div class="ti-btn-group !m-0">
        <div class="hs-dropdown ti-dropdown">
            <button
                class="ti-btn btn-wave  ti-btn-warning-full !me-0 !rounded-e-none ti-dropdown-toggle"
                type="button" id="dropdownMenuButton1"
                aria-expanded="false">
                Action
            </button>
            <button
                class="ti-btn btn-wave  ti-btn-warning-full opacity-[0.85] !rounded-s-none "><i
                    class="ri-arrow-down-s-line align-middle inline-block"></i></button>

            <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                aria-labelledby="dropdownMenuButton1">
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
                </li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                        action</a></li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                        else here</a></li>
            </ul>
        </div>
    </div>
    <div class="ti-btn-group !m-0">
        <div class="hs-dropdown ti-dropdown">
            <button
                class="ti-btn btn-wave  ti-btn-danger-full !me-0 !rounded-e-none ti-dropdown-toggle"
                type="button" id="dropdownMenuButton1"
                aria-expanded="false">
                Action
            </button>
            <button
                class="ti-btn btn-wave  ti-btn-danger-full opacity-[0.85] !rounded-s-none"><i
                    class="ri-arrow-down-s-line align-middle inline-block"></i></button>

            <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                aria-labelledby="dropdownMenuButton1">
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
                </li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                        action</a></li>
                <li><a class="ti-dropdown-item" href="javascript:void(0);">Something
                        else here</a></li>
            </ul>
        </div>
    </div>
</div>

Dropdown Sizing

 <div class="ti-btn-group my-1 me-2 ti-dropdown hs-dropdown">
<button class="ti-btn-primary-full ti-btn-lg ti-dropdown-toggle" type="button"
    aria-expanded="false">
    Large button<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden">
    <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
    <li><a class="ti-dropdown-item" href="javascript:void(0);">Another action</a>
    </li>
    <li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
            here</a></li>
    <li>
        <hr class="dropdown-divider">
    </li>
    <li><a class="ti-dropdown-item" href="javascript:void(0);">Separated link</a>
    </li>
</ul>
</div>
<div class="ti-btn-group my-1 me-2">
<div class="hs-dropdown ti-dropdown">
    <button
        class="ti-btn-lg ti-btn-light !me-0 !rounded-e-none !border-0 ti-dropdown-toggle"
        type="button" id="dropdownMenuButton32"
        aria-expanded="false">
        Large split button
    </button>
    <div class="hs-dropdown ti-dropdown [--placement:bottom-left]">
        <button button id="hs-split-dropdown" type="button" aria-label="button"
            class="ti-btn btn-wave ti-btn-light opacity-[0.85] !rounded-s-none"><i
                class="ri-arrow-down-s-line align-middle inline-block"></i></button>

        <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
            aria-labelledby="dropdownMenuButton32">
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                    action</a></li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
                    here</a></li>
        </ul>
    </div>
</div>
</div>
<div class="ti-btn-group my-1 me-2">
<div class="ti-btn-group my-1 me-2 ti-dropdown hs-dropdown">
    <button
        class="ti-btn btn-wave ti-btn-primary-full !py-1 !px-4 !text-[0.75rem] ti-dropdown-toggle"
        type="button" aria-expanded="false">
        Small button<i class="ri-arrow-down-s-line align-middle inline-block"></i>
    </button>
    <ul class="hs-dropdown-menu ti-dropdown-menu hidden">
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                action</a></li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
                here</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Separated
                link</a></li>
    </ul>
</div>
</div>
<div class="ti-btn-group my-1 me-2">
<div class="hs-dropdown ti-dropdown">
    <button
        class="ti-btn btn-wave !py-1 !px-4 !text-[0.75rem]  ti-btn-light !me-0 !rounded-e-none ti-dropdown-toggle"
        type="button" id="dropdownMenuButton1"
        aria-expanded="false">
        Small split button
    </button>
    <div class="hs-dropdown ti-dropdown [--placement:bottom-left]">
        <button id="hs-split-dropdown" type="button" aria-label="button"
            class="ti-btn btn-wave !py-1 !px-4 !text-[0.75rem]  ti-btn-light opacity-[0.85] !rounded-s-none"><i
                class="ri-arrow-down-s-line align-middle inline-block"></i></button>

        <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
            aria-labelledby="dropdownMenuButton1">
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                    action</a></li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
                    here</a></li>
        </ul>
    </div>
</div>
</div>

Dropup

 <div class="hs-dropdown ti-dropdown [--placement:top-left] m-1">
<button id="hs-dropup" type="button"
class="hs-dropdown-toggle ti-dropdown-toggle ti-btn btn-wave ti-btn-primary-full !py-2">
Dropup
<svg class="hs-dropdown-open:rotate-180 ti-dropdown-caret !text-white"
    width="16" height="16" viewBox="0 0 16 16" fill="none"
    xmlns="http://www.w3.org/2000/svg">
    <path
        d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>

<div class="hs-dropdown-menu  mt-0 transition-none ti-dropdown-menu hidden"
aria-labelledby="hs-dropup">
<a class="ti-dropdown-item" href="javascript:void(0);">
    Action
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
    Another action
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
    Something else here
</a>
</div>
</div>
<div class="ti-dropdown m-1">
<button type="button"
class="relative ti-dropdown-toggle  ti-btn btn-wave ti-btn-secondary-full !py-1 !rounded-e-none !me-0">
Split dropup
</button>
<div class="hs-dropdown ti-dropdown [--placement:top-left]">
<button id="hs-split-dropup" type="button"
    class="hs-dropdown-toggle relative ti-btn btn-wave ti-btn-secondary-full !opacity-[0.85]  !rounded-s-none ti-dropdown-toggle">
    <span class="sr-only">Toggle Dropdown</span>
    <svg class="hs-dropdown-open:rotate-180 ti-dropdown-caret !text-white"
        width="16" height="16" viewBox="0 0 16 16" fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <path
            d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" />
    </svg>
</button>

<div class="hs-dropdown-menu  transition-none mt-0 ti-dropdown-menu hidden"
    aria-labelledby="hs-split-dropup">
    <a class="ti-dropdown-item" href="javascript:void(0);">
        Action
    </a>
    <a class="ti-dropdown-item" href="javascript:void(0);">
        Another action
    </a>
    <a class="ti-dropdown-item" href="javascript:void(0);">
        Something else here
    </a>
</div>
</div>
</div>

Drop right

<div class="hs-dropdown ti-dropdown [--placement:right-top] m-1">
<button id="hs-dropright" type="button"
class="hs-dropdown-toggle ti-dropdown-toggle ti-btn btn-wave ti-btn-primary-full !py-2">
Dropright
<svg class="w-auto h-2.5 ti-dropdown-caret !text-white" width="16" height="16"
    viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
        d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>

<div class="hs-dropdown-menu  ti-dropdown-menu transition-none hidden"
aria-labelledby="hs-dropright">
<a class="ti-dropdown-item" href="javascript:void(0);">
    Action
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
    Another action
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
    Something else here
</a>
<a>
    <hr class="dropdown-divider">
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
    Separated link
</a>
</div>
</div>
<div class="hs-dropdown ti-dropdown [--placement:right-top] m-1">
<button type="button"
class="hs-dropdown-toggle relative ti-btn btn-wave ti-btn-secondary-full  !py-2 !rounded-e-none ti-dropdown-toggle !me-0">
Split dropright
</button>
<div class="hs-dropdown ti-dropdown [--placement:right-top]">
<button id="hs-split-dropright" type="button"
    class="hs-dropdown-toggle relative  ti-dropdown-toggle !opacity-[0.85] rounded-none  ti-btn btn-wave ti-btn-secondary-full !rounded-s-none">
    <span class="sr-only">Toggle Dropdown</span>
    <svg class="w-auto h-2.5 ti-dropdown-caret !text-white" width="16"
        height="16" viewBox="0 0 16 16" fill="none"
        xmlns="http://www.w3.org/2000/svg">
        <path
            d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" />
    </svg>
</button>

<div class="hs-dropdown-menu ti-dropdown-menu transition-none hidden"
    aria-labelledby="hs-split-dropright">
    <a class="ti-dropdown-item" href="javascript:void(0);">
        Action
    </a>
    <a class="ti-dropdown-item" href="javascript:void(0);">
        Another action
    </a>
    <a class="ti-dropdown-item" href="javascript:void(0);">
        Something else here
    </a>
    <a>
        <hr class="dropdown-divider">
    </a>
    <a class="ti-dropdown-item" href="javascript:void(0);">
        Separated link
    </a>
</div>
</div>
</div>

Drop left

<div class="hs-dropdown ti-dropdown [--placement:left-top] m-1">
<button id="hs-dropright" type="button"
class="hs-dropdown-toggle ti-dropdown-toggle ti-btn btn-wave ti-btn-primary-full !py-2">
<svg class="w-auto h-2.5 text-white" width="16" height="16" viewBox="0 0 16 16"
    fill="none" xmlns="http://www.w3.org/2000/svg">
    <path
        d="M11 1L5.31305 7.16086C5.13625 7.35239 5.13625 7.64761 5.31305 7.83914L11 14"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
Dropleft
</button>

<div class="hs-dropdown-menu  ti-dropdown-menu transition-none hidden"
aria-labelledby="hs-dropright">
<a class="ti-dropdown-item" href="javascript:void(0);">
    Action
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
    Another action
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
    Something else here
</a>
<a>
    <hr class="dropdown-divider">
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
    Separated link
</a>
</div>
</div>
<div class="hs-dropdown ti-dropdown [--placement:left-top] m-1">
<div class="hs-dropdown ti-dropdown [--placement:left-top]">
<button id="hs-split-dropright" type="button"
    class="hs-dropdown-toggle relative  ti-dropdown-toggle !opacity-[0.85] rounded-none  ti-btn btn-wave ti-btn-secondary-full   !rounded-s-none">
    <span class="sr-only">Toggle Dropdown</span>
    <svg class="w-auto h-2.5 text-white" width="16" height="16"
        viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
            d="M11 1L5.31305 7.16086C5.13625 7.35239 5.13625 7.64761 5.31305 7.83914L11 14"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" />
    </svg>
</button>

<div class="hs-dropdown-menu ti-dropdown-menu transition-none hidden"
    aria-labelledby="hs-split-dropright">
    <a class="ti-dropdown-item" href="javascript:void(0);">
        Action
    </a>
    <a class="ti-dropdown-item" href="javascript:void(0);">
        Another action
    </a>
    <a class="ti-dropdown-item" href="javascript:void(0);">
        Something else here
    </a>
    <a>
        <hr class="dropdown-divider">
    </a>
    <a class="ti-dropdown-item" href="javascript:void(0);">
        Separated link
    </a>
</div>
</div>
<button type="button"
class="hs-dropdown-toggle relative ti-btn btn-wave ti-btn-secondary-full  !py-2   !rounded-e-none ti-dropdown-toggle !me-0">
Split dropleft
</button>
</div>

Active

<div class="hs-dropdown ti-dropdown">
<button type="button" class="ti-btn btn-wave ti-btn-primary-full ti-dropdown-toggle !py-2"
    aria-expanded="false">
    Dropstart<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden">
    <li><a class="ti-dropdown-item" href="javascript:void(0);">Regular link</a></li>
    <li><a class="ti-dropdown-item active" href="javascript:void(0);"
            aria-current="true">Active
            link</a>
    </li>
    <li><a class="ti-dropdown-item" href="javascript:void(0);">Another link</a></li>
</ul>
</div>

Disabled

<div class="hs-dropdown ti-dropdown">
<button type="button" class="ti-btn-primary-full ti-dropdown-toggle !py-2"
    aria-expanded="false">
    Dropstart<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden">
    <li><a class="ti-dropdown-item" href="javascript:void(0);">Regular link</a></li>
    <li><a class="ti-dropdown-item disabled" href="javascript:void(0);"
            aria-current="true">Active
            link</a></li>
    <li><a class="ti-dropdown-item" href="javascript:void(0);">Another link</a></li>
</ul>
</div>

Auto close behavior

<div class="ti-btn-list">
    <div class="ti-btn-group">
        <div class="hs-dropdown ti-dropdown rtl:[--placement:bottom-right]">
            <button class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary-full ti-dropdown-toggle"
                type="button" id="hs-dropdown-auto-close-inside"
                aria-expanded="false">
                Clickable inside<i
                    class="hs-dropdown-open:rotate-180 ri-arrow-down-s-line align-middle inline-block"></i>
            </button>
            <div class="relative flex items-start py-2 px-3 rounded-sm hover:bg-gray-100 dark:hover:bg-black/20">
                <div class="flex items-center h-5 mt-1">
                    <input id="hs-dropdown-item-checkbox-delete1"
                    name="hs-dropdown-item-checkbox-delete1" type="checkbox"
                    class="ti-form-checkbox" checked>
                </div>
                <label for="hs-dropdown-item-checkbox-delete1"
                    class="ms-3.5">
                    <span class="mt-1 block text-sm font-semibold text-gray-800 dark:text-white">Delete</span>
                </label>
            </div>
            <div class="relative flex items-start py-2 px-3 rounded-sm hover:bg-gray-100 dark:hover:bg-black/20">
                <div class="flex items-center h-5 mt-1">
                    <input id="hs-dropdown-item-checkbox-archive"
                    name="hs-dropdown-item-checkbox-archive" type="checkbox"
                    class="ti-form-checkbox">
                </div>
                <label for="hs-dropdown-item-checkbox-archive"
                    class="ms-3.5">
                    <span class="mt-1 block text-sm font-semibold text-gray-800 dark:text-white">Archive</span>
                </label>
            </div>
        </div>
    </div>

    <div class="ti-btn-group">
        <div class="hs-dropdown ti-dropdown" data-hs-dropdown-auto-close="outside">
            <button class="hs-dropdown-toggle ti-btn btn-wave ti-btn-info-full ti-dropdown-toggle" type="button"
                id="hs-dropdown-auto-close-outside"
                 aria-expanded="false">
                Clickable outside<i
                    class="hs-dropdown-open:rotate-180 ri-arrow-down-s-line align-middle inline-block"></i>
            </button>
            <div class="hs-dropdown-menu ti-dropdown-menu hidden"
                aria-labelledby="hs-dropdown-auto-close-outside">
                <a class="ti-dropdown-item" href="javascript:void(0);">Newsletter</a>
                <a class="ti-dropdown-item" href="javascript:void(0);">Purchases</a>
                <a class="ti-dropdown-item" href="javascript:void(0);">Downloads</a>
                <a class="ti-dropdown-item" href="javascript:void(0);">Team Account</a>
            </div>
        </div>
    </div>

    <div class="ti-btn-group">
        <div class="hs-dropdown ti-dropdown" data-hs-dropdown-auto-close="false">
            <button class="hs-dropdown-toggle ti-btn btn-wave ti-btn-warning-full ti-dropdown-toggle" type="button"
                id="hs-dropdown-auto-close-false"
                 aria-expanded="false">
                False<i
                    class="hs-dropdown-open:rotate-180 ri-arrow-down-s-line align-middle inline-block"></i>
            </button>
            <div class="hs-dropdown-menu ti-dropdown-menu hidden"
                aria-labelledby="hs-dropdown-auto-close-false">
                <a class="ti-dropdown-item" href="javascript:void(0);">Newsletter</a>
                <a class="ti-dropdown-item" href="javascript:void(0);">Purchases</a>
                <a class="ti-dropdown-item" href="javascript:void(0);">Downloads</a>
                <a class="ti-dropdown-item" href="javascript:void(0);">Team Account</a>
            </div>
        </div>
    </div>
</div>

dropdowns with Forms

<div class="hs-dropdown ti-dropdown">
    <button class="ti-btn btn-wave ti-btn-secondary-full ti-dropdown-toggle !py-2" type="button"
        id="dropdownMenu2" aria-expanded="false">
        Dropdown<i class="ri-arrow-down-s-line align-middle inline-block"></i>
    </button>
    <div class="hs-dropdown-menu ti-dropdown-menu hidden">
        <form class="!px-6 !py-4">
            <div class="mb-4">
                <label for="exampleDropdownFormEmail1" class="form-label">Email
                    address</label>
                <input type="email" class="form-control w-full !rounded-md"
                    id="exampleDropdownFormEmail1" placeholder="email@example.com">
            </div>
            <div class="mb-4">
                <label for="exampleDropdownFormPassword1"
                    class="form-label">Password</label>
                <input type="password" class="form-control w-full !rounded-md"
                    id="exampleDropdownFormPassword1" placeholder="Password">
            </div>
            <div class="mb-4">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="dropdownCheck">
                    <label class="form-check-label" for="dropdownCheck">
                        Remember me
                    </label>
                </div>
            </div>
            <button type="submit" class="ti-btn btn-wave ti-btn-primary-full">Sign in</button>
        </form>
        <div class="dropdown-divider"></div>
        <a class="ti-dropdown-item" href="javascript:void(0);">New around here? Sign
            up</a>
        <a class="ti-dropdown-item" href="javascript:void(0);">Forgot password?</a>
    </div>
</div>

Left Aligned Responsive Dropdown


<div class="hs-dropdown ti-dropdown relative inline-flex [--strategy:absolute]">
    <button id="hs-dropdown-left-but-right-on-lg" type="button" 
    class="hs-dropdown-toggle ti-btn btn-wave ti-btn-primary-full ti-dropdown-toggle">
    Left aligned but right aligned when large screen
    <i class="hs-dropdown-open:rotate-180 ri-arrow-down-s-line align-middle inline-block"></i>
    </button>
    <div class="hs-dropdown-menu w-72 ti-dropdown-menu top-0 lg:start-auto lg:end-0 min-w-[16.5rem] hidden"
        aria-labelledby="hs-dropdown-left-but-right-on-lg">
        <a class="ti-dropdown-item" href="javascript:void(0);">Newsletter</a>
        <a class="ti-dropdown-item" href="javascript:void(0);">Purchases</a>
        <a class="ti-dropdown-item" href="javascript:void(0);">Downloads</a>
        <a class="ti-dropdown-item" href="javascript:void(0);">Team Account</a>
    </div>
</div>

Right Aligned Responsive Dropdown


<div class="ti-dropdown hs-dropdown relative inline-flex [--strategy:absolute]">
    <button id="hs-dropdown-right-but-left-on-lg" type="button"
        class="hs-dropdown-toggle ti-btn btn-wave ti-btn-secondary-full ti-dropdown-toggle">
        Right aligned but left aligned when large screen
        <i class="hs-dropdown-open:rotate-180 ri-arrow-down-s-line align-middle inline-block"></i>
    </button>
    <div class="hs-dropdown-menu ti-dropdown-menu hidden "
        aria-labelledby="dropdownMenuButton">
       <a class="ti-dropdown-item" href="javascript:void(0);">Newsletter</a>
       <a class="ti-dropdown-item" href="javascript:void(0);">Purchases</a>
       <a class="ti-dropdown-item" href="javascript:void(0);">Downloads</a>
       <a class="ti-dropdown-item" href="javascript:void(0);">Team Account</a>
    </div>
</div>

Dark Dropdowns

 <div class="ti-dropdown hs-dropdown">
<button class="ti-btn btn-wave ti-btn-dark ti-dropdown-toggle !py-2" type="button"
    id="dropdownMenuButton3" aria-expanded="false">
    Dropdown button<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul
    class="hs-dropdown-menu ti-dropdown-menu hs-dropdown-menu !bg-black dark:!bg-defaulttextcolor/10 hidden">
    <li><a class="ti-dropdown-item !text-white dark:!text-defaulttextcolor"
            href="javascript:void(0);">Action</a></li>
    <li><a class="ti-dropdown-item !text-white dark:!text-defaulttextcolor"
            href="javascript:void(0);">Another action</a></li>
    <li><a class="ti-dropdown-item !text-white dark:!text-defaulttextcolor"
            href="javascript:void(0);">Something else here</a></li>
</ul>
</div>

Custom Dropdown Menu's

 <div class="ti-btn-list">
<div class="ti-dropdown hs-dropdown">
    <button class="ti-btn btn-wave ti-btn-primary-full ti-dropdown-toggle !py-2"
        type="button" aria-expanded="false">
        Primary<i class="ri-arrow-down-s-line align-middle inline-block"></i>
    </button>
    <ul
        class="hs-dropdown-menu ti-dropdown-menu hs-dropdown-menu !bg-primary hidden">
        <li><a class="ti-dropdown-item !text-white"
                href="javascript:void(0);">Action</a></li>
        <li><a class="ti-dropdown-item !text-white"
                href="javascript:void(0);">Another action</a></li>
        <li><a class="ti-dropdown-item !text-white"
                href="javascript:void(0);">Something else here</a></li>
    </ul>
</div>
<div class="ti-dropdown hs-dropdown">
    <button class="ti-btn btn-wave ti-btn-secondary-full ti-dropdown-toggle !py-2"
        type="button" aria-expanded="false">
        secondary<i class="ri-arrow-down-s-line align-middle inline-block"></i>
    </button>
    <ul
        class="hs-dropdown-menu ti-dropdown-menu hs-dropdown-menu !bg-secondary hidden">
        <li><a class="ti-dropdown-item !text-white"
                href="javascript:void(0);">Action</a></li>
        <li><a class="ti-dropdown-item !text-white"
                href="javascript:void(0);">Another action</a></li>
        <li><a class="ti-dropdown-item !text-white"
                href="javascript:void(0);">Something else here</a></li>
    </ul>
</div>
<div class="ti-dropdown hs-dropdown">
    <button class="ti-btn btn-wave ti-btn-warning-full ti-dropdown-toggle !py-2"
        type="button" aria-expanded="false">
        warning<i class="ri-arrow-down-s-line align-middle inline-block"></i>
    </button>
    <ul class="hs-dropdown-menu ti-dropdown-menu dropmenu-item-warning hidden">
        <li><a class="ti-dropdown-item active" href="javascript:void(0);">Active</a>
        </li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                action</a></li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
                here</a></li>
    </ul>
</div>
<div class="ti-dropdown hs-dropdown">
    <button class="ti-btn btn-wave ti-btn-info-full ti-dropdown-toggle !py-2" type="button"
        aria-expanded="false">
        info<i class="ri-arrow-down-s-line align-middle inline-block"></i>
    </button>
    <ul class="hs-dropdown-menu ti-dropdown-menu dropmenu-item-info hidden">
        <li><a class="ti-dropdown-item active" href="javascript:void(0);">Active</a>
        </li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                action</a></li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
                here</a></li>
    </ul>
</div>
<div class="ti-dropdown hs-dropdown">
    <button class="ti-btn btn-wave ti-btn-success ti-dropdown-toggle !py-2" type="button"
        aria-expanded="false">
        success<i class="ri-arrow-down-s-line align-middle inline-block"></i>
    </button>
    <ul class="hs-dropdown-menu ti-dropdown-menu dropmenu-light-success hidden">
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                action</a></li>
        <li><a class="ti-dropdown-item active" href="javascript:void(0);">Active</a>
        </li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
                here</a></li>
    </ul>
</div>
<div class="ti-dropdown hs-dropdown">
    <button class="ti-btn btn-wave ti-btn-danger ti-dropdown-toggle !py-2" type="button"
        aria-expanded="false">
        danger<i class="ri-arrow-down-s-line align-middle inline-block"></i>
    </button>
    <ul class="hs-dropdown-menu ti-dropdown-menu dropmenu-light-danger hidden">
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                action</a></li>
        <li><a class="ti-dropdown-item active" href="javascript:void(0);">Active</a>
        </li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
                here</a></li>
    </ul>
</div>
</div>

Ghost Button Dropdowns

<div class="ti-btn-list">
<div class="ti-dropdown hs-dropdown">
    <button type="button"
        class="ti-btn btn-wave ti-btn-ghost-primary ti-dropdown-toggle !py-2 !shadow-none"
        aria-expanded="false">
        Primary<i class="ri-arrow-down-s-line align-middle inline-block"></i>
    </button>
    <ul class="hs-dropdown-menu ti-dropdown-menu hidden">
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                action</a></li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
                here</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Separated
                link</a></li>
    </ul>
</div>
<div class="ti-dropdown hs-dropdown">
    <button type="button"
        class="ti-btn btn-wave ti-btn-ghost-secondary ti-dropdown-toggle !py-2 !shadow-none"
        aria-expanded="false">
        Secondary<i class="ri-arrow-down-s-line align-middle inline-block"></i>
    </button>
    <ul class="hs-dropdown-menu ti-dropdown-menu hidden">
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                action</a></li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
                here</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Separated
                link</a></li>
    </ul>
</div>
<div class="ti-dropdown hs-dropdown">
    <button type="button"
        class="ti-btn btn-wave ti-btn-ghost-success ti-dropdown-toggle !py-2 !shadow-none"
        aria-expanded="false">
        Success<i class="ri-arrow-down-s-line align-middle inline-block"></i>
    </button>
    <ul class="hs-dropdown-menu ti-dropdown-menu hidden">
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                action</a></li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
                here</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Separated
                link</a></li>
    </ul>
</div>
<div class="ti-dropdown hs-dropdown">
    <button type="button" class="ti-btn btn-wave ti-btn-ghost-info ti-dropdown-toggle !py-2 !shadow-none"
        aria-expanded="false">
        Info<i class="ri-arrow-down-s-line align-middle inline-block"></i>
    </button>
    <ul class="hs-dropdown-menu ti-dropdown-menu hidden">
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                action</a></li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
                here</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Separated
                link</a></li>
    </ul>
</div>
<div class="ti-dropdown hs-dropdown">
    <button type="button"
        class="ti-btn btn-wave ti-btn-ghost-warning ti-dropdown-toggle !py-2 !shadow-none"
        aria-expanded="false">
        Warning<i class="ri-arrow-down-s-line align-middle inline-block"></i>
    </button>
    <ul class="hs-dropdown-menu ti-dropdown-menu hidden">
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                action</a></li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
                here</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Separated
                link</a></li>
    </ul>
</div>
<div class="ti-dropdown hs-dropdown">
    <button type="button"
        class="ti-btn btn-wave ti-btn-ghost-danger ti-dropdown-toggle !py-2 !shadow-none"
        aria-expanded="false">
        Danger<i class="ri-arrow-down-s-line align-middle inline-block"></i>
    </button>
    <ul class="hs-dropdown-menu ti-dropdown-menu hidden">
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Another
                action</a></li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
                here</a></li>
        <li>
            <hr class="dropdown-divider">
        </li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Separated
                link</a></li>
    </ul>
</div>
</div>

non-interactive dropdown items

Use .ti-dropdown-item-text. to create non-interactive dropdown items.

 <p class=" mb-3">Use <code>.ti-dropdown-item-text.</code> to create non-interactive
    dropdown items.</p>
<div class="bd-example">
    <ul class="dropdown-menu border dark:border-defaultborder/10 shadow-sm">
        <li><span class="!py-2 !px-4 !text-[0.875rem]">Dropdown item text</span>
        </li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Another action</a>
        </li>
        <li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
                here</a>
        </li>
    </ul>
</div>

Dropdown Headers

Add a .dropdown-header to label sections of actions in any dropdown menu.

<p class="card-titlte mb-3">Add a <code>.dropdown-header</code> to label sections of
                                    actions in any dropdown menu.</p>
                                    <div class="bd-example">
                                    <ul class="dropdown-menu border dark:border-defaultborder/10 shadow-sm">
                                        <li>
                                            <h6 class="dropdown-header">Dropdown header</h6>
                                        </li>
                                        <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
                                        <li><a class="ti-dropdown-item" href="javascript:void(0);">Another action</a>
                                        </li>
                                        <li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
                                                here</a></li>
                                    </ul>
                                    </div>

Dropdown Dividers

<div class="bd-example">
<ul class="dropdown-menu border dark:border-defaultborder/10 shadow-sm">
    <li><a class="dropdown-header" href="javascript:void(0);">Heading</a></li>
    <li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
    <li><a class="ti-dropdown-item" href="javascript:void(0);">Another action</a>
    </li>
    <li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
            here</a></li>
    <li>
        <hr class="dropdown-divider">
    </li>
    <li><a class="ti-dropdown-item" href="javascript:void(0);">Separated link</a>
    </li>
</ul>
</div>

Dropdown Menu Text

<div class="bd-example">
                                    <div class="dropdown-menu border dark:border-defaultborder/10 shadow-sm p-6 text-[#8c9097] dark:text-white/50 text-[0.875rem] max-w-[200px]">
                                        <p>
                                            Some example text that's free-flowing within the dropdown menu.
                                        </p>
                                        <p class="mb-0">
                                            And this is more example text.
                                        </p>
                                    </div>
                                </div>

Switcher

Dropdowns

Dropdown header