Dropdown

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 dropdown-toggle gap-x-2 bg-indigo-600
                                          text-white border-indigo-600 disabled:opacity-50 disabled:pointer-events-none
                                          hover:bg-indigo-800 hover:border-indigo-800 active:bg-indigo-800
                                          active:border-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-300
                                          dropdown-toggle"
                                       type="button"
                                       data-bs-toggle="dropdown"
                                       aria-expanded="false"
                                       >
                                    Dropdown button
                                    </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>