Dropdowns | Dreams AI Agent - Agent Builder Tailwind Admin Template

Basic Dropdown



<div class="text-center">
    <div class="hs-dropdown [--placement:bottom-right] [--auto-close:inside] relative inline-flex">
<button type="button" class="hs-dropdown-toggle cursor-pointer py-1.75 px-2 inline-flex items-center gap-x-2 text-sm font-normal rounded-lg border border-border-color bg-white text-gray-800 hover:bg-white focus:outline-hidden focus:white" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
    Dropdown<i class="icon-chevron-down"></i>
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-50 bg-white border border-border-color shadow rounded-lg mt-2 z-1" role="menu" aria-orientation="vertical">
    <div class="p-2 space-y-1">
        <a class="flex items-center px-4 py-1.75 rounded-lg text-gray-900 hover:bg-light hover:text-primary focus:outline-hidden hover:bg-primary-50 focus:bg-white" href="#">
            Action
        </a>
        <a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-gray-900 hover:bg-light hover:text-primary focus:outline-hidden hover:bg-primary-50 focus:bg-white" href="#">
            Another Action
        </a>
        <a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-gray-900 hover:bg-light hover:text-primary focus:outline-hidden hover:bg-primary-50 focus:bg-white" href="#">
            Other Action
        </a>
        <a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-gray-900 hover:bg-light hover:text-primary focus:outline-hidden hover:bg-primary-50 focus:bg-white" href="#">
            Seperate Action
        </a>
    </div>
</div>
    </div>
</div>

Dropdown with Divider



<div class="text-center">
    <div class="hs-dropdown [--placement:bottom-right] [--auto-close:inside] relative inline-flex">
<button type="button" class="hs-dropdown-toggle cursor-pointer py-1.75 px-2 inline-flex items-center gap-x-2 text-sm font-normal rounded-lg border border-border-color bg-white text-gray-800 hover:bg-white focus:outline-hidden focus:white" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
    Dropdown<i class="icon-chevron-down"></i>
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-50 bg-white border border-border-color shadow rounded-lg mt-2 z-1 divide-y divide-border-color" role="menu" aria-orientation="vertical">
    <div class="p-2 space-y-1">
        <a class="flex items-center px-4 py-1.75 rounded-lg text-gray-900 hover:bg-light hover:text-primary focus:outline-hidden hover:bg-primary-50 focus:bg-white" href="#">
            Action
        </a>
        <a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-gray-900 hover:bg-light hover:text-primary focus:outline-hidden hover:bg-primary-50 focus:bg-white" href="#">
            Another Action
        </a>
    </div>
    <div class="p-2 space-y-1">
        <a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-gray-900 hover:bg-light hover:text-primary focus:outline-hidden hover:bg-primary-50 focus:bg-white" href="#">
            Action
        </a>
        <a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-gray-900 hover:bg-light hover:text-primary focus:outline-hidden hover:bg-primary-50 focus:bg-white" href="#">
            Another Action
        </a>
    </div>
    <div class="p-2 space-y-1">
        <a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-gray-900 hover:bg-light hover:text-primary focus:outline-hidden hover:bg-primary-50 focus:bg-white" href="#">
            Action
        </a>
        <a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-gray-900 hover:bg-light hover:text-primary focus:outline-hidden hover:bg-primary-50 focus:bg-white" href="#">
            Another Action
        </a>
    </div>
</div>
    </div>
</div>

Dropdown with Icons



<div class="text-center">
    <div class="hs-dropdown [--placement:bottom-right] [--auto-close:inside] relative inline-flex">
<button type="button" class="hs-dropdown-toggle cursor-pointer py-1.75 px-2 inline-flex items-center gap-x-2 text-sm font-normal rounded-lg border border-border-color bg-white text-gray-800 hover:bg-white focus:outline-hidden focus:white" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
    Dropdown<i class="icon-chevron-down"></i>
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-50 bg-white border border-border-color shadow rounded-lg mt-2 z-1" role="menu" aria-orientation="vertical">
    <div class="p-2 space-y-1">
        <a class="flex items-center px-4 py-1.75 rounded-lg text-default hover:bg-light hover:text-primary focus:outline-hidden hover:bg-primary-50 focus:bg-white" href="#">
            <i class="icon-eye text-gray-900 me-2"></i>View Details
        </a>
        <a class="flex items-center hover:bg-primary-50 px-4 py-1.75 rounded-lg text-sm text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white" href="#">
            <i class="icon-pencil-line me-2"></i>Edit
        </a>
        <a class="flex items-center hover:bg-primary-50 px-4 py-1.75 rounded-lg text-sm text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white" href="#">
            <i class="icon-trash-2 text-gray-900 me-2"></i>Delete
        </a>
    </div>
