Menu button

This page documents the expected code output and structure necessary to display the menu button correctly in the UI.

Menu button base code

The menu button is structure in exactly the same way as the menu with the addition of a <button> inside the .menu container as the first child.

The .btn-primary class can be changed to secondary or ghost to suit the UI needs.

html 
<div class="menu">
    <button type="button" class="btn btn-primary menu-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="button-label">Menu button</span>
        <div class="btn-icon">
            <i class="fa-solid fa-caret-down" aria-hidden="true"></i>
        </div>
    </button>
    <div class="menu-panel dropdown-menu">
        <ul class="menu-body" role="menu">
            <li>
                <button class="menu-item" type="button">Action</button>
            </li>
            <li>
                <button class="menu-item" type="button">Another action</button>
            </li>
            <li>
                <button class="menu-item" type="button">Something else here</button>
            </li>
        </ul>
    </div>
</div>

Combo button

The combo button is structure using the .btn-combo class as a wrapper. This contains both <button> elements and most importantly, the .menu-panel. This is needed to render the menu position correctly.

The .dropdown-menu-end class is also used to position the menu to the right side of the caret icon button.

The .btn-primary class can be changed to secondary to suit the UI needs.

html 
<div class="menu">
    <div class="btn-combo">
        <button type="button" class="btn btn-primary">
            <span class="button-label">Combo</span>
        </button>
        <button type="button" class="btn btn-primary menu-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            <div class="btn-icon">
                <i class="fa-solid fa-caret-down" aria-hidden="true"></i>
            </div>
        </button>

        <div class="menu-panel dropdown-menu dropdown-menu-end">
            ...
        </div>
    </div>
</div>

Overflow menu

Implement an overflow menu button by using a ghost button and overflow menu icon.

html 
<div class="menu">
    <button type="button" class="btn btn-ghost menu-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        <div class="btn-icon">
            <i class="fa-regular fa-ellipsis-vertical" aria-hidden="true"></i>
        </div>
    </button>
    <div class="menu-panel dropdown-menu dropdown-menu-end">
        ...
    </div>
</div>