YNEX - Blazor Server 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="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 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>
    <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>

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-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">
            <button class="ti-btn btn-wave  ti-btn-primary-full 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">
        <div class="hs-dropdown ti-dropdown">
            <button class="ti-btn btn-wave  ti-btn-secondary-full 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">
        <div class="hs-dropdown ti-dropdown">
            <button class="ti-btn btn-wave  ti-btn-info-full 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">
        <div class="hs-dropdown ti-dropdown">
            <button class="ti-btn btn-wave  ti-btn-warning-full 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="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>

Alignment options

 <div class="">
<div class="ti-dropdown hs-dropdown">
    <button class="ti-btn btn-wave  ti-btn-primary-full 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-full 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-full 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-full 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-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>
        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-full !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-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>

    <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

Dropdowns

Dropdown header