Dropdowns

Context menus, action menus and dropdown buttons. Click outside or press Escape to close.

Basic Dropdown

Action menu

<div class="dropdown">
    <button class="dropdown-trigger">
        <span class="material-symbols-outlined">more_vert</span>
    </button>
    <div class="dropdown-menu">
        <button class="dropdown-item">Edit</button>
        <button class="dropdown-item">Duplicate</button>
        <div class="dropdown-divider"></div>
        <button class="dropdown-item danger">Delete</button>
    </div>
</div>

Positions

Alignment options

Left (default)

Right aligned

<!-- Right-aligned -->
<div class="dropdown-menu right">...</div>

<!-- Opens upward -->
<div class="dropdown-menu top">...</div>

Table Row Actions

Common pattern

Name	Status	Role
Alice Martin	Active	Admin
Bob Dupont	Pending	Cashier