Dropdown
Classes Information
| ClassName | Description |
|---|---|
| dropdown-container | Dropdown container base class |
| dropdown | Dropdown base class |
| dropdown-menu | Dropdown menu base class |
| dropdown-hover | Will open the dropdown on hover |
| dropdown-open | Will open the dropdown on load |
| dropdown-item | Will style a element as dropdown item |
| dropdown-active | Will style a element as active |
| dropdown-divider | Will apply a border separator |
| dropdown-item-no-animation | Will disable the animation on click |
| dropdown-item-no-animation | Will disable the animation on click |
| dropdown-menu-bottom-right | Will position to the bottom right |
| dropdown-menu-bottom-left | Will position to the bottom left |
| dropdown-menu-top-right | Will position to the top right |
| dropdown-menu-top-left | Will position to the top left |
| dropdown-menu-left-bottom | Will position to the left bottom |
| dropdown-menu-left-top | Will position to the left top |
| dropdown-menu-right-bottom | Will position to the right bottom |
| dropdown-menu-right-top | Will position to the right top |
| dropdown-menu-left | Will position to the left |
| dropdown-menu-right | Will position to the right |
| dropdown-menu-bottom-center | Will position to the bottom center |
| dropdown-menu-top-center | Will position to the top center |
Add `tabIndex=-1` on item for close the dropdown when click Me on item.
Basic Usage
Example Code
html
<div class="dropdown">
<label class="btn btn-primary my-2" tabindex="1">Click Me</label>
<div class="dropdown-menu">
<a class="dropdown-item text-sm">Item 1</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
</div>
</div>Top
Example Code
html
<div class="dropdown">
<label class="btn btn-primary my-2" tabindex="0">Top Left</label>
<div class="dropdown-menu dropdown-menu-top-left">
<a class="dropdown-item text-sm">Item 1</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
</div>
</div>
<div class="dropdown">
<label class="btn btn-primary my-2" tabindex="0">Top Center</label>
<div class="dropdown-menu dropdown-menu-top-center">
<a class="dropdown-item text-sm">Item 1</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
</div>
</div>
<div class="dropdown">
<label class="btn btn-primary my-2" tabindex="0">Top Right</label>
<div class="dropdown-menu dropdown-menu-top-right">
<a class="dropdown-item text-sm">Item 1</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
</div>
</div>Left
Example Code
html
<div class="dropdown">
<label class="btn btn-primary my-2" tabindex="0">left Top</label>
<div class="dropdown-menu dropdown-menu-left-top">
<a class="dropdown-item text-sm">Item 1</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
</div>
</div>
<div class="dropdown">
<label class="btn btn-primary my-2" tabindex="0">Left Center</label>
<div class="dropdown-menu dropdown-menu-left">
<a class="dropdown-item text-sm">Item 1</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
</div>
</div>
<div class="dropdown">
<label class="btn btn-primary my-2" tabindex="0">Left Bottom</label>
<div class="dropdown-menu dropdown-menu-left-bottom">
<a class="dropdown-item text-sm">Item 1</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
</div>
</div>Right
Example Code
html
<div class="dropdown">
<label class="btn btn-primary my-2" tabindex="0">Right Top</label>
<div class="dropdown-menu dropdown-menu-right-top">
<a class="dropdown-item text-sm">Item 1</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
</div>
</div>
<div class="dropdown">
<label class="btn btn-primary my-2" tabindex="0">Right Center</label>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item text-sm">Item 1</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
</div>
</div>
<div class="dropdown">
<label class="btn btn-primary my-2" tabindex="0">Right Bottom</label>
<div class="dropdown-menu dropdown-menu-right-bottom">
<a class="dropdown-item text-sm">Item 1</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
</div>
</div>Bottom
Example Code
html
<div class="dropdown">
<label class="btn btn-primary my-2" tabindex="0">Bottom Left</label>
<div class="dropdown-menu dropdown-menu-bottom-left">
<a class="dropdown-item text-sm">Item 1</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
</div>
</div>
<div class="dropdown">
<label class="btn btn-primary my-2" tabindex="0">Bottom Center</label>
<div class="dropdown-menu dropdown-menu-bottom-center">
<a class="dropdown-item text-sm">Item 1</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
</div>
</div>
<div class="dropdown">
<label class="btn btn-primary my-2" tabindex="0">Buttom Right</label>
<div class="dropdown-menu dropdown-menu-bottom-right">
<a class="dropdown-item text-sm">Item 1</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
</div>
</div>Open
Example Code
html
<div class="dropdown dropdown-open">
<label class="btn btn-primary my-2" tabindex="0">Click Me</label>
<div class="dropdown-menu dropdown-menu-bottom-right shadow-lg">
<a class="dropdown-item text-sm">Item 1</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
</div>
</div>Hover
Example Code
html
<div class="dropdown dropdown-hover">
<label class="btn btn-primary my-2" tabindex="0">Click Me</label>
<div class="dropdown-menu dropdown-menu-bottom-right">
<a class="dropdown-item text-sm">Item 1</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
</div>
</div>Divider
Example Code
html
<div class="dropdown">
<label class="btn btn-primary my-2" tabindex="0">Click Me</label>
<div class="dropdown-menu dropdown-menu-bottom-right gap-1">
<a class="dropdown-item text-sm">Profile</a>
<div class="dropdown-divider" role="separator"></div>
<a tabindex="-1" class="dropdown-item text-sm">Settings</a>
<a tabindex="-1" class="dropdown-item text-sm">Logout</a>
</div>
</div>Bordered
Example Code
html
<div class="dropdown">
<label class="btn btn-primary my-2" tabindex="0">Click Me</label>
<div
class="dropdown-menu dropdown-menu-bottom-right border border-gray-border"
>
<a class="dropdown-item text-sm">Item 1</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 2</a>
<a tabindex="-1" class="dropdown-item text-sm">Item 3</a>
</div>
</div>Active Item
Example Code
html
<div class="dropdown">
<label class="btn btn-primary my-2" tabindex="0">Click Me</label>
<div class="dropdown-menu dropdown-menu-bottom-right gap-1">
<a class="dropdown-item text-sm">Profile</a>
<a tabindex="-1" class="dropdown-item text-sm">Settings</a>
<a tabindex="-1" class="dropdown-item text-sm dropdown-active">Logout</a>
</div>
</div>