Basic example
<div class="flex justify-center">
<div>
<div class="dropdown relative">
<button
class="
dropdown-toggle
px-6
py-2.5
bg-blue-600
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-blue-700 hover:shadow-lg
focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-blue-800 active:shadow-lg active:text-white
transition
duration-150
ease-in-out
flex
items-center
whitespace-nowrap
"
type="button"
id="dropdownMenuButton1"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown button
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="caret-down"
class="svg-inline--fa fa-caret-down w-2 ml-2"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
fill="currentColor"
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
></path>
</svg>
</button>
<ul
class="
dropdown-menu
min-w-max
absolute
hidden
bg-white
text-base
z-50
float-left
py-2
list-none
text-left
rounded-lg
shadow-lg
mt-1
hidden
m-0
bg-clip-padding
border-none
"
aria-labelledby="dropdownMenuButton1"
>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Another action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Something else here</a
>
</li>
</ul>
</div>
</div>
</div>Link button
<div class="flex justify-center">
<div>
<div class="dropdown relative">
<a
class="
dropdown-toggle
px-6
py-2.5
bg-blue-600
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-blue-700 hover:shadow-lg
focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-blue-800 active:shadow-lg active:text-white
transition
duration-150
ease-in-out
flex
items-center
whitespace-nowrap
"
href="#"
type="button"
id="dropdownMenuButton2"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown link
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="caret-down"
class="svg-inline--fa fa-caret-down w-2 ml-2"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
fill="currentColor"
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
></path>
</svg>
</a>
<ul
class="
dropdown-menu
min-w-max
absolute
hidden
bg-white
text-base
z-50
float-left
py-2
list-none
text-left
rounded-lg
shadow-lg
mt-1
hidden
m-0
bg-clip-padding
border-none
"
aria-labelledby="dropdownMenuButton2"
>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Another action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Something else here</a
>
</li>
</ul>
</div>
</div>
</div>Colors
<div class="flex space-x-2 justify-center">
<div class="dropdown relative">
<button
class="
dropdown-toggle
px-6
py-2.5
bg-blue-600
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-blue-700 hover:shadow-lg
focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-blue-800 active:shadow-lg active:text-white
transition
duration-150
ease-in-out
flex
items-center
whitespace-nowrap
"
type="button"
id="dropdownMenuButton3"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Primary
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="caret-down"
class="svg-inline--fa fa-caret-down w-2 ml-2"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
fill="currentColor"
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
></path>
</svg>
</button>
<ul
class="
dropdown-menu
min-w-max
absolute
hidden
bg-white
text-base
z-50
float-left
py-2
list-none
text-left
rounded-lg
shadow-lg
mt-1
hidden
m-0
bg-clip-padding
border-none
"
aria-labelledby="dropdownMenuButton3"
>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Another action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Something else here</a
>
</li>
</ul>
</div>
<div class="dropdown relative">
<button
class="
dropdown-toggle
px-6
py-2.5
bg-purple-600
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-purple-700 hover:shadow-lg
focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-purple-800 active:shadow-lg active:text-white
transition
duration-150
ease-in-out
flex
items-center
whitespace-nowrap
"
type="button"
id="dropdownMenuButton4"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Secondary
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="caret-down"
class="svg-inline--fa fa-caret-down w-2 ml-2"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
fill="currentColor"
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
></path>
</svg>
</button>
<ul
class="
dropdown-menu
min-w-max
absolute
hidden
bg-white
text-base
z-50
float-left
py-2
list-none
text-left
rounded-lg
shadow-lg
mt-1
hidden
m-0
bg-clip-padding
border-none
"
aria-labelledby="dropdownMenuButton4"
>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Another action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Something else here</a
>
</li>
</ul>
</div>
<div class="dropdown relative">
<button
class="
dropdown-toggle
px-6
py-2.5
bg-green-500
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-green-600 hover:shadow-lg
focus:bg-green-600 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-green-700 active:shadow-lg active:text-white
transition
duration-150
ease-in-out
flex
items-center
whitespace-nowrap
"
type="button"
id="dropdownMenuButton5"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Success
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="caret-down"
class="svg-inline--fa fa-caret-down w-2 ml-2"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
fill="currentColor"
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
></path>
</svg>
</button>
<ul
class="
dropdown-menu
min-w-max
absolute
hidden
bg-white
text-base
z-50
float-left
py-2
list-none
text-left
rounded-lg
shadow-lg
mt-1
hidden
m-0
bg-clip-padding
border-none
"
aria-labelledby="dropdownMenuButton5"
>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Another action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Something else here</a
>
</li>
</ul>
</div>
<div class="dropdown relative">
<button
class="
dropdown-toggle
px-6
py-2.5
bg-red-600
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-red-700 hover:shadow-lg
focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-red-800 active:shadow-lg active:text-white
transition
duration-150
ease-in-out
flex
items-center
whitespace-nowrap
"
type="button"
id="dropdownMenuButton6"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Danger
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="caret-down"
class="svg-inline--fa fa-caret-down w-2 ml-2"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
fill="currentColor"
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
></path>
</svg>
</button>
<ul
class="
dropdown-menu
min-w-max
absolute
hidden
bg-white
text-base
z-50
float-left
py-2
list-none
text-left
rounded-lg
shadow-lg
mt-1
hidden
m-0
bg-clip-padding
border-none
"
aria-labelledby="dropdownMenuButton6"
>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Another action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Something else here</a
>
</li>
</ul>
</div>
<div class="dropdown relative">
<button
class="
dropdown-toggle
px-6
py-2.5
bg-yellow-500
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-yellow-600 hover:shadow-lg
focus:bg-yellow-600 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-yellow-700 active:shadow-lg active:text-white
transition
duration-150
ease-in-out
flex
items-center
whitespace-nowrap
"
type="button"
id="dropdownMenuButton7"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Warning
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="caret-down"
class="svg-inline--fa fa-caret-down w-2 ml-2"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
fill="currentColor"
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
></path>
</svg>
</button>
<ul
class="
dropdown-menu
min-w-max
absolute
hidden
bg-white
text-base
z-50
float-left
py-2
list-none
text-left
rounded-lg
shadow-lg
mt-1
hidden
m-0
bg-clip-padding
border-none
"
aria-labelledby="dropdownMenuButton7"
>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Another action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Something else here</a
>
</li>
</ul>
</div>
<div class="dropdown relative">
<button
class="
dropdown-toggle
px-6
py-2.5
bg-blue-400
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-blue-500 hover:shadow-lg
focus:bg-blue-500 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-blue-600 active:shadow-lg active:text-white
transition
duration-150
ease-in-out
flex
items-center
whitespace-nowrap
"
type="button"
id="dropdownMenuButton8"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Info
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="caret-down"
class="svg-inline--fa fa-caret-down w-2 ml-2"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
fill="currentColor"
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
></path>
</svg>
</button>
<ul
class="
dropdown-menu
min-w-max
absolute
hidden
bg-white
text-base
z-50
float-left
py-2
list-none
text-left
rounded-lg
shadow-lg
mt-1
hidden
m-0
bg-clip-padding
border-none
"
aria-labelledby="dropdownMenuButton8"
>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Another action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Something else here</a
>
</li>
</ul>
</div>
<div class="dropdown relative">
<button
class="
dropdown-toggle
px-6
py-2.5
bg-gray-200
text-gray-700
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-gray-300 hover:shadow-lg
focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-gray-400 active:shadow-lg active:text-white
transition
duration-150
ease-in-out
flex
items-center
whitespace-nowrap
"
type="button"
id="dropdownMenuButton9"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Light
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="caret-down"
class="svg-inline--fa fa-caret-down w-2 ml-2"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
fill="currentColor"
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
></path>
</svg>
</button>
<ul
class="
dropdown-menu
min-w-max
absolute
hidden
bg-white
text-base
z-50
float-left
py-2
list-none
text-left
rounded-lg
shadow-lg
mt-1
hidden
m-0
bg-clip-padding
border-none
"
aria-labelledby="dropdownMenuButton9"
>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Another action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Something else here</a
>
</li>
</ul>
</div>
<div class="dropdown relative">
<button
class="
dropdown-toggle
px-6
py-2.5
bg-gray-800
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-gray-900 hover:shadow-lg
focus:bg-gray-900 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-gray-900 active:shadow-lg active:text-white
transition
duration-150
ease-in-out
flex
items-center
whitespace-nowrap
"
type="button"
id="dropdownMenuButton10"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dark
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="caret-down"
class="svg-inline--fa fa-caret-down w-2 ml-2"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
fill="currentColor"
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
></path>
</svg>
</button>
<ul
class="
dropdown-menu
min-w-max
absolute
hidden
bg-white
text-base
z-50
float-left
py-2
list-none
text-left
rounded-lg
shadow-lg
mt-1
hidden
m-0
bg-clip-padding
border-none
"
aria-labelledby="dropdownMenuButton10"
>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Another action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Something else here</a
>
</li>
</ul>
</div>
</div>Sizing
<div class="flex space-x-2 justify-center items-end">
<div class="dropdown relative">
<button
class="
dropdown-toggle
px-4 py-1.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out
flex
items-center
whitespace-nowrap
"
type="button"
id="dropdownMenuSmallButton"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Small button
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="caret-down"
class="svg-inline--fa fa-caret-down w-2 ml-2"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
fill="currentColor"
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
></path>
</svg>
</button>
<ul
class="
dropdown-menu
min-w-max
absolute
hidden
bg-white
text-base
z-50
float-left
py-2
list-none
text-left
rounded-lg
shadow-lg
mt-1
hidden
m-0
bg-clip-padding
border-none
"
aria-labelledby="dropdownMenuSmallButton"
>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Another action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Something else here</a
>
</li>
</ul>
</div>
<div class="dropdown relative">
<button
class="
dropdown-toggle
px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out
flex
items-center
whitespace-nowrap
"
type="button"
id="dropdownMenuMediumButton"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Medium button
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="caret-down"
class="svg-inline--fa fa-caret-down w-2 ml-2"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
fill="currentColor"
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
></path>
</svg>
</button>
<ul
class="
dropdown-menu
min-w-max
absolute
hidden
bg-white
text-base
z-50
float-left
py-2
list-none
text-left
rounded-lg
shadow-lg
mt-1
hidden
m-0
bg-clip-padding
border-none
"
aria-labelledby="dropdownMenuMediumButton"
>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Another action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Something else here</a
>
</li>
</ul>
</div>
<div class="dropdown relative">
<button
class="
dropdown-toggle
px-7 py-3 bg-blue-600 text-white font-medium text-sm leading-snug uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out
flex
items-center
whitespace-nowrap
"
type="button"
id="dropdownMenuLargeButton"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Large button
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="caret-down"
class="svg-inline--fa fa-caret-down w-2 ml-2"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
fill="currentColor"
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
></path>
</svg>
</button>
<ul
class="
dropdown-menu
min-w-max
absolute
hidden
bg-white
text-base
z-50
float-left
py-2
list-none
text-left
rounded-lg
shadow-lg
mt-1
hidden
m-0
bg-clip-padding
border-none
"
aria-labelledby="dropdownMenuLargeButton"
>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Another action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Something else here</a
>
</li>
</ul>
</div>
</div>Dropup
<div class="flex justify-center">
<div>
<div class="dropup relative">
<button
class="
dropdown-toggle
px-6
py-2.5
bg-blue-600
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-blue-700 hover:shadow-lg
focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-blue-800 active:shadow-lg active:text-white
transition
duration-150
ease-in-out
flex
items-center
whitespace-nowrap
"
type="button"
id="dropdownMenuButton1u"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropup
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="caret-up"
class="svg-inline--fa fa-caret-up w-2 ml-2"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
fill="currentColor"
d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"
></path>
</svg>
</button>
<ul
class="
dropdown-menu
min-w-max
absolute
hidden
bg-white
text-base
z-50
float-left
py-2
list-none
text-left
rounded-lg
shadow-lg
mt-1
hidden
m-0
bg-clip-padding
border-none
"
aria-labelledby="dropdownMenuButton1u"
>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Another action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Something else here</a
>
</li>
</ul>
</div>
</div>
</div>Dropright
<div class="flex justify-center">
<div>
<div class="dropend relative">
<button
class="
dropdown-toggle
px-6
py-2.5
bg-blue-600
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-blue-700 hover:shadow-lg
focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-blue-800 active:shadow-lg active:text-white
transition
duration-150
ease-in-out
flex
items-center
whitespace-nowrap
"
type="button"
id="dropdownMenuButton1e"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropend
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="caret-right"
class="svg-inline--fa fa-caret-right w-1.5 ml-2"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 192 512"
>
<path
fill="currentColor"
d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"
></path>
</svg>
</button>
<ul
class="
dropdown-menu
min-w-max
absolute
hidden
bg-white
text-base
z-50
float-left
py-2
list-none
text-left
rounded-lg
shadow-lg
mt-1
hidden
m-0
bg-clip-padding
border-none
"
aria-labelledby="dropdownMenuButton1e"
>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Another action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Something else here</a
>
</li>
</ul>
</div>
</div>
</div>Dropleft
<div class="flex justify-center">
<div>
<div class="dropstart relative">
<button
class="
dropdown-toggle
px-6
py-2.5
bg-blue-600
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-blue-700 hover:shadow-lg
focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-blue-800 active:shadow-lg active:text-white
transition
duration-150
ease-in-out
flex
items-center
whitespace-nowrap
"
type="button"
id="dropdownMenuButton1s"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="caret-left"
class="svg-inline--fa fa-caret-left w-1.5 mr-2"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 192 512"
>
<path
fill="currentColor"
d="M192 127.338v257.324c0 17.818-21.543 26.741-34.142 14.142L29.196 270.142c-7.81-7.81-7.81-20.474 0-28.284l128.662-128.662c12.599-12.6 34.142-3.676 34.142 14.142z"
></path>
</svg>
Dropstart
</button>
<ul
class="
dropdown-menu
min-w-max
absolute
hidden
bg-white
text-base
z-50
float-left
py-2
list-none
text-left
rounded-lg
shadow-lg
mt-1
hidden
m-0
bg-clip-padding
border-none
"
aria-labelledby="dropdownMenuButton1s"
>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Another action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Something else here</a
>
</li>
</ul>
</div>
</div>
</div>Menu item disabled
<div class="flex justify-center">
<div>
<div class="dropdown relative">
<button
class="
dropdown-toggle
px-6
py-2.5
bg-blue-600
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-blue-700 hover:shadow-lg
focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-blue-800 active:shadow-lg active:text-white
transition
duration-150
ease-in-out
flex
items-center
whitespace-nowrap
"
type="button"
id="dropdownMenuButton1ds"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown item disabled
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="caret-down"
class="svg-inline--fa fa-caret-down w-2 ml-2"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
fill="currentColor"
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
></path>
</svg>
</button>
<ul
class="
dropdown-menu
min-w-max
absolute
hidden
bg-white
text-base
z-50
float-left
py-2
list-none
text-left
rounded-lg
shadow-lg
mt-1
hidden
m-0
bg-clip-padding
border-none
"
aria-labelledby="dropdownMenuButton1ds"
>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Another action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-400
pointer-events-none
"
href="#"
>Something else here</a
>
</li>
</ul>
</div>
</div>
</div>Menu item header
- Action
- Another action
Dropdown header
<div class="flex justify-center">
<div>
<div class="dropdown relative">
<button
class="
dropdown-toggle
px-6
py-2.5
bg-blue-600
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-blue-700 hover:shadow-lg
focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-blue-800 active:shadow-lg active:text-white
transition
duration-150
ease-in-out
flex
items-center
whitespace-nowrap
"
type="button"
id="dropdownMenuButton1h"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown header
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="caret-down"
class="svg-inline--fa fa-caret-down w-2 ml-2"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
fill="currentColor"
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
></path>
</svg>
</button>
<ul
class="
dropdown-menu
min-w-max
absolute
hidden
bg-white
text-base
z-50
float-left
py-2
list-none
text-left
rounded-lg
shadow-lg
mt-1
hidden
m-0
bg-clip-padding
border-none
"
aria-labelledby="dropdownMenuButton1h"
>
<h6
class="
text-gray-500
font-semibold
text-sm
py-2
px-4
block
w-full
whitespace-nowrap
bg-transparent
"
>
Dropdown header
</h6>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Another action</a
>
</li>
</ul>
</div>
</div>
</div>Menu items divider
<div class="flex justify-center">
<div>
<div class="dropdown relative">
<button
class="
dropdown-toggle
px-6
py-2.5
bg-blue-600
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-blue-700 hover:shadow-lg
focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-blue-800 active:shadow-lg active:text-white
transition
duration-150
ease-in-out
flex
items-center
whitespace-nowrap
"
type="button"
id="dropdownMenuButton1d"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown divider
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="caret-down"
class="svg-inline--fa fa-caret-down w-2 ml-2"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
fill="currentColor"
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
></path>
</svg>
</button>
<ul
class="
dropdown-menu
min-w-max
absolute
hidden
bg-white
text-base
z-50
float-left
py-2
list-none
text-left
rounded-lg
shadow-lg
mt-1
hidden
m-0
bg-clip-padding
border-none
"
aria-labelledby="dropdownMenuButton1d"
>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Another action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Something else here</a
>
</li>
<hr class="h-0 my-2 border border-solid border-t-0 border-gray-700 opacity-25" />
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Separated link</a
>
</li>
</ul>
</div>
</div>
</div>Menu item text
-
Dropdown item text
- Action
- Another action
<div class="flex justify-center">
<div>
<div class="dropdown relative">
<button
class="
dropdown-toggle
px-6
py-2.5
bg-blue-600
text-white
font-medium
text-xs
leading-tight
uppercase
rounded
shadow-md
hover:bg-blue-700 hover:shadow-lg
focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
active:bg-blue-800 active:shadow-lg active:text-white
transition
duration-150
ease-in-out
flex
items-center
whitespace-nowrap
"
type="button"
id="dropdownMenuButton1tx"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown item text
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="caret-down"
class="svg-inline--fa fa-caret-down w-2 ml-2"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
fill="currentColor"
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
></path>
</svg>
</button>
<ul
class="
dropdown-menu
min-w-max
absolute
hidden
bg-white
text-base
z-50
float-left
py-2
list-none
text-left
rounded-lg
shadow-lg
mt-1
hidden
m-0
bg-clip-padding
border-none
"
aria-labelledby="dropdownMenuButton1tx"
>
<span
class="
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
"
>Dropdown item text</span
>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Action</a
>
</li>
<li>
<a
class="
dropdown-item
text-sm
py-2
px-4
font-normal
block
w-full
whitespace-nowrap
bg-transparent
text-gray-700
hover:bg-gray-100
"
href="#"
>Another action</a
>
</li>
</ul>
</div>
</div>
</div>