Valex - Laravel Tailwind Admin Template

Dropdowns

 <div class="ti-btn-list flex align-center flex-wrap">
    <div class="hs-dropdown ti-dropdown">
        <button class="ti-btn ti-btn-primary-full ti-dropdown-toggle !py-2"
            type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
            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 ti-btn-secondary-full ti-dropdown-toggle !py-2"
            href="javascript:void(0);" role="button" id="dropdownMenuLink"
            data-bs-toggle="dropdown" 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 button Dropdowns

<div class="ti-btn-list">
        <div class="ti-btn-group !me-2">
            <div class="hs-dropdown ti-dropdown">
                <button class="ti-btn ti-btn-primary-full ti-dropdown-toggle" type="button"
                    id="dropdownMenuButton1" data-bs-toggle="dropdown"
                    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 !me-2">
            <div class="hs-dropdown ti-dropdown">
                <button class="ti-btn ti-btn-secondary-full ti-dropdown-toggle"
                    type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                    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 !me-2">
            <div class="hs-dropdown ti-dropdown">
                <button class="ti-btn ti-btn-success-full ti-dropdown-toggle" type="button"
                    id="dropdownMenuButton1" data-bs-toggle="dropdown"
                    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 !me-2">
            <div class="hs-dropdown ti-dropdown">
                <button class="ti-btn ti-btn-info-full ti-dropdown-toggle" type="button"
                    id="dropdownMenuButton1" data-bs-toggle="dropdown"
                    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 !me-2">
            <div class="hs-dropdown ti-dropdown">
                <button class="ti-btn ti-btn-warning-full ti-dropdown-toggle" type="button"
                    id="dropdownMenuButton1" data-bs-toggle="dropdown"
                    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 !me-2">
            <div class="hs-dropdown ti-dropdown">
                <button class="ti-btn ti-btn-danger-full ti-dropdown-toggle" type="button"
                    id="dropdownMenuButton1" data-bs-toggle="dropdown"
                    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 !me-2">
            <div class="hs-dropdown ti-dropdown">
                <button class="ti-btn ti-btn-primary-full ti-dropdown-toggle !rounded-full"
                    type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                    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 !me-2">
            <div class="hs-dropdown ti-dropdown">
                <button
                    class="ti-btn ti-btn-secondary-full ti-dropdown-toggle !rounded-full"
                    type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                    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 !me-2">
            <div class="hs-dropdown ti-dropdown">
                <button class="ti-btn ti-btn-success-full ti-dropdown-toggle !rounded-full"
                    type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                    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 !me-2">
            <div class="hs-dropdown ti-dropdown">
                <button class="ti-btn ti-btn-info-full ti-dropdown-toggle !rounded-full"
                    type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                    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 !me-2">
            <div class="hs-dropdown ti-dropdown">
                <button class="ti-btn ti-btn-warning-full ti-dropdown-toggle !rounded-full"
                    type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                    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 !me-2">
            <div class="hs-dropdown ti-dropdown">
                <button class="ti-btn ti-btn-danger-full ti-dropdown-toggle !rounded-full"
                    type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                    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 button Dropdowns

<div class="ti-btn-list">
    <div class="ti-btn-group !me-2">
        <div class="hs-dropdown ti-dropdown">
            <button class="ti-btn ti-btn-outline-primary ti-dropdown-toggle"
                type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                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 !me-2">
        <div class="hs-dropdown ti-dropdown">
            <button class="ti-btn ti-btn-outline-secondary ti-dropdown-toggle"
                type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                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 !me-2">
        <div class="hs-dropdown ti-dropdown">
            <button class="ti-btn ti-btn-outline-success ti-dropdown-toggle"
                type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                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 !me-2">
        <div class="hs-dropdown ti-dropdown">
            <button class="ti-btn ti-btn-outline-info ti-dropdown-toggle" type="button"
                id="dropdownMenuButton1" data-bs-toggle="dropdown"
                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 !me-2">
        <div class="hs-dropdown ti-dropdown">
            <button class="ti-btn ti-btn-outline-warning ti-dropdown-toggle"
                type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                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 !me-2">
        <div class="hs-dropdown ti-dropdown">
            <button class="ti-btn ti-btn-outline-danger ti-dropdown-toggle"
                type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                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 button Dropdowns

