Dropdowns
- Ui Elements
- Dropdowns
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"
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"
aria-expanded="false">
Dropdown link<i
class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
</a>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuLink">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
here</a></li>
</ul>
</div>
</div>Single Botton Dropdowns
<div class="ti-btn-list">
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button class="ti-btn ti-btn-primary-full ti-dropdown-toggle" type="button"
id="dropdownMenuButton1"
aria-expanded="false">
Action<i
class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button class="ti-btn ti-btn-secondary-full ti-dropdown-toggle"
type="button" id="dropdownMenuButton1"
aria-expanded="false">
Action<i
class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button class="ti-btn ti-btn-success-full ti-dropdown-toggle" type="button"
id="dropdownMenuButton1"
aria-expanded="false">
Action<i
class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button class="ti-btn ti-btn-info-full ti-dropdown-toggle" type="button"
id="dropdownMenuButton1"
aria-expanded="false">
Action<i
class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button class="ti-btn ti-btn-warning-full ti-dropdown-toggle" type="button"
id="dropdownMenuButton1"
aria-expanded="false">
Action<i
class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button class="ti-btn ti-btn-danger-full ti-dropdown-toggle" type="button"
id="dropdownMenuButton1"
aria-expanded="false">
Action<i
class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
</div>Rounded dropdown buttons
<div class="ti-btn-list">
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button class="ti-btn ti-btn-primary-full ti-dropdown-toggle !rounded-full"
type="button" id="dropdownMenuButton1"
aria-expanded="false">
Action<i
class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button
class="ti-btn ti-btn-secondary-full ti-dropdown-toggle !rounded-full"
type="button" id="dropdownMenuButton1"
aria-expanded="false">
Action<i
class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button class="ti-btn ti-btn-success-full ti-dropdown-toggle !rounded-full"
type="button" id="dropdownMenuButton1"
aria-expanded="false">
Action<i
class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button class="ti-btn ti-btn-info-full ti-dropdown-toggle !rounded-full"
type="button" id="dropdownMenuButton1"
aria-expanded="false">
Action<i
class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button class="ti-btn ti-btn-warning-full ti-dropdown-toggle !rounded-full"
type="button" id="dropdownMenuButton1"
aria-expanded="false">
Action<i
class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button class="ti-btn ti-btn-danger-full ti-dropdown-toggle !rounded-full"
type="button" id="dropdownMenuButton1"
aria-expanded="false">
Action<i
class="ri-arrow-down-s-line align-middle ms-1 inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
</div>Outline Botton Dropdowns
<div class="ti-btn-list">
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button class="ti-btn ti-btn-outline-primary ti-dropdown-toggle"
type="button" id="dropdownMenuButton1"
aria-expanded="false">
Action<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button class="ti-btn ti-btn-outline-secondary ti-dropdown-toggle"
type="button" id="dropdownMenuButton1"
aria-expanded="false">
Action<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button class="ti-btn ti-btn-outline-success ti-dropdown-toggle"
type="button" id="dropdownMenuButton1"
aria-expanded="false">
Action<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button class="ti-btn ti-btn-outline-info ti-dropdown-toggle" type="button"
id="dropdownMenuButton1"
aria-expanded="false">
Action<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button class="ti-btn ti-btn-outline-warning ti-dropdown-toggle"
type="button" id="dropdownMenuButton1"
aria-expanded="false">
Action<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button class="ti-btn ti-btn-outline-danger ti-dropdown-toggle"
type="button" id="dropdownMenuButton1"
aria-expanded="false">
Action<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
</div>Outline Botton Dropdowns
<div class="ti-btn-list">
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button
class="ti-btn ti-btn-outline-primary ti-dropdown-toggle !rounded-full"
type="button" id="dropdownMenuButton1"
aria-expanded="false">
Action<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button
class="ti-btn ti-btn-outline-secondary ti-dropdown-toggle !rounded-full"
type="button" id="dropdownMenuButton1"
aria-expanded="false">
Action<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button
class="ti-btn ti-btn-outline-success ti-dropdown-toggle !rounded-full"
type="button" id="dropdownMenuButton1"
aria-expanded="false">
Action<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button class="ti-btn ti-btn-outline-info ti-dropdown-toggle !rounded-full"
type="button" id="dropdownMenuButton1"
aria-expanded="false">
Action<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button
class="ti-btn ti-btn-outline-warning ti-dropdown-toggle !rounded-full"
type="button" id="dropdownMenuButton1"
aria-expanded="false">
Action<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button
class="ti-btn ti-btn-outline-danger ti-dropdown-toggle !rounded-full"
type="button" id="dropdownMenuButton1"
aria-expanded="false">
Action<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
</div>Split Buttons
<div class="ti-btn-list">
<div class="ti-btn-group !m-0">
<div class="hs-dropdown ti-dropdown">
<button
class="ti-btn ti-btn-primary-full !me-0 !rounded-e-none ti-dropdown-toggle"
type="button" id="dropdownMenuButton1"
aria-expanded="false">
Action
</button>
<button
class="ti-btn ti-btn-primary-full opacity-[0.85] !rounded-s-none"><i
class="ri-arrow-down-s-line align-middle inline-block"></i></button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group !m-0">
<div class="hs-dropdown ti-dropdown">
<button
class="ti-btn ti-btn-secondary-full !me-0 !rounded-e-none ti-dropdown-toggle"
type="button" id="dropdownMenuButton1"
aria-expanded="false">
Action
</button>
<button
class="ti-btn ti-btn-secondary-full opacity-[0.85] !rounded-s-none"><i
class="ri-arrow-down-s-line align-middle inline-block"></i></button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group !m-0">
<div class="hs-dropdown ti-dropdown">
<button
class="ti-btn ti-btn-success-full !me-0 !rounded-e-none ti-dropdown-toggle"
type="button" id="dropdownMenuButton1"
aria-expanded="false">
Action
</button>
<button
class="ti-btn ti-btn-success-full opacity-[0.85] !rounded-s-none"><i
class="ri-arrow-down-s-line align-middle inline-block"></i></button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group !m-0">
<div class="hs-dropdown ti-dropdown">
<button
class="ti-btn ti-btn-info-full !me-0 !rounded-e-none ti-dropdown-toggle"
type="button" id="dropdownMenuButton1"
aria-expanded="false">
Action
</button>
<button
class="ti-btn ti-btn-info-full opacity-[0.85] !rounded-s-none"><i
class="ri-arrow-down-s-line align-middle inline-block"></i></button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group !m-0">
<div class="hs-dropdown ti-dropdown">
<button
class="ti-btn ti-btn-warning-full !me-0 !rounded-e-none ti-dropdown-toggle"
type="button" id="dropdownMenuButton1"
aria-expanded="false">
Action
</button>
<button
class="ti-btn ti-btn-warning-full opacity-[0.85] !rounded-s-none "><i
class="ri-arrow-down-s-line align-middle inline-block"></i></button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group !m-0">
<div class="hs-dropdown ti-dropdown">
<button
class="ti-btn ti-btn-danger-full !me-0 !rounded-e-none ti-dropdown-toggle"
type="button" id="dropdownMenuButton1"
aria-expanded="false">
Action
</button>
<button
class="ti-btn ti-btn-danger-full opacity-[0.85] !rounded-s-none"><i
class="ri-arrow-down-s-line align-middle inline-block"></i></button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something
else here</a></li>
</ul>
</div>
</div>
</div>Dropdown Sizing
<div class="ti-btn-group my-1 me-2 ti-dropdown hs-dropdown">
<button class="ti-btn-primary-full ti-btn-lg ti-dropdown-toggle" type="button"
aria-expanded="false">
Large button<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another action</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Separated link</a>
</li>
</ul>
</div>
<div class="ti-btn-group my-1 me-2">
<div class="hs-dropdown ti-dropdown">
<button
class="ti-btn-lg ti-btn-light !me-0 !rounded-e-none !border-0 ti-dropdown-toggle"
type="button" id="dropdownMenuButton1"
aria-expanded="false">
Large split button
</button>
<button
class="ti-btn ti-btn-light opacity-[0.85] !rounded-s-none"><i
class="ri-arrow-down-s-line align-middle inline-block"></i></button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
here</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group my-1 me-2">
<div class="ti-btn-group my-1 me-2 ti-dropdown hs-dropdown">
<button
class="ti-btn ti-btn-primary-full !py-1 !px-4 !text-[0.75rem] ti-dropdown-toggle"
type="button" aria-expanded="false">
Small button<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Separated
link</a></li>
</ul>
</div>
</div>
<div class="ti-btn-group my-1 me-2">
<div class="hs-dropdown ti-dropdown">
<button
class="ti-btn !py-1 !px-4 !text-[0.75rem] ti-btn-light !me-0 !rounded-e-none ti-dropdown-toggle"
type="button" id="dropdownMenuButton1"
aria-expanded="false">
Small split button
</button>
<button
class="ti-btn !py-1 !px-4 !text-[0.75rem] ti-btn-light opacity-[0.85] !rounded-s-none"><i
class="ri-arrow-down-s-line align-middle inline-block"></i></button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuButton1">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
here</a></li>
</ul>
</div>
</div>Dropup
<div class="hs-dropdown ti-dropdown [--placement:top-left] m-1">
<button id="hs-dropup" type="button"
class="hs-dropdown-toggle ti-dropdown-toggle ti-btn ti-btn-primary-full !py-2">
Dropup
<svg class="hs-dropdown-open:rotate-180 ti-dropdown-caret !text-white"
width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div class="hs-dropdown-menu mt-0 transition-none ti-dropdown-menu hidden"
aria-labelledby="hs-dropup">
<a class="ti-dropdown-item" href="javascript:void(0);">
Action
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
Another action
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
Something else here
</a>
</div>
</div>
<div class="ti-dropdown m-1">
<button type="button"
class="relative ti-dropdown-toggle ti-btn ti-btn-secondary-full !py-1 !rounded-e-none !me-0">
Split dropup
</button>
<div class="hs-dropdown ti-dropdown [--placement:top-left]">
<button id="hs-split-dropup" type="button"
class="hs-dropdown-toggle relative ti-btn ti-btn-secondary-full !opacity-[0.85] !rounded-s-none ti-dropdown-toggle">
<span class="sr-only">Toggle Dropdown</span>
<svg class="hs-dropdown-open:rotate-180 ti-dropdown-caret !text-white"
width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div class="hs-dropdown-menu transition-none mt-0 ti-dropdown-menu hidden"
aria-labelledby="hs-split-dropup">
<a class="ti-dropdown-item" href="javascript:void(0);">
Action
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
Another action
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
Something else here
</a>
</div>
</div>
</div>Dropup right
<div class="hs-dropdown ti-dropdown [--placement:right-top] m-1">
<button id="hs-dropright" type="button"
class="hs-dropdown-toggle ti-dropdown-toggle ti-btn ti-btn-primary-full !py-2">
Dropright
<svg class="w-auto h-2.5 ti-dropdown-caret !text-white" width="16" height="16"
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu transition-none hidden"
aria-labelledby="hs-dropright">
<a class="ti-dropdown-item" href="javascript:void(0);">
Action
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
Another action
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
Something else here
</a>
<a>
<hr class="dropdown-divider">
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
Separated link
</a>
</div>
</div>
<div class="hs-dropdown ti-dropdown [--placement:right-top] m-1">
<button type="button"
class="hs-dropdown-toggle relative ti-btn ti-btn-secondary-full !py-2 !rounded-e-none ti-dropdown-toggle !me-0">
Split dropright
</button>
<div class="hs-dropdown ti-dropdown [--placement:right-top]">
<button id="hs-split-dropright" type="button"
class="hs-dropdown-toggle relative ti-dropdown-toggle !opacity-[0.85] rounded-none ti-btn ti-btn-secondary-full !rounded-s-none">
<span class="sr-only">Toggle Dropdown</span>
<svg class="w-auto h-2.5 ti-dropdown-caret !text-white" width="16"
height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu transition-none hidden"
aria-labelledby="hs-split-dropright">
<a class="ti-dropdown-item" href="javascript:void(0);">
Action
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
Another action
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
Something else here
</a>
<a>
<hr class="dropdown-divider">
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
Separated link
</a>
</div>
</div>
</div>Dropup left
<div class="hs-dropdown ti-dropdown [--placement:left-top] m-1">
<button id="hs-dropright" type="button"
class="hs-dropdown-toggle ti-dropdown-toggle ti-btn ti-btn-primary-full !py-2">
<svg class="w-auto h-2.5 text-white" width="16" height="16" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11 1L5.31305 7.16086C5.13625 7.35239 5.13625 7.64761 5.31305 7.83914L11 14"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
Dropleft
</button>
<div class="hs-dropdown-menu ti-dropdown-menu transition-none hidden"
aria-labelledby="hs-dropright">
<a class="ti-dropdown-item" href="javascript:void(0);">
Action
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
Another action
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
Something else here
</a>
<a>
<hr class="dropdown-divider">
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
Separated link
</a>
</div>
</div>
<div class="hs-dropdown ti-dropdown [--placement:left-top] m-1">
<div class="hs-dropdown ti-dropdown [--placement:left-top]">
<button id="hs-split-dropright" type="button"
class="hs-dropdown-toggle relative ti-dropdown-toggle !opacity-[0.85] rounded-none ti-btn ti-btn-secondary-full !rounded-s-none">
<span class="sr-only">Toggle Dropdown</span>
<svg class="w-auto h-2.5 text-white" width="16" height="16"
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11 1L5.31305 7.16086C5.13625 7.35239 5.13625 7.64761 5.31305 7.83914L11 14"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu transition-none hidden"
aria-labelledby="hs-split-dropright">
<a class="ti-dropdown-item" href="javascript:void(0);">
Action
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
Another action
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
Something else here
</a>
<a>
<hr class="dropdown-divider">
</a>
<a class="ti-dropdown-item" href="javascript:void(0);">
Separated link
</a>
</div>
</div>
<button type="button"
class="hs-dropdown-toggle relative ti-btn ti-btn-secondary-full !py-2 !rounded-e-none ti-dropdown-toggle !me-0">
Split dropleft
</button>
</div>Active
<div class="hs-dropdown ti-dropdown">
<button type="button" class="ti-btn ti-btn-primary-full ti-dropdown-toggle !py-2"
aria-expanded="false">
Dropstart<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Regular link</a></li>
<li><a class="ti-dropdown-item active" href="javascript:void(0);"
aria-current="true">Active
link</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another link</a></li>
</ul>
</div>Disabled
<div class="hs-dropdown ti-dropdown">
<button type="button" class="ti-btn-primary-full ti-dropdown-toggle !py-2"
aria-expanded="false">
Dropstart<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Regular link</a></li>
<li><a class="ti-dropdown-item disabled" href="javascript:void(0);"
aria-current="true">Active
link</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another link</a></li>
</ul>
</div>Auto close behavior
<div class="ti-btn-list">
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button class="ti-btn ti-btn-primary-full ti-dropdown-toggle" type="button"
id="defaultDropdown"
aria-expanded="false">
Default dropdown<i
class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="defaultDropdown">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
</ul>
</div>
</div>
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button class="ti-btn ti-btn-secondary-full ti-dropdown-toggle"
type="button" id="dropdownMenuClickableOutside"
aria-expanded="false">
Clickable outside<i
class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="defaultDropdown">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
</ul>
</div>
</div>
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button class="ti-btn ti-btn-info-full ti-dropdown-toggle" type="button"
id="dropdownMenuClickableInside"
aria-expanded="false">
Clickable inside<i
class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuClickableInside">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
</ul>
</div>
</div>
<div class="ti-btn-group">
<div class="hs-dropdown ti-dropdown">
<button class="ti-btn ti-btn-warning-full ti-dropdown-toggle" type="button"
id="dropdownMenuClickable"
aria-expanded="false">
Manual close<i
class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden"
aria-labelledby="dropdownMenuClickable">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
</ul>
</div>
</div>
</div>dropdowns with Forms
<div class="hs-dropdown ti-dropdown">
<button class="ti-btn ti-btn-secondary-full ti-dropdown-toggle !py-2" type="button"
id="dropdownMenu2" aria-expanded="false">
Dropdown<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<div class="hs-dropdown-menu ti-dropdown-menu hidden">
<form class="!px-6 !py-4">
<div class="mb-4">
<label for="exampleDropdownFormEmail1" class="form-label">Email
address</label>
<input type="email" class="form-control w-full !rounded-md"
id="exampleDropdownFormEmail1" placeholder="email@example.com">
</div>
<div class="mb-4">
<label for="exampleDropdownFormPassword1"
class="form-label">Password</label>
<input type="password" class="form-control w-full !rounded-md"
id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="mb-4">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
</div>
<button type="submit" class="ti-btn 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"
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"
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"
aria-expanded="false">
Left-aligned, right-aligned lg<i
class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hs-dropdown-menu hidden lg:ti-dropdown-menu-end "
aria-labelledby="hs-dropdown-left-but-right-on-lg">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
</ul>
</div>
<div class="ti-dropdown hs-dropdown" data-hs-dropdown-strategy="absolute">
<button type="button" id="hs-dropdown-right-but-left-on-lg"
class="ti-btn ti-btn-warning-full ti-dropdown-toggle mb-0 !py-2"
aria-expanded="false">
Right-aligned, left-aligned lg<i
class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hs-dropdown-menu hidden ti-dropdown-menu-end hs-dropdown-menu lg:ti-dropdown-menu-start"
aria-labelledby="hs-dropdown-right-but-left-on-lg">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
</ul>
</div>
<div class="hs-dropdown ti-dropdown [--placement:left-top] m-1">
<button id="hs-dropright" type="button"
class="hs-dropdown-toggle ti-dropdown-toggle ti-btn ti-btn-success-full !py-2">
<svg class="w-auto h-2.5 text-white" width="16" height="16"
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M11 1L5.31305 7.16086C5.13625 7.35239 5.13625 7.64761 5.31305 7.83914L11 14"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
Dropstart
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu transition-none hidden"
aria-labelledby="hs-dropright">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
</ul>
</div>
<div class="hs-dropdown ti-dropdown [--placement:right-top] m-1">
<button id="hs-dropright" type="button"
class="hs-dropdown-toggle ti-dropdown-toggle ti-btn ti-btn-primary-full !py-2">
Dropend
<svg class="w-auto h-2.5 ti-dropdown-caret !text-white" width="16"
height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu transition-none hidden"
aria-labelledby="hs-dropright">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
</ul>
</div>
<div class="hs-dropdown ti-dropdown [--placement:top-left] m-1">
<button id="hs-dropup" type="button"
class="hs-dropdown-toggle ti-dropdown-toggle ti-btn ti-btn-success-full !py-2">
Dropup
<svg class="hs-dropdown-open:rotate-180 ti-dropdown-caret !text-white"
width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M2 11L8.16086 5.31305C8.35239 5.13625 8.64761 5.13625 8.83914 5.31305L15 11"
stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</button>
<ul class="hs-dropdown-menu mt-0 transition-none ti-dropdown-menu hidden"
aria-labelledby="hs-dropup">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Menu item</a>
</li>
</ul>
</div>
</div>Dark Dropdowns
<div class="ti-dropdown hs-dropdown">
<button class="ti-btn ti-btn-dark ti-dropdown-toggle !py-2" type="button"
id="dropdownMenuButton3" aria-expanded="false">
Dropdown button<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul
class="hs-dropdown-menu ti-dropdown-menu hs-dropdown-menu !bg-black dark:!bg-defaulttextcolor/10 hidden">
<li><a class="ti-dropdown-item !text-white dark:!text-defaulttextcolor"
href="javascript:void(0);">Action</a></li>
<li><a class="ti-dropdown-item !text-white dark:!text-defaulttextcolor"
href="javascript:void(0);">Another action</a></li>
<li><a class="ti-dropdown-item !text-white dark:!text-defaulttextcolor"
href="javascript:void(0);">Something else here</a></li>
</ul>
</div>Custom Dropdown Menu's
<div class="ti-btn-list">
<div class="ti-dropdown hs-dropdown">
<button class="ti-btn ti-btn-primary-full ti-dropdown-toggle !py-2"
type="button" aria-expanded="false">
Primary<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul
class="hs-dropdown-menu ti-dropdown-menu hs-dropdown-menu !bg-primary hidden">
<li><a class="ti-dropdown-item !text-white"
href="javascript:void(0);">Action</a></li>
<li><a class="ti-dropdown-item !text-white"
href="javascript:void(0);">Another action</a></li>
<li><a class="ti-dropdown-item !text-white"
href="javascript:void(0);">Something else here</a></li>
</ul>
</div>
<div class="ti-dropdown hs-dropdown">
<button class="ti-btn ti-btn-secondary-full ti-dropdown-toggle !py-2"
type="button" aria-expanded="false">
secondary<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul
class="hs-dropdown-menu ti-dropdown-menu hs-dropdown-menu !bg-secondary hidden">
<li><a class="ti-dropdown-item !text-white"
href="javascript:void(0);">Action</a></li>
<li><a class="ti-dropdown-item !text-white"
href="javascript:void(0);">Another action</a></li>
<li><a class="ti-dropdown-item !text-white"
href="javascript:void(0);">Something else here</a></li>
</ul>
</div>
<div class="ti-dropdown hs-dropdown">
<button class="ti-btn ti-btn-warning-full ti-dropdown-toggle !py-2"
type="button" aria-expanded="false">
warning<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu dropmenu-item-warning hidden">
<li><a class="ti-dropdown-item active" href="javascript:void(0);">Active</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
here</a></li>
</ul>
</div>
<div class="ti-dropdown hs-dropdown">
<button class="ti-btn ti-btn-info-full ti-dropdown-toggle !py-2" type="button"
aria-expanded="false">
info<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu dropmenu-item-info hidden">
<li><a class="ti-dropdown-item active" href="javascript:void(0);">Active</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
here</a></li>
</ul>
</div>
<div class="ti-dropdown hs-dropdown">
<button class="ti-btn ti-btn-success ti-dropdown-toggle !py-2" type="button"
aria-expanded="false">
success<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu dropmenu-light-success hidden">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item active" href="javascript:void(0);">Active</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
here</a></li>
</ul>
</div>
<div class="ti-dropdown hs-dropdown">
<button class="ti-btn ti-btn-danger ti-dropdown-toggle !py-2" type="button"
aria-expanded="false">
danger<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu dropmenu-light-danger hidden">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item active" href="javascript:void(0);">Active</a>
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
here</a></li>
</ul>
</div>
</div>Ghost Button Dropdowns
<div class="ti-btn-list">
<div class="ti-dropdown hs-dropdown">
<button type="button"
class="ti-btn ti-btn-ghost-primary ti-dropdown-toggle !py-2 !shadow-none"
aria-expanded="false">
Primary<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Separated
link</a></li>
</ul>
</div>
<div class="ti-dropdown hs-dropdown">
<button type="button"
class="ti-btn ti-btn-ghost-secondary ti-dropdown-toggle !py-2 !shadow-none"
aria-expanded="false">
Secondary<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Separated
link</a></li>
</ul>
</div>
<div class="ti-dropdown hs-dropdown">
<button type="button"
class="ti-btn ti-btn-ghost-success ti-dropdown-toggle !py-2 !shadow-none"
aria-expanded="false">
Success<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Separated
link</a></li>
</ul>
</div>
<div class="ti-dropdown hs-dropdown">
<button type="button" class="ti-btn ti-btn-ghost-info ti-dropdown-toggle !py-2 !shadow-none"
aria-expanded="false">
Info<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Separated
link</a></li>
</ul>
</div>
<div class="ti-dropdown hs-dropdown">
<button type="button"
class="ti-btn ti-btn-ghost-warning ti-dropdown-toggle !py-2 !shadow-none"
aria-expanded="false">
Warning<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Separated
link</a></li>
</ul>
</div>
<div class="ti-dropdown hs-dropdown">
<button type="button"
class="ti-btn ti-btn-ghost-danger ti-dropdown-toggle !py-2 !shadow-none"
aria-expanded="false">
Danger<i class="ri-arrow-down-s-line align-middle inline-block"></i>
</button>
<ul class="hs-dropdown-menu ti-dropdown-menu hidden">
<li><a class="ti-dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Another
action</a></li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Something else
here</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="ti-dropdown-item" href="javascript:void(0);">Separated
link</a></li>
</ul>
</div>
</div>non-interactive dropdown items
Use .ti-dropdown-item-text. to create
non-interactive dropdown items.
- Dropdown item text
- Action
- Another action
- Something else here
<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.
-
Dropdown header
- Action
- Another action
- Something else here
<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
Some example text that's free-flowing within the dropdown menu.
And this is more example text.
<div class="bd-example">
<div class="dropdown-menu border dark:border-defaultborder/10 shadow-sm p-6 text-[#8c9097] dark:text-white/50 text-[0.875rem] max-w-[200px]">
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p class="mb-0">
And this is more example text.
</p>
</div>
</div>