Zynix - Laravel Tailwind Premium 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 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 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 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 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 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 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 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 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 !p-0 !border-0 !m-0">
            <div class="hs-dropdown ti-dropdown">
                <button class="ti-btn btn-wave  ti-btn-primary 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 !p-0 !border-0 !m-0">
            <div class="hs-dropdown ti-dropdown">
                <button
                    class="ti-btn btn-wave  ti-btn-secondary 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 !p-0 !border-0 !m-0">
            <div class="hs-dropdown ti-dropdown">
                <button class="ti-btn btn-wave  ti-btn-success 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 !p-0 !border-0 !m-0">
            <div class="hs-dropdown ti-dropdown">
                <button class="ti-btn btn-wave  ti-btn-info 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 !p-0 !border-0 !m-0">
            <div class="hs-dropdown ti-dropdown">
                <button class="ti-btn btn-wave  ti-btn-warning 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 !p-0 !border-0 !m-0">
            <div class="hs-dropdown ti-dropdown">
                <button class="ti-btn btn-wave  ti-btn-danger 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>

Dropdown Sizing

 <div class="ti-btn-group !p-0 !m-0 !border-0 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 !p-0 !m-0 !border-0">
    <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="dropdownMenuButton1"
            aria-expanded="false">
            Large split button
        </button>
        <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="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 !p-0 !m-0 !border-0">
    <div class="ti-btn-group !p-0 !m-0 !border-0 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 !p-0 !m-0 !border-0">
    <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>
        <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>

Outline Botton Dropdowns

<div class="ti-btn-list">
    <div class="ti-btn-group !p-0 !border-0 !m-0">
        <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 !p-0 !border-0 !m-0">
        <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 !p-0 !border-0 !m-0">
        <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 !p-0 !border-0 !m-0">
        <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 !p-0 !border-0 !m-0">
        <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 !p-0 !border-0 !m-0">
        <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 !p-0 !border-0 !m-0">
            <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 !p-0 !border-0 !m-0">
            <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 !p-0 !border-0 !m-0">
            <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 !p-0 !border-0 !m-0">
            <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 !p-0 !border-0 !m-0">
            <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 !p-0 !border-0 !m-0">
            <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 !p-0 !border-0 !m-0">
            <div class="hs-dropdown ti-dropdown">
                <button
                    class="ti-btn btn-wave  ti-btn-primary !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 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 !p-0 !border-0 !m-0">
            <div class="hs-dropdown ti-dropdown">
                <button
                    class="ti-btn btn-wave  ti-btn-secondary !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 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 !p-0 !border-0 !m-0">
            <div class="hs-dropdown ti-dropdown">
                <button
                    class="ti-btn btn-wave  ti-btn-success !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 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 !p-0 !border-0 !m-0">
            <div class="hs-dropdown ti-dropdown">
                <button
                    class="ti-btn btn-wave  ti-btn-info !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 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 !p-0 !border-0 !m-0">
            <div class="hs-dropdown ti-dropdown">
                <button
                    class="ti-btn btn-wave  ti-btn-warning !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 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 !p-0 !border-0 !m-0">
            <div class="hs-dropdown ti-dropdown">
                <button
                    class="ti-btn btn-wave  ti-btn-danger !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 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>

Dropup 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>

Dropup 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 !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   !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  !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 !p-0 !m-0 !border-0">
            <div class="hs-dropdown ti-dropdown">
                <button class="ti-btn btn-wave  ti-btn-primary ti-dropdown-toggle" type="button"
                    id="defaultDropdown"
                    aria-expanded="false">
                    Default dropdown<i
                        class="ri-arrow-down-s-line align-middle inline-block"></i>
                </button>
                <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                    aria-labelledby="defaultDropdown">
                    <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
                    </li>
                    <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
                    </li>
                    <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="ti-btn-group !p-0 !m-0 !border-0">
            <div class="hs-dropdown ti-dropdown">
                <button class="ti-btn btn-wave  ti-btn-secondary ti-dropdown-toggle"
                    type="button" id="dropdownMenuClickableOutside"
                    aria-expanded="false">
                    Clickable outside<i
                        class="ri-arrow-down-s-line align-middle inline-block"></i>
                </button>
                <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                    aria-labelledby="defaultDropdown">
                    <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
                    </li>
                    <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
                    </li>
                    <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="ti-btn-group !p-0 !m-0 !border-0">
            <div class="hs-dropdown ti-dropdown">
                <button class="ti-btn btn-wave  ti-btn-info ti-dropdown-toggle" type="button"
                    id="dropdownMenuClickableInside"
                    aria-expanded="false">
                    Clickable inside<i
                        class="ri-arrow-down-s-line align-middle inline-block"></i>
                </button>
                <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                    aria-labelledby="dropdownMenuClickableInside">
                    <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
                    </li>
                    <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
                    </li>
                    <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="ti-btn-group !p-0 !m-0 !border-0">
            <div class="hs-dropdown ti-dropdown">
                <button class="ti-btn btn-wave  ti-btn-warning ti-dropdown-toggle" type="button"
                    id="dropdownMenuClickable"
                    aria-expanded="false">
                    Manual close<i
                        class="ri-arrow-down-s-line align-middle inline-block"></i>
                </button>
                <ul class="hs-dropdown-menu ti-dropdown-menu hidden"
                    aria-labelledby="dropdownMenuClickable">
                    <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
                    </li>
                    <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
                    </li>
                    <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
                    </li>
                </ul>
            </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="ti-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="ti-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>