<div class="ti-btn-list">
        <div class="ti-btn-group !me-2">
            <div class="hs-dropdown ti-dropdown">
                <button
                    class="ti-btn ti-btn-outline-primary ti-dropdown-toggle !rounded-full"
                    type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                    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 !me-2">
            <div class="hs-dropdown ti-dropdown">
                <button
                    class="ti-btn ti-btn-outline-secondary ti-dropdown-toggle !rounded-full"
                    type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                    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 !me-2">
            <div class="hs-dropdown ti-dropdown">
                <button
                    class="ti-btn ti-btn-outline-success ti-dropdown-toggle !rounded-full"
                    type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                    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 !me-2">
            <div class="hs-dropdown ti-dropdown">
                <button class="ti-btn ti-btn-outline-info ti-dropdown-toggle !rounded-full"
                    type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                    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 !me-2">
            <div class="hs-dropdown ti-dropdown">
                <button
                    class="ti-btn ti-btn-outline-warning ti-dropdown-toggle !rounded-full"
                    type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                    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 !me-2">
            <div class="hs-dropdown ti-dropdown">
                <button
                    class="ti-btn ti-btn-outline-danger ti-dropdown-toggle !rounded-full"
                    type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                    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 !me-2 !m-0">
            <div class="hs-dropdown ti-dropdown">
                <button
                    class="ti-btn ti-btn-primary-full !me-0 !rounded-tr-none !rounded-br-none rtl:!rounded-tl-none rtl:!rounded-bl-none  rtl:!rounded-tr-sm rtl:!rounded-br-sm "
                    type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                    aria-expanded="false">
                    Action
                </button>
                <button
                    class="ti-btn ti-btn-primary-full opacity-[0.85] !rounded-tl-none !rounded-bl-none rtl:!rounded-tr-none rtl:!rounded-br-none  rtl:!rounded-tl-sm rtl:!rounded-bl-sm"><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 !me-2 !m-0">
            <div class="hs-dropdown ti-dropdown">
                <button
                    class="ti-btn ti-btn-secondary-full !me-0 !rounded-tr-none !rounded-br-none rtl:!rounded-tl-none rtl:!rounded-bl-none  rtl:!rounded-tr-sm rtl:!rounded-br-sm "
                    type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                    aria-expanded="false">
                    Action
                </button>
                <button
                    class="ti-btn ti-btn-secondary-full opacity-[0.85] !rounded-tl-none !rounded-bl-none rtl:!rounded-tr-none rtl:!rounded-br-none  rtl:!rounded-tl-sm rtl:!rounded-bl-sm"><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 !me-2 !m-0">
            <div class="hs-dropdown ti-dropdown">
                <button
                    class="ti-btn ti-btn-success-full !me-0 !rounded-tr-none !rounded-br-none rtl:!rounded-tl-none rtl:!rounded-bl-none  rtl:!rounded-tr-sm rtl:!rounded-br-sm "
                    type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                    aria-expanded="false">
                    Action
                </button>
                <button
                    class="ti-btn ti-btn-success-full opacity-[0.85] !rounded-tl-none !rounded-bl-none rtl:!rounded-tr-none rtl:!rounded-br-none  rtl:!rounded-tl-sm rtl:!rounded-bl-sm"><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 !me-2 !m-0">
            <div class="hs-dropdown ti-dropdown">
                <button
                    class="ti-btn ti-btn-info-full !me-0 !rounded-tr-none !rounded-br-none rtl:!rounded-tl-none rtl:!rounded-bl-none  rtl:!rounded-tr-sm rtl:!rounded-br-sm "
                    type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                    aria-expanded="false">
                    Action
                </button>
                <button
                    class="ti-btn ti-btn-info-full opacity-[0.85] !rounded-tl-none !rounded-bl-none rtl:!rounded-tr-none rtl:!rounded-br-none  rtl:!rounded-tl-sm rtl:!rounded-bl-sm"><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 !me-2 !m-0">
            <div class="hs-dropdown ti-dropdown">
                <button
                    class="ti-btn ti-btn-warning-full !me-0 !rounded-tr-none !rounded-br-none rtl:!rounded-tl-none rtl:!rounded-bl-none  rtl:!rounded-tr-sm rtl:!rounded-br-sm"
                    type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                    aria-expanded="false">
                    Action
                </button>
                <button
                    class="ti-btn ti-btn-warning-full opacity-[0.85] !rounded-tl-none !rounded-bl-none rtl:!rounded-tr-none rtl:!rounded-br-none  rtl:!rounded-tl-sm rtl:!rounded-bl-sm "><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 !me-2 !m-0">
            <div class="hs-dropdown ti-dropdown">
                <button
                    class="ti-btn ti-btn-danger-full !me-0 !rounded-tr-none !rounded-br-none rtl:!rounded-tl-none rtl:!rounded-bl-none  rtl:!rounded-tr-sm rtl:!rounded-br-sm "
                    type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
                    aria-expanded="false">
                    Action
                </button>
                <button
                    class="ti-btn ti-btn-danger-full opacity-[0.85] !rounded-tl-none !rounded-bl-none rtl:!rounded-tr-none rtl:!rounded-br-none  rtl:!rounded-tl-sm rtl:!rounded-bl-sm"><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 !me-2 my-1  ti-dropdown hs-dropdown">
    <button class="ti-btn-primary-full ti-btn-lg ti-dropdown-toggle" type="button"
        data-bs-toggle="dropdown" 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 !me-2 my-1 me-2">
    <div class="hs-dropdown ti-dropdown">
        <button
            class="ti-btn-lg ti-btn-light !me-0 !rounded-tr-none !rounded-br-none rtl:!rounded-tl-none rtl:!rounded-bl-none  rtl:!rounded-tr-sm rtl:!rounded-br-sm !border-0 ti-dropdown-toggle"
            type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
            aria-expanded="false">
            Large split button
        </button>
        <button
            class="ti-btn ti-btn-light opacity-[0.85] !rounded-tl-none !rounded-bl-none rtl:!rounded-tr-none rtl:!rounded-br-none  rtl:!rounded-tl-sm rtl:!rounded-bl-sm"><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 !me-2 my-1 me-2">
    <div class="ti-btn-group !me-2 my-1 me-2 ti-dropdown hs-dropdown">
        <button
            class="ti-btn ti-btn-primary-full !py-1 !px-4 !text-[0.75rem] ti-dropdown-toggle"
            type="button" data-bs-toggle="dropdown" 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 !me-2 my-1 me-2">
    <div class="hs-dropdown ti-dropdown">
        <button
            class="ti-btn !py-1 !px-4 !text-[0.75rem]  ti-btn-light !me-0 !rounded-tr-none !border-0 !rounded-br-none rtl:!rounded-tl-none rtl:!rounded-bl-none  rtl:!rounded-tr-sm rtl:!rounded-br-sm ti-dropdown-toggle"
            type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
            aria-expanded="false">
            Small split button
        </button>
        <button
            class="ti-btn !py-1 !px-4 !text-[0.75rem]  ti-btn-light opacity-[0.85] !rounded-tl-none !rounded-bl-none rtl:!rounded-tr-none rtl:!rounded-br-none  rtl:!rounded-tl-sm rtl:!rounded-bl-sm"><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 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 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 ti-btn-secondary-full !py-1 !rounded-tr-none !rounded-br-none rtl:!rounded-tl-none rtl:!rounded-bl-none  rtl:!rounded-tr-sm rtl:!rounded-br-sm !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 ti-btn-secondary-full !opacity-[0.85]  !rounded-tl-none !rounded-bl-none ti-dropdown-toggle  rtl:!rounded-tr-none rtl:!rounded-br-none  rtl:!rounded-tl-sm rtl:!rounded-bl-sm">
        <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  mt-0 ti-dropdown-menu hidden"
        aria-labelledby="hs-split-dropup">
        <a class="ti-dropdown-item" href="javascript:void(0);">
            Action
        </a>
        <a class="ti-dropdown-item" href="javascript:void(0);">
            Another action
        </a>
        <a class="ti-dropdown-item" href="javascript:void(0);">
            Something else here
        </a>
    </div>
    </div>
    </div>

