Tailwind CSS Dropdowns

The Dropdown component is designed to present users with a neat and organized list of actions or additional content.

Default Dropdown

The default dropdown menu appearance.

<div class="dropdown">
 <button
    class="btn inline-flex items-center gap-x-2 bg-green-600 text-white border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100 dropdown-toggle"
    type="button"
    data-bs-toggle="dropdown"
    aria-expanded="false"
    >
 Dropdown
 </button>
 <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
 </ul>
 </div>

Hover Dropdown

The default trigger mode is click, you can change it to hover . 

<div class="dropdown dropdown-animation">
 <button
    class="btn inline-flex items-center gap-x-2 bg-green-600 text-white border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100 dropdown-toggle"
    type="button"
    data-bs-toggle="dropdown"
    aria-expanded="false"
    >
 Dropdown
 </button>
 <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
 </ul>
 </div>

Icons

The default dropdown menu with icons.

	<div class="dropdown">
	<button
		class="btn inline-flex items-center gap-x-2 bg-green-600 text-white border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100 dropdown-toggle"
		type="button"
		data-bs-toggle="dropdown"
		aria-expanded="false"
	>
		Dropdown
	</button>
	<div class="dropdown-menu dropdown-menu-lg lg:right-0 xl:right-auto" aria-labelledby="navbarDropdownDocs">
		<a class="dropdown-item items-start" href="../docs/index.html">
			<div>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="icon icon-tabler icon-tabler-file-text text-green-500"
					width="24"
					height="24"
					viewBox="0 0 24 24"
					stroke-width="2"
					stroke="currentColor"
					fill="none"
					stroke-linecap="round"
					stroke-linejoin="round"
				>
					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
					<path d="M14 3v4a1 1 0 0 0 1 1h4" />
					<path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
					<path d="M9 9l1 0" />
					<path d="M9 13l6 0" />
					<path d="M9 17l6 0" />
				</svg>
			</div>
			<div class="ml-3 leading-none">
				<h6 class="mb-1">Documentations</h6>
				<p class="small">Browse the all documentation</p>
			</div>
		</a>
		<a class="dropdown-item items-start" href="../docs/changelog.html">
			<div>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					class="icon icon-tabler icon-tabler-box-multiple text-green-500"
					width="24"
					height="24"
					viewBox="0 0 24 24"
					stroke-width="2"
					stroke="currentColor"
					fill="none"
					stroke-linecap="round"
					stroke-linejoin="round"
				>
					<path stroke="none" d="M0 0h24v24H0z" fill="none" />
					<path d="M7 3m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" />
					<path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2" />
				</svg>
			</div>
			<div class="ml-3 leading-none">
				<h6 class="mb-1">
					Changelog
					<span class="text-green-600 ml-1">v1.0.0</span>
				</h6>
				<p class="small">See what's new</p>
			</div>
		</a>
	</div>
</div>