Dropdowns

Menus that open from a button (WAI-ARIA menu button)

A menu

Arrow keys move through it, Escape closes it, the focus goes back to the button.

Show the code

<button type="button" class="btn" data-menu aria-controls="menu-47">Actions<i class="ti ti-chevron-down">
</i>
</button>
<div class="menu" id="menu-47" hidden>
<button type="button" class="menu-item" data-toast="Edit.">
<i class="ti ti-pencil">
</i>Edit</button>
<button type="button" class="menu-item" data-toast="Duplicated.">
<i class="ti ti-copy">
</i>Duplicate</button>
<div class="menu-sep" role="separator">
</div>
<button type="button" class="menu-item danger" data-toast="Deleted.">
<i class="ti ti-trash">
</i>Delete</button>
</div>

With a heading

Groups inside one menu.

Show the code

<button type="button" class="btn" data-menu aria-controls="menu-48">
<i class="ti ti-download">
</i>Export<i class="ti ti-chevron-down">
</i>
</button>
<div class="menu" id="menu-48" hidden>
<div class="menu-head">Download as</div>
<button type="button" class="menu-item" data-toast="CSV downloaded.">
<i class="ti ti-file-type-csv">
</i>CSV</button>
<button type="button" class="menu-item" data-toast="Excel file downloaded.">
<i class="ti ti-file-spreadsheet">
</i>Excel</button>
<div class="menu-sep" role="separator">
</div>
<div class="menu-head">Send</div>
<button type="button" class="menu-item" data-toast="Report emailed.">
<i class="ti ti-mail">
</i>Email the report</button>
</div>

Icon only

The menu’s name is in its label; it opens to the end.

Show the code

<button type="button" class="btn btn-ghost btn-icon" data-menu aria-controls="menu-49" aria-label="Row actions" data-tip="Row actions" data-align="end">
<i class="ti ti-dots">
</i>
</button>
<div class="menu" id="menu-49" hidden>
<a class="menu-item" href="order-detail.html">
<i class="ti ti-eye">
</i>View</a>
<a class="menu-item" href="refund-at-the-till.html">
<i class="ti ti-receipt-refund">
</i>Refund</a>
</div>

Links

Menu items that go somewhere.

Show the code

<button type="button" class="btn btn-primary" data-menu aria-controls="menu-50">Go to<i class="ti ti-chevron-down">
</i>
</button>
<div class="menu" id="menu-50" hidden>
<a class="menu-item" href="products-grid.html">
<i class="ti ti-package">
</i>Products</a>
<a class="menu-item" href="stock.html">
<i class="ti ti-building-warehouse">
</i>Stock</a>
<a class="menu-item" href="sales-report.html">
<i class="ti ti-chart-bar">
</i>Reports</a>
</div>