Drop right

<div class="hs-dropdown ti-dropdown [--placement:right-top] m-1">
    <button id="hs-dropright" type="button"
    class="hs-dropdown-toggle ti-dropdown-toggle ti-btn 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 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 ti-btn-secondary-full  !py-2 !rounded-tr-none !rounded-br-none rtl:!rounded-tl-none rtl:!rounded-bl-none  rtl:!rounded-tr-sm rtl:!rounded-br-sm 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 ti-btn-secondary-full !rounded-tl-none !rounded-bl-none rtl:!rounded-tr-none rtl:!rounded-br-none  rtl:!rounded-tl-sm rtl:!rounded-bl-sm">
        <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 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 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 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 ti-btn-secondary-full !rounded-tr-none !rounded-br-none rtl:!rounded-tr-none rtl:!rounded-br-none  rtl:!rounded-tl-sm rtl:!rounded-bl-sm">
        <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 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 ti-btn-secondary-full  !py-2 !rounded-tl-none !rounded-bl-none rtl:!rounded-tl-none rtl:!rounded-bl-none  rtl:!rounded-tr-sm rtl:!rounded-br-sm ti-dropdown-toggle !me-0">
    Split dropleft
    </button>
    </div>

Active

<div class="hs-dropdown ti-dropdown">
    <button type="button" class="ti-btn ti-btn-primary-full ti-dropdown-toggle !py-2"
        data-bs-toggle="dropdown" 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"
        data-bs-toggle="dropdown" 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 !me-2">
            <div class="hs-dropdown ti-dropdown">
                <button class="ti-btn ti-btn-primary-full ti-dropdown-toggle" type="button"
                    id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true"
                    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 !me-2">
            <div class="hs-dropdown ti-dropdown">
                <button class="ti-btn ti-btn-secondary-full ti-dropdown-toggle"
                    type="button" id="dropdownMenuClickableOutside"
                    data-bs-toggle="dropdown" data-bs-auto-close="inside"
                    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 !me-2">
            <div class="hs-dropdown ti-dropdown">
                <button class="ti-btn ti-btn-info-full ti-dropdown-toggle" type="button"
                    id="dropdownMenuClickableInside" data-bs-toggle="dropdown"
                    data-bs-auto-close="outside" 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 !me-2">
            <div class="hs-dropdown ti-dropdown">
                <button class="ti-btn ti-btn-warning-full ti-dropdown-toggle" type="button"
                    id="dropdownMenuClickable" data-bs-toggle="dropdown"
                    data-bs-auto-close="false" 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 ti-btn-secondary-full ti-dropdown-toggle !py-2" type="button"
            id="dropdownMenu2" data-bs-toggle="dropdown" 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 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 ti-btn-primary-full ti-dropdown-toggle mb-0 !py-2"
            type="button" id="dropdownMenuButton" data-bs-toggle="dropdown"
            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 ti-btn-secondary-full ti-dropdown-toggle mb-0 !py-2"
            data-bs-toggle="dropdown" 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 ti-btn-info-full ti-dropdown-toggle mb-0 !py-2"
            data-bs-toggle="dropdown" data-bs-display="static" 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 ti-dropdown-menu-lg-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 ti-btn-warning-full ti-dropdown-toggle mb-0 !py-2"
            data-bs-toggle="dropdown" data-bs-display="static" 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 ti-dropdown-menu-lg-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 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 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 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 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 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 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 ti-btn-dark ti-dropdown-toggle !py-2" type="button"
        id="dropdownMenuButton3" data-bs-toggle="dropdown" 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 ti-btn-primary-full ti-dropdown-toggle !py-2"
            type="button" data-bs-toggle="dropdown" 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 ti-btn-secondary-full ti-dropdown-toggle !py-2"
            type="button" data-bs-toggle="dropdown" 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 ti-btn-warning-full ti-dropdown-toggle !py-2"
            type="button" data-bs-toggle="dropdown" 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 ti-btn-info-full ti-dropdown-toggle !py-2" type="button"
            data-bs-toggle="dropdown" 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 ti-btn-success ti-dropdown-toggle !py-2" type="button"
            data-bs-toggle="dropdown" 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 ti-btn-danger ti-dropdown-toggle !py-2" type="button"
            data-bs-toggle="dropdown" 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 ti-btn-ghost-primary ti-dropdown-toggle !py-2"
            data-bs-toggle="dropdown" 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 ti-btn-ghost-secondary ti-dropdown-toggle !py-2"
            data-bs-toggle="dropdown" 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 ti-btn-ghost-success ti-dropdown-toggle !py-2"
            data-bs-toggle="dropdown" 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 ti-btn-ghost-info ti-dropdown-toggle !py-2"
            data-bs-toggle="dropdown" 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 ti-btn-ghost-warning ti-dropdown-toggle !py-2"
            data-bs-toggle="dropdown" 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 ti-btn-ghost-danger ti-dropdown-toggle !py-2"
            data-bs-toggle="dropdown" 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] text-[0.875rem]"
        style="max-width: 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>

