Dropdown
Dropdown.
Make use of Tailwind's unique Dropdown styles to enhance actions in forms, dialogs, and various other elements, featuring comprehensive support for multiple sizes, states, and additional functionalities.
DropdownDropdown
Basic Dropdown
A dropdown menu is a toggleable menu that allows the user to choose one value.
<div class="relative" x-data="{ open: false }">
<button type="button" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white dropdown-toggle"
@click="open = true">
Dropdown button
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
1</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
2</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
3</a>
</div>
</div>
Dropdown Divider
The
.my-2 border-t border-border class is used to separate links inside
the dropdown menu.
<div class="relative" x-data="{ open: false }">
<button type="button" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white dropdown-toggle"
@click="open = true">
Dropdown button
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
1</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
2</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
3</a>
<div class="my-2 border-t border-border"></div>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Another
link</a>
</div>
</div>
Dropdown Header
The
.dropdown-header class is used to add headers inside the
dropdown menu
<div class="relative" x-data="{ open: false }">
<button type="button" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white dropdown-toggle"
@click="open = true">
Dropdown button
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<h5 class="py-2 px-4 block text-body text-2xs">Dropdown header</h5>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link 1</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link 2</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link 3</a>
<h5 class="py-2 px-4 block text-body text-2xs">Dropdown header</h5>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Another link</a>
</div>
</div>
Disable and Active items
The
.dropdown-header class is used to add headers inside the
dropdown menu
<div class="relative" x-data="{ open: false }">
<button type="button" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white dropdown-toggle"
@click="open = true">
Dropdown button
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Normal</a>
<a class="py-2 px-5 block bg-primarylight text-primary" @click="open = false"
href="javascript:void(0);">Active</a>
<a class="py-2 px-5 block pointer-events-none" @click="open = false"
href="javascript:void(0);">Disabled</a>
</div>
</div>
Align Right
To right-align the dropdown, add the
.dropdown-menu-end class to the element with
.dropdown-menu
<div class="relative" x-data="{ open: false }">
<button type="button" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white dropdown-toggle"
@click="open = true">
Dropdown button
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
1</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
2</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
3</a>
</div>
</div>
Dropup
The
.dropup class makes the dropdown menu expand upwards
instead of downwards
<div class="btn-group relative inline-flex align-middle rounded-lg dropup mb-1" x-data="{ open: false }">
<button type="button" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white !rounded-lg dropdown-toggle"
@click="open = true">
Dropup
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute bottom-full min-w-40 mb-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
1</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
2</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
3</a>
</div>
</div>
<div class="btn-group relative inline-flex align-middle rounded-lg dropup mb-1" x-data="{ open: false }">
<button type="button" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white">
Split dropup
</button>
<button type="button"
class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white !rounded-e-lg opacity-85 !py-0 !px-2.5 dropdown-toggle dropdown-toggle-split"
@click="open = true">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute bottom-full min-w-40 mb-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
1</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
2</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
3</a>
</div>
</div>
Dropright
Trigger dropdown menus at the right of the elements
by
.dropend to the parent
<div class="relative inline-flex align-middle rounded-lg dropend mb-1" x-data="{ open: false }">
<button type="button" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white dropdown-toggle"
@click="open = true">
Dropright
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute sm:left-full max-sm:top-full min-w-40 ml-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
1</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
2</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
3</a>
</div>
</div>
<div class="btn-group relative inline-flex align-middle rounded-lg dropend mb-1" x-data="{ open: false }">
<button type="button" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white"
@click="open = true">
Split dropright
</button>
<button type="button"
class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white !rounded-e-lg opacity-85 !py-0 !px-2.5 dropdown-toggle dropdown-toggle-split"
@click="open = true">
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute sm:left-full max-sm:top-full min-w-40 ml-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
1</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
2</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
3</a>
</div>
</div>
dropstart
Trigger dropdown menus at the right of by adding
.dropstart to the parent element
<div class="relative inline-flex align-middle rounded-lg dropstart mb-1" x-data="{ open: false }">
<button type="button" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white dropdown-toggle after:!hidden"
@click="open = true">
dropstart
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute sm:right-full max-sm:top-full min-w-40 mr-1 z-[2]"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
1</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
2</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
3</a>
</div>
</div>
<div class="btn-group relative inline-flex align-middle rounded-lg mb-1" x-data="{ open: false }">
<div class="btn-group relative inline-flex align-middle rounded-lg dropstart">
<button type="button"
class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white opacity-85 !py-0 !px-2.5 dropdown-toggle dropdown-toggle-split after:!hidden"
@click="open = true">
<span class="sr-only">Toggle dropstart</span>
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute sm:right-full max-sm:top-full min-w-40 mr-1 z-[2]"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
1</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
2</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Link
3</a>
</div>
</div>
<button type="button" @click="open = true" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white">
Split dropstart
</button>
</div>
Button Dropdowns
<div class="btn-group relative inline-flex align-middle rounded-lg mb-1" x-data="{ open: false }">
<button type="button" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white"
@click="open = true">Primary</button>
<button type="button"
class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white !rounded-e-lg opacity-85 !py-0 !px-2.5 dropdown-toggle dropdown-toggle-split"
@click="open = true">
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Another action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Something else here</a>
<div class="my-2 border-t border-border"></div>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group relative inline-flex align-middle rounded-lg mb-1" x-data="{ open: false }">
<button type="button"
class="btn bg-secondary hover:bg-secondaryhover hover:shadow-btnsecondary text-white"
@click="open = true">Secondary</button>
<button type="button"
class="btn bg-secondary hover:bg-secondaryhover hover:shadow-btnsecondary text-white !rounded-e-lg opacity-85 !py-0 !px-2.5 dropdown-toggle dropdown-toggle-split"
@click="open = true">
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Another
action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Something else here</a>
<div class="my-2 border-t border-border"></div>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group relative inline-flex align-middle rounded-lg mb-1" x-data="{ open: false }">
<button type="button" class="btn bg-success hover:bg-successhover hover:shadow-btnsuccess text-white"
@click="open = true">Success</button>
<button type="button"
class="btn bg-success hover:bg-successhover hover:shadow-btnsuccess text-white !rounded-e-lg opacity-85 !py-0 !px-2.5 dropdown-toggle dropdown-toggle-split"
@click="open = true">
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Another
action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Something else here</a>
<div class="my-2 border-t border-border"></div>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group relative inline-flex align-middle rounded-lg mb-1" x-data="{ open: false }">
<button type="button" class="btn bg-info hover:bg-infohover hover:shadow-btninfo text-white"
@click="open = true">Info</button>
<button type="button"
class="btn bg-info hover:bg-infohover hover:shadow-btninfo text-white !rounded-e-lg opacity-85 !py-0 !px-2.5 dropdown-toggle dropdown-toggle-split"
@click="open = true">
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Another
action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Something else here</a>
<div class="my-2 border-t border-border"></div>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group relative inline-flex align-middle rounded-lg mb-1" x-data="{ open: false }">
<button type="button" class="btn bg-warning hover:bg-warninghover hover:shadow-btnwarning text-white"
@click="open = true">Warning</button>
<button type="button"
class="btn bg-warning hover:bg-warninghover hover:shadow-btnwarning text-white !rounded-e-lg opacity-85 !py-0 !px-2.5 dropdown-toggle dropdown-toggle-split"
@click="open = true">
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Another
action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Something else here</a>
<div class="my-2 border-t border-border"></div>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group relative inline-flex align-middle rounded-lg mb-1" x-data="{ open: false }">
<button type="button" class="btn bg-danger hover:bg-dangerhover hover:shadow-btndanger text-white"
@click="open = true">Danger</button>
<button type="button"
class="btn bg-danger hover:bg-dangerhover hover:shadow-btndanger text-white !rounded-e-lg opacity-85 !py-0 !px-2.5 dropdown-toggle dropdown-toggle-split"
@click="open = true">
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Another
action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Something else here</a>
<div class="my-2 border-t border-border"></div>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Separated link</a>
</div>
</div>
Sizing
Button dropdowns work with buttons of all sizes dropdown buttons.
<div class="relative inline-flex align-middle rounded-lg mb-1" x-data="{ open: false }">
<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white btn-lg dropdown-toggle"
type="button" @click="open = true">
Large button
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Another
action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Something else here</a>
<div class="my-2 border-t border-border"></div>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group relative inline-flex align-middle rounded-lg mb-1" x-data="{ open: false }">
<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white btn-lg"
@click="open = true"type="button">
Large split button
</button>
<button type="button"
class="btn btn-lg bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white !rounded-e-lg opacity-85 dropdown-toggle dropdown-toggle-split"
@click="open = true" aria-haspopup="true"
aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Another
action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Something else here</a>
<div class="my-2 border-t border-border"></div>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="relative inline-flex align-middle rounded-lg mb-1" x-data="{ open: false }">
<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white btn-sm dropdown-toggle"
type="button" @click="open = true">
Small button
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Another
action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Something else here</a>
<div class="my-2 border-t border-border"></div>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Separated link</a>
</div>
</div>
<div class="btn-group relative inline-flex align-middle rounded-lg mb-1" x-data="{ open: false }">
<button class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white btn-sm"
@click="open = true" type="button">
Small split button
</button>
<button type="button"
class="btn btn-sm bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white !rounded-e-lg opacity-85 !py-0 !px-2.5 dropdown-toggle dropdown-toggle-split"
@click="open = true" aria-haspopup="true"
aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Another
action</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Something else here</a>
<div class="my-2 border-t border-border"></div>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false"
href="javascript:void(0);">Separated link</a>
</div>
</div>
Custom style
Use
.custom-dropdown this class for this style
<div class="relative inline-block mb-4" x-data="{ open: false }">
<div @click="open = true">Last 7 days
<i class="fa fa-angle-down ml-4"></i>
</div>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Last
1 Month</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Last
6 Month</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Last
10 Month</a>
</div>
</div>
<div class="relative inline-block mb-4" x-data="{ open: false }">
<button type="button" class="btn btn-sm border border-primary text-primary hover:bg-primaryhover hover:shadow-btnprimary hover:text-white"
@click="open = true">Last 7 days
<i class="fa fa-angle-down ml-4"></i>
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Last
1 Month</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Last
6 Month</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Last
10 Month</a>
</div>
</div>
<div class="relative inline-block mb-4" x-data="{ open: false }">
<button type="button" class="btn btn-sm border border-primary text-primary hover:bg-primaryhover hover:shadow-btnprimary hover:text-white"
@click="open = true">Last 1 Hour
<i class="fa fa-angle-down ml-4"></i>
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Last
1 hour</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Last
2 hour</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Last
3 hour</a>
</div>
</div>
<div class="relative inline-block mb-4" x-data="{ open: false }">
<button type="button" class="btn btn-sm bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white"
@click="open = true">Last 7 days
<i class="fa fa-angle-down ml-4"></i>
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Last
1 Month</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Last
6 Month</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Last
10 Month</a>
</div>
</div>
<div class="relative inline-block mb-4" x-data="{ open: false }">
<button type="button"
class="btn btn-sm bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white flex items-center"
@click="open = true">
<i class="ti-search me-2 mt-1"></i> 3 AM
<i class="fa fa-angle-down ml-4"></i>
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">6
AM</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">9
AM</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">12
AM</a>
</div>
</div>
<div class="relative inline-block mb-4" x-data="{ open: false }">
<button type="button"
class="btn btn-sm bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white flex-wrap"
@click="open = true">
<i class="ti-calendar mr-4"></i> March 20, 2018
To April
20, 2018
<i class="fa fa-angle-down ml-4"></i>
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">May
20, 2018 To June 20,
2018</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">July
20, 2018 To August
20, 2018</a>
</div>
</div>
<div class="relative inline-block mb-4" x-data="{ open: false }">
<button type="button" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white size-9 !leading-9 !p-0 text-center"
@click="open = true">
<svg width="15" height="15" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.0101 13.8999C7.7367 13.8999 7.50277 13.8034 7.30833 13.6104C7.11388 13.4173 7.01666 13.1853 7.01666 12.9142C7.01666 12.6536 7.11277 12.4221 7.305 12.2199C7.49722 12.0177 7.7283 11.9166 7.99823 11.9166C8.27718 11.9166 8.51111 12.0178 8.7 12.2202C8.88888 12.4226 8.98333 12.6559 8.98333 12.9202C8.98333 13.1845 8.88947 13.4138 8.70176 13.6083C8.51405 13.8027 8.2835 13.8999 8.0101 13.8999ZM8.0101 8.98325C7.7367 8.98325 7.50277 8.88714 7.30833 8.69492C7.11388 8.5027 7.01666 8.27162 7.01666 8.00168C7.01666 7.72273 7.11277 7.48881 7.305 7.29992C7.49722 7.11103 7.7283 7.01658 7.99823 7.01658C8.27718 7.01658 8.51111 7.11044 8.7 7.29815C8.88888 7.48586 8.98333 7.71642 8.98333 7.98982C8.98333 8.26322 8.88947 8.49714 8.70176 8.69159C8.51405 8.88603 8.2835 8.98325 8.0101 8.98325ZM8.0101 4.08325C7.7367 4.08325 7.50277 3.98505 7.30833 3.78864C7.11388 3.59222 7.01666 3.35611 7.01666 3.0803C7.01666 2.80449 7.11277 2.56936 7.305 2.37492C7.49722 2.18047 7.7283 2.08325 7.99823 2.08325C8.27718 2.08325 8.51111 2.18126 8.7 2.37729C8.88888 2.5733 8.98333 2.80921 8.98333 3.08502C8.98333 3.36083 8.88947 3.59616 8.70176 3.791C8.51405 3.98584 8.2835 4.08325 8.0101 4.08325Z"
fill="#fff" />
</svg>
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Edit</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Delete</a>
</div>
</div>
<div class="relative inline-block mb-4" x-data="{ open: false }">
<button type="button" class="btn bg-primary hover:bg-primaryhover hover:shadow-btnprimary text-white size-9 !leading-9 !p-0 text-center"
@click="open = true">
<svg width="15" height="15" viewBox="0 0 16 16"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8.0101 13.8999C7.7367 13.8999 7.50277 13.8034 7.30833 13.6104C7.11388 13.4173 7.01666 13.1853 7.01666 12.9142C7.01666 12.6536 7.11277 12.4221 7.305 12.2199C7.49722 12.0177 7.7283 11.9166 7.99823 11.9166C8.27718 11.9166 8.51111 12.0178 8.7 12.2202C8.88888 12.4226 8.98333 12.6559 8.98333 12.9202C8.98333 13.1845 8.88947 13.4138 8.70176 13.6083C8.51405 13.8027 8.2835 13.8999 8.0101 13.8999ZM8.0101 8.98325C7.7367 8.98325 7.50277 8.88714 7.30833 8.69492C7.11388 8.5027 7.01666 8.27162 7.01666 8.00168C7.01666 7.72273 7.11277 7.48881 7.305 7.29992C7.49722 7.11103 7.7283 7.01658 7.99823 7.01658C8.27718 7.01658 8.51111 7.11044 8.7 7.29815C8.88888 7.48586 8.98333 7.71642 8.98333 7.98982C8.98333 8.26322 8.88947 8.49714 8.70176 8.69159C8.51405 8.88603 8.2835 8.98325 8.0101 8.98325ZM8.0101 4.08325C7.7367 4.08325 7.50277 3.98505 7.30833 3.78864C7.11388 3.59222 7.01666 3.35611 7.01666 3.0803C7.01666 2.80449 7.11277 2.56936 7.305 2.37492C7.49722 2.18047 7.7283 2.08325 7.99823 2.08325C8.27718 2.08325 8.51111 2.18126 8.7 2.37729C8.88888 2.5733 8.98333 2.80921 8.98333 3.08502C8.98333 3.36083 8.88947 3.59616 8.70176 3.791C8.51405 3.98584 8.2835 4.08325 8.0101 4.08325Z"
fill="#fff" />
</svg>
</button>
<div class="bg-bodybg border border-black/15 rounded-xl py-2 absolute top-full min-w-40 mt-1 z-1"
x-transition.duration.300ms x-show.transition.origin.top.left="open" x-cloak @click.away="open = false">
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Edit</a>
<a class="py-2 px-5 block hover:bg-primarylight hover:text-primary" @click="open = false" href="javascript:void(0);">Delete</a>
</div>
</div>