</div>
    </div>
</div>

Dropdown with Icons



<div class="text-center">
    <div class="hs-dropdown [--placement:bottom-right] [--auto-close:inside] relative inline-flex">
<button type="button" class="hs-dropdown-toggle cursor-pointer size-8 rounded-full inline-flex items-center justify-center text-sm font-normal border border-border-color bg-white text-gray-800 hover:bg-white focus:outline-hidden focus:white" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
    <i class="icon-ellipsis-vertical"></i>
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-50 bg-white border border-border-color shadow rounded-lg mt-2 z-1" role="menu" aria-orientation="vertical">
    <div class="p-2 space-y-1">
        <a class="flex items-center px-4 py-1.75 rounded-lg text-default hover:bg-light hover:text-primary focus:outline-hidden hover:bg-primary-50 focus:bg-white" href="#">
            <i class="icon-eye text-gray-900 me-2"></i>View Details
        </a>
        <a class="flex items-center hover:bg-primary-50 px-4 py-1.75 rounded-lg text-sm text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white" href="#">
            <i class="icon-pencil-line me-2"></i>Edit
        </a>
        <a class="flex items-center hover:bg-primary-50 px-4 py-1.75 rounded-lg text-sm text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white" href="#">
            <i class="icon-trash-2 text-gray-900 me-2"></i>Delete
        </a>
    </div>
</div>
    </div>
</div>

Dropdown with Simple Header



<div class="text-center">
    <div class="hs-dropdown [--placement:bottom-right] [--auto-close:inside] relative inline-flex">
<button type="button" class="hs-dropdown-toggle cursor-pointer py-1.75 px-2 inline-flex items-center gap-x-2 text-sm font-normal rounded-lg border border-border-color bg-white text-gray-800 hover:bg-white focus:outline-hidden focus:white" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
    Dropdown<i class="icon-chevron-down"></i>
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-50 bg-white border border-border-color shadow rounded-lg mt-2 z-1 divide-y divide-border-color" role="menu" aria-orientation="vertical">
    <div class="py-3 px-6 text-start">
        <p class="mb-1">Signed as</p>
        <p class="font-semibold text-gray-900">admin@example.com</p>
    </div>
    <div class="p-2 space-y-1">
        <a class="flex items-center px-4 py-1.75 rounded-lg text-gray-900 hover:bg-light hover:text-primary focus:outline-hidden hover:bg-primary-50 focus:bg-white" href="#">
            Profile
        </a>
        <a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-gray-900 hover:bg-light hover:text-primary focus:outline-hidden hover:bg-primary-50 focus:bg-white" href="#">
            Settings
        </a>
    </div>
    <div class="p-2 space-y-1">
        <a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-gray-900 hover:bg-light hover:text-primary focus:outline-hidden hover:bg-primary-50 focus:bg-white" href="#">
            Sign out
        </a>
    </div>
</div>
    </div>
</div>

Dropdown with Icons



<div class="text-center">
    <div class="hs-dropdown [--placement:bottom-right] [--auto-close:inside] relative inline-flex">
<button type="button" class="hs-dropdown-toggle cursor-pointer py-1.75 px-2 inline-flex items-center gap-x-2 text-sm font-normal rounded-lg border border-border-color bg-white text-gray-800 hover:bg-white focus:outline-hidden focus:white" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
    Dropdown<i class="icon-chevron-down"></i>
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-50 bg-white border border-border-color shadow rounded-lg mt-2 z-1" role="menu" aria-orientation="vertical">
    <div class="p-2 space-y-1">
        <a class="flex items-center px-4 py-1.75 rounded-lg text-default hover:bg-light hover:text-primary focus:outline-hidden hover:bg-primary-50 focus:bg-white" href="#">
            <i class="icon-eye text-gray-900 me-2"></i>View Details
        </a>
        <a class="flex items-center hover:bg-primary-50 px-4 py-1.75 rounded-lg text-sm text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white" href="#">
            <i class="icon-pencil-line me-2"></i>Edit
        </a>
        <a class="flex items-center hover:bg-primary-50 px-4 py-1.75 rounded-lg text-sm text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white" href="#">
            <i class="icon-trash-2 text-gray-900 me-2"></i>Delete
        </a>
    </div>
</div>
    </div>
</div>