Dropdown Dividers


        <div class="hs-dropdown ti-dropdown">
            <button id="hs-dropdown-with-dividers" type="button"
            class="ti-btn ti-btn-primary-full ti-dropdown-toggle">
            Actions
            <i class="ri-arrow-down-s-line align-middle inline-block"></i>
            </button>

            <div class="hs-dropdown-menu hidden ti-dropdown-menu divide-y divide-gray-200"
                aria-labelledby="hs-dropdown-with-dividers">
                <div class="ti-dropdown-divider">
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                        Newsletter
                    </a>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                        Purchases
                    </a>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                        Downloads
                    </a>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                        Team Account
                    </a>
                </div>
                <div class="ti-dropdown-divider">
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                        Upgrade License
                    </a>
                </div>
                <div class="ti-dropdown-divider">
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                        Account Settings
                    </a>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                        Sign out
                    </a>
                </div>
            </div>
        </div>

Dropdown With Icons


        <div class="hs-dropdown ti-dropdown">
            <button id="hs-dropdown-with-icons" type="button"
            class="ti-btn ti-btn-primary-full ti-dropdown-toggle">
            Actions
            <i class="ri-arrow-down-s-line align-middle inline-block"></i>
            </button>

            <div class="hs-dropdown-menu ti-dropdown-menu divide-y divide-gray-200"
                aria-labelledby="hs-dropdown-with-icons">
                <div class="ti-dropdown-divider">
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                        <svg class="flex-none" width="16" height="16" viewBox="0 0 16 16"
                            fill="currentColor">
                            <path
                                d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z">
                            </path>
                        </svg>
                        Newsletter
                    </a>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                        <svg class="flex-none" width="16" height="16" viewBox="0 0 16 16"
                            fill="currentColor">
                            <path
                                d="M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27zm.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0l-.509-.51z">
                            </path>
                            <path
                                d="M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z">
                            </path>
                        </svg>
                        Purchases
                    </a>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                        <svg class="flex-none" width="16" height="16" viewBox="0 0 16 16"
                            fill="currentColor">
                            <path fill-rule="evenodd"
                                d="M7.646 10.854a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L8.5 9.293V5.5a.5.5 0 0 0-1 0v3.793L6.354 8.146a.5.5 0 1 0-.708.708l2 2z">
                            </path>
                            <path
                                d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z">
                            </path>
                        </svg>
                        Downloads
                    </a>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                        <svg class="flex-none" width="16" height="16" viewBox="0 0 16 16"
                            fill="currentColor">
                            <path
                                d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z">
                            </path>
                        </svg>
                        Team Account
                    </a>
                </div>
            </div>
        </div>