Alignment options

 <div class="">
    <div class="ti-dropdown hs-dropdown">
        <button class="ti-btn btn-wave  ti-btn-primary ti-dropdown-toggle mb-0 !py-2"
            type="button" id="dropdownMenuButton"
            aria-expanded="false">
            Dropdown<i class="ri-arrow-down-s-line align-middle inline-block"></i>
        </button>
        <ul class="hs-dropdown-menu ti-dropdown-menu hidden "
            aria-labelledby="dropdownMenuButton">
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
            </li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
            </li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
            </li>
        </ul>
    </div>
    <div class="ti-dropdown hs-dropdown">
        <button type="button"
            class="ti-btn btn-wave  ti-btn-secondary ti-dropdown-toggle mb-0 !py-2"
            aria-expanded="false">
            Right-aligned menu<i
                class="ri-arrow-down-s-line align-middle inline-block"></i>
        </button>
        <ul
            class="hs-dropdown-menu ti-dropdown-menu hs-dropdown-menu ti-dropdown-menu-end hidden ">
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
            </li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
            </li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
            </li>
        </ul>
    </div>
    <div class="ti-dropdown hs-dropdown" data-hs-dropdown-strategy="absolute">
        <button type="button" id="hs-dropdown-left-but-right-on-lg"
            class="ti-btn btn-wave  ti-btn-info ti-dropdown-toggle mb-0 !py-2"
            aria-expanded="false">
            Left-aligned, right-aligned lg<i
                class="ri-arrow-down-s-line align-middle inline-block"></i>
        </button>
        <ul class="hs-dropdown-menu ti-dropdown-menu hs-dropdown-menu hidden lg:ti-dropdown-menu-end "
            aria-labelledby="hs-dropdown-left-but-right-on-lg">
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
            </li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
            </li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
            </li>
        </ul>
    </div>
    <div class="ti-dropdown hs-dropdown" data-hs-dropdown-strategy="absolute">
        <button type="button" id="hs-dropdown-right-but-left-on-lg"
            class="ti-btn btn-wave  ti-btn-warning ti-dropdown-toggle mb-0 !py-2"
            aria-expanded="false">
            Right-aligned, left-aligned lg<i
                class="ri-arrow-down-s-line align-middle inline-block"></i>
        </button>
        <ul class="hs-dropdown-menu ti-dropdown-menu hs-dropdown-menu hidden  ti-dropdown-menu-end hs-dropdown-menu lg:ti-dropdown-menu-start"
            aria-labelledby="hs-dropdown-right-but-left-on-lg">
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
            </li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
            </li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
            </li>
        </ul>
    </div>
    <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-success !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>
            Dropstart
        </button>

        <ul class="hs-dropdown-menu  ti-dropdown-menu transition-none hidden"
            aria-labelledby="hs-dropright">
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
            </li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
            </li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
            </li>
        </ul>
    </div>
    <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 !py-2">
            Dropend
            <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>

        <ul class="hs-dropdown-menu  ti-dropdown-menu transition-none hidden"
            aria-labelledby="hs-dropright">
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
            </li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
            </li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
            </li>
        </ul>
    </div>
    <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-success !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>

        <ul class="hs-dropdown-menu  mt-0 transition-none ti-dropdown-menu hidden"
            aria-labelledby="hs-dropup">
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
            </li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
            </li>
            <li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
            </li>
        </ul>
    </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

$75 $99

$120 $149

$30 $49

$70 $129

$200 $249

Dropdowns

Dropdown header