Dropdown

The Dropdown component provides a toggleable menu list that appears below (or relative to) a trigger button. It automatically handles opening on trigger click, closing on outside clicks, and closing other active dropdowns when a new one is opened.

<!-- Dropdown Container -->
<div class="dropdown" data-role="dropdown">
    <button class="btn primary dropdown-toggle">Action List ▾</button>
    <ul class="dropdown-menu">
        <li><a href="#">📁 Create New</a></li>
        <li><a href="#">📂 Open File</a></li>
        <li class="divider"></li>
        <li><a href="#">💾 Save As...</a></li>
    </ul>
</div>

Markup & Structure

To implement a dropdown, construct the following element structure:

Wrap the toggle and menu in a container with class dropdown.
Apply the class dropdown-toggle to the button or trigger element.
Define the items in an unordered list (<ul>) with the class dropdown-menu.
Use <li class="divider"></li> to render vertical dividers.