Dropdown With Title


        <div class="hs-dropdown ti-dropdown">
            <button id="hs-dropdown-with-title" type="button"
            class="ti-btn ti-btn-primary-full ti-dropdown-toggle">
            Actions
            <i class="ri-arrow-down-s-line align-middle inline-block"></i>
            </button>

            <div class="hs-dropdown-menu ti-dropdown-menu divide-y divide-gray-200"
                aria-labelledby="hs-dropdown-with-title">
                <div class="ti-dropdown-divider">
                    <span class="ti-dropdown-title">
                        Settings
                    </span>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                        <svg class="flex-none" width="16" height="16" viewBox="0 0 16 16"
                            fill="currentColor">
                            <path
                                d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z" />
                        </svg>
                        Newsletter
                    </a>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                        <svg class="flex-none" width="16" height="16" viewBox="0 0 16 16"
                            fill="currentColor">
                            <path
                                d="M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27zm.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0l-.509-.51z" />
                            <path
                                d="M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z" />
                        </svg>
                        Purchases
                    </a>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                        <svg class="flex-none" width="16" height="16" viewBox="0 0 16 16"
                            fill="currentColor">
                            <path fill-rule="evenodd"
                                d="M7.646 10.854a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L8.5 9.293V5.5a.5.5 0 0 0-1 0v3.793L6.354 8.146a.5.5 0 1 0-.708.708l2 2z" />
                            <path
                                d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z" />
                        </svg>
                        Downloads
                    </a>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                        <svg class="flex-none" width="16" height="16" viewBox="0 0 16 16"
                            fill="currentColor">
                            <path
                                d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" />
                        </svg>
                        Team Account
                    </a>
                </div>
                <div class="ti-dropdown-divider">
                    <span class="ti-dropdown-title">
                        Contacts
                    </span>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                        <svg class="flex-none" width="16" height="16" viewBox="0 0 16 16"
                            fill="currentColor">
                            <path
                                d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4.414A2 2 0 0 0 3 11.586l-2 2V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z" />
                            <path
                                d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
                        </svg>
                        Contact support
                    </a>
                </div>
            </div>
        </div>

