Skip to content

Dropdowns

The Beets CSS dropdowns has a nice shadow!

<div class="dropdown">
    <button class="btn btn-primary 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>

No caret

With the .dropdown-no-caret class on the <button> tag you can remove the default caret from the dropdown button. This is really useful when you want a nice menu button, for instance.

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle dropdown-no-caret" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        No caret
    </button>
    ...
</div>
<div class="dropdown">
    <button class="btn btn-primary btn-square dropdown-toggle dropdown-no-caret" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        <i class="fa-solid fa-bars"></i>
    </button>
    ...
</div>
<div class="dropdown">
    <button class="btn btn-ghost-secondary btn-square rounded-circle dropdown-toggle dropdown-no-caret" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        <i class="fa-solid fa-cog"></i>
    </button>
    ...
</div>

Custom caret

With the default caret removed, you can easily add your own custom carets with something like Font Awesome and som styling!

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle dropdown-no-caret" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Custom caret
        <i class="fa-solid fa-xs fa-chevron-down ms-1"></i>
    </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>