Dropdown With Header


        <div class="hs-dropdown ti-dropdown">
            <button id="hs-dropdown-with-header" type="button"
            class="ti-btn ti-btn-primary-full ti-dropdown-toggle">
            Actions
            <i class="ri-arrow-down-s-line align-middle inline-block"></i>
            </button>

            <div class="hs-dropdown-menu ti-dropdown-menu"
                aria-labelledby="hs-dropdown-with-header">
                <div class="ti-dropdown-header">
                    <p class="ti-dropdown-header-title">Signed in as</p>
                    <p class="ti-dropdown-header-content">james@site.com</p>
                </div>
                <div class="mt-2 ti-dropdown-divider">
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                        <svg class="flex-none" width="16" height="16" viewBox="0 0 16 16"
                            fill="currentColor">
                            <path
                                d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z" />
                        </svg>
                        Newsletter
                    </a>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                        <svg class="flex-none" width="16" height="16" viewBox="0 0 16 16"
                            fill="currentColor">
                            <path
                                d="M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27zm.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0l-.509-.51z" />
                            <path
                                d="M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z" />
                        </svg>
                        Purchases
                    </a>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                        <svg class="flex-none" width="16" height="16" viewBox="0 0 16 16"
                            fill="currentColor">
                            <path fill-rule="evenodd"
                                d="M7.646 10.854a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L8.5 9.293V5.5a.5.5 0 0 0-1 0v3.793L6.354 8.146a.5.5 0 1 0-.708.708l2 2z" />
                            <path
                                d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z" />
                        </svg>
                        Downloads
                    </a>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                        <svg class="flex-none" width="16" height="16" viewBox="0 0 16 16"
                            fill="currentColor">
                            <path
                                d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" />
                        </svg>
                        Team Account
                    </a>
                </div>
            </div>
        </div>

Custom Trigger Dropdown


        <div class="hs-dropdown ti-dropdown">
            <button aria-label="button" id="hs-dropdown-default16" type="button"
                class="hs-dropdown-toggle ti-btn p-0 flex-shrink-0 h-[2.375rem] w-[2.375rem] ti-btn-primary-full">
                <svg class="fill-white ti-dropdown-icon" xmlns="http://www.w3.org/2000/svg"
                    width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path
                        d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
                    </path>
                </svg>
            </button>

            <div class="hs-dropdown-menu ti-dropdown-menu"
                aria-labelledby="hs-dropdown-custom-trigger">
                <a class="ti-dropdown-item" href="javascript:void(0);">
                    Newsletter
                </a>
                <a class="ti-dropdown-item" href="javascript:void(0);">
                    Purchases
                </a>
                <a class="ti-dropdown-item" href="javascript:void(0);">
                    Downloads
                </a>
                <a class="ti-dropdown-item" href="javascript:void(0);">
                    Team Account
                </a>
            </div>
        </div>

Custom Trigger Dropdown


        <div class="hs-dropdown ti-dropdown">
            <button aria-label="button" id="hs-dropdown-custom-icon-trigger" type="button"
                class="ti-btn ti-btn-primary-full ti-dropdown-toggle hs-dropdown-toggle p-3 !py-3">
                <svg class="ti-dropdown-icon !text-white" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path
                        d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
                    </path>
                </svg>
            </button>

            <div class="hs-dropdown-menu ti-dropdown-menu"
                aria-labelledby="hs-dropdown-custom-trigger">
                <a class="ti-dropdown-item" href="javascript:void(0);">
                    Newsletter
                </a>
                <a class="ti-dropdown-item" href="javascript:void(0);">
                    Purchases
                </a>
                <a class="ti-dropdown-item" href="javascript:void(0);">
                    Downloads
                </a>
                <a class="ti-dropdown-item" href="javascript:void(0);">
                    Team Account
                </a>
            </div>
        </div>

Dropdown With Slide Up Animation


        <div class="hs-dropdown ti-dropdown">
            <button id="hs-dropdown-slideup-animation" type="button"
            class="ti-btn ti-btn-primary-full ti-dropdown-toggle">
            Actions
            <i class="ri-arrow-down-s-line align-middle inline-block"></i>
            </button>

            <div class="hs-dropdown-menu w-72 duration-300 ti-dropdown-menu"
                aria-labelledby="hs-dropdown-slideup-animation">
                <a class="ti-dropdown-item" href="javascript:void(0);">
                    Newsletter
                </a>
                <a class="ti-dropdown-item" href="javascript:void(0);">
                    Purchases
                </a>
                <a class="ti-dropdown-item" href="javascript:void(0);">
                    Downloads
                </a>
                <a class="ti-dropdown-item" href="javascript:void(0);">
                    Team Account
                </a>
            </div>
        </div>

Dropdown With Transform Style


        <div class="hs-dropdown ti-dropdown">
            <button id="hs-dropdown-transform-style" type="button"
            class="ti-btn ti-btn-primary-full ti-dropdown-toggle">
            Actions
            <i class="ri-arrow-down-s-line align-middle inline-block"></i>
            </button>

            <div class="hs-dropdown-menu w-72 hidden z-10">
                <div class="hs-dropdown-open:ease-in hs-dropdown-open:opacity-100 hs-dropdown-open:scale-100 transition ease-out scale-95 duration-200 origin-top-left ti-dropdown-menu block"
                    aria-labelledby="hs-dropdown-transform-style" data-hs-transition>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                        Newsletter
                    </a>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                        Purchases
                    </a>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                        Downloads
                    </a>
                    <a class="ti-dropdown-item" href="javascript:void(0);">
                        Team Account
                    </a>
                </div>
            </div>
        </div>

Dropdown Item Checkbox


        <div class="hs-dropdown ti-dropdown" data-hs-dropdown-auto-close="inside">
            <button id="hs-dropdown-item-checkbox1" type="button" class="ti-btn ti-btn-primary-full hs-dropdown-toggle ti-dropdown-toggle">
                Actions
                <svg class="hs-dropdown-open:rotate-180 ti-dropdown-caret" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
                </svg>
            </button>

            <div class="hs-dropdown-menu ti-dropdown-menu hidden" aria-labelledby="hs-dropdown-item-checkbox1" >
                <div class="relative flex items-start py-2 px-3 rounded-sm hover:bg-gray-100 dark:hover:bg-black/20">
                    <div class="flex items-center h-5 mt-1">
                        <input id="hs-dropdown-item-checkbox-delete" name="hs-dropdown-item-checkbox-delete" type="checkbox" class="form-check-input" aria-describedby="hs-dropdown-item-checkbox-delete-description" checked="">
                    </div>
                    <label for="hs-dropdown-item-checkbox-delete" class="ms-3.5">
                        <span class="block text-sm font-semibold text-gray-800 dark:text-white">Delete</span>
                        <span id="hs-dropdown-item-checkbox-delete-description" class="block text-sm text-gray-600 dark:text-white/70">Notify me
                            when this action happens.</span>
                    </label>
                </div>
                <div class="relative flex items-start py-2 px-3 rounded-sm hover:bg-gray-100 dark:hover:bg-black/20">
                    <div class="flex items-center h-5 mt-1">
                        <input id="hs-dropdown-item-checkbox-archive1" name="hs-dropdown-item-checkbox-archive1" type="checkbox" class="form-check-input" aria-describedby="hs-dropdown-item-checkbox-archive-description">
                    </div>
                    <label for="hs-dropdown-item-checkbox-archive1" class="ms-3.5">
                        <span class="block text-sm font-semibold text-gray-800 dark:text-white">Archive</span>
                        <span id="hs-dropdown-item-checkbox-archive-description" class="block text-sm text-gray-600 dark:text-white/70">Notify me
                            when this action happens.</span>
                    </label>
                </div>
            </div>
        </div>

Dropdown Item Radio


        <div class="hs-dropdown ti-dropdown" data-hs-dropdown-auto-close="inside">
            <button id="hs-dropdown-item-checkbox2" type="button" class="ti-btn ti-btn-primary-full hs-dropdown-toggle ti-dropdown-toggle">
                Actions
                <svg class="hs-dropdown-open:rotate-180 ti-dropdown-caret" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
                </svg>
            </button>

            <div class="hs-dropdown-menu ti-dropdown-menu hidden" aria-labelledby="hs-dropdown-item-checkbox2" >
                <div class="relative flex items-start py-2 px-3 rounded-sm hover:bg-gray-100 dark:hover:bg-black/20">
                    <div class="flex items-center h-5 mt-1">
                        <input id="hs-dropdown-item-radio-delete" name="hs-dropdown-item-radio" type="radio" class="form-check-input" aria-describedby="hs-dropdown-item-radio-delete-description" checked="">
                    </div>
                    <label for="hs-dropdown-item-radio-delete" class="ms-3.5">
                        <span class="block text-sm font-semibold text-gray-800 dark:text-white">Delete</span>
                        <span id="hs-dropdown-item-radio-delete-description" class="block text-sm text-gray-600 dark:text-white/70">Notify me
                            when this action happens.</span>
                    </label>
                </div>
                <div class="relative flex items-start py-2 px-3 rounded-sm hover:bg-gray-100 dark:hover:bg-black/20">
                    <div class="flex items-center h-5 mt-1">
                        <input id="hs-dropdown-item-radio-archive" name="hs-dropdown-item-radio" type="radio" class="form-check-input" aria-describedby="hs-dropdown-item-radio-archive-description">
                    </div>
                    <label for="hs-dropdown-item-radio-archive" class="ms-3.5">
                        <span class="block text-sm font-semibold text-gray-800 dark:text-white">Archive</span>
                        <span id="hs-dropdown-item-radio-archive-description" class="block text-sm text-gray-600 dark:text-white/70">Notify me
                            when this action happens.</span>
                    </label>
                </div>
            </div>
        </div>

Dropdowns With Icon Sizes


        <div class="hs-dropdown ti-dropdown">
            <button aria-label="button" id="hs-dropdown-default16" type="button"
                class="hs-dropdown-toggle ti-btn p-0 flex-shrink-0 h-[2.375rem] w-[2.375rem] ti-btn-primary-full">
                <svg class="fill-white ti-dropdown-icon" xmlns="http://www.w3.org/2000/svg"
                    width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path
                        d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
                    </path>
                </svg>
            </button>
            <div class="hs-dropdown-menu ti-dropdown-menu"
                aria-labelledby="hs-dropdown-default16">
                <a class="ti-dropdown-item" href="javascript:void(0);">
                    Newsletter
                </a>
                <a class="ti-dropdown-item" href="javascript:void(0);">
                    Purchases
                </a>
                <a class="ti-dropdown-item" href="javascript:void(0);">
                    Downloads
                </a>
                <a class="ti-dropdown-item" href="javascript:void(0);">
                    Team Account
                </a>
            </div>
        </div>
        <div class="hs-dropdown ti-dropdown">
            <button aria-label="button" id="hs-dropdown-default17" type="button"
                class="hs-dropdown-toggle ti-btn p-0 flex-shrink-0 h-[2.875rem] w-[2.875rem] ti-btn-primary-full">
                <svg class="fill-white ti-dropdown-icon" xmlns="http://www.w3.org/2000/svg"
                    width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path
                        d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
                    </path>
                </svg>
            </button>
            <div class="hs-dropdown-menu ti-dropdown-menu"
                aria-labelledby="hs-dropdown-default17">
                <a class="ti-dropdown-item" href="javascript:void(0);">
                    Newsletter
                </a>
                <a class="ti-dropdown-item" href="javascript:void(0);">
                    Purchases
                </a>
                <a class="ti-dropdown-item" href="javascript:void(0);">
                    Downloads
                </a>
                <a class="ti-dropdown-item" href="javascript:void(0);">
                    Team Account
                </a>
            </div>
        </div>
        <div class="hs-dropdown ti-dropdown">
            <button aria-label="button" id="hs-dropdown-default18" type="button"
                class="hs-dropdown-toggle ti-btn p-0 flex-shrink-0 h-[3.875rem] w-[3.875rem] ti-btn-primary-full">
                <svg class="fill-white ti-dropdown-icon" xmlns="http://www.w3.org/2000/svg"
                    width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path
                        d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
                    </path>
                </svg>
            </button>
            <div class="hs-dropdown-menu ti-dropdown-menu"
                aria-labelledby="hs-dropdown-default18">
                <a class="ti-dropdown-item" href="javascript:void(0);">
                    Newsletter
                </a>
                <a class="ti-dropdown-item" href="javascript:void(0);">
                    Purchases
                </a>
                <a class="ti-dropdown-item" href="javascript:void(0);">
                    Downloads
                </a>
                <a class="ti-dropdown-item" href="javascript:void(0);">
                    Team Account
                </a>
            </div>
        </div>

Switcher

Notifications

Dropdown Dividers

Dropdown With Icons

Dropdown With Title

Dropdown With Header

Custom Trigger Dropdown

Custom Trigger Dropdown

Dropdown With Slide Up Animation

Dropdown With Transform Style

Dropdown Item Checkbox

Dropdown Item Radio

Dropdowns With Icon Sizes

Switcher

Petey Cruiser

Jimmy Changa

Graham Cracker

Donatella Nobatti

Anne Fibbiyon

New files available

Updates Available

New Order Received

New review received

22 verified registrations

Project has been approved

Petey Cruiser

Notifications

Daneil Scott

Valex Video call

Daneil Scott

Calling...

Valex Voice call

Daneil Scott

Calling...

Dropdown

Dropdown header

Dropdown Dividers

Dropdown With Icons

Dropdown With Title

Dropdown With Header

Custom Trigger Dropdown

Custom Trigger Dropdown

Dropdown With Slide Up Animation

Dropdown With Transform Style

Dropdown Item Checkbox

Dropdown Item Radio

Dropdowns With Icon Sizes