Dropdowns
Dropdown menus for commands, filters, and compact option lists
This page defines Lumora dropdown patterns with token-driven trigger styles, menu layouts, and interaction states. Use the playground to build a production-ready recipe for alignment, direction, iconography, and dark surfaces.
1. Variant Matrix
Core dropdown trigger and menu patterns
2. Interaction Playground
Build a dropdown recipe from controls
3. Directions and Placement
Directional dropdown behavior for constrained layouts
4. State Modeling
Headers, disabled actions, and mixed item groups
5. Composition Patterns
Dropdowns in topbar, table actions, and filter bars
6. Real-use Snippets
Copy-ready examples for default, split, and dark menu dropdowns
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Actions
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Create</a></li>
<li><a class="dropdown-item" href="#">Duplicate</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-primary">Save</button>
<button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
<span class="visually-hidden">Toggle dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Save as draft</a></li>
<li><a class="dropdown-item" href="#">Save and publish</a></li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-outline-info dropdown-toggle" type="button" data-bs-toggle="dropdown">
Theme
</button>
<ul class="dropdown-menu dropdown-menu-dark">
<li><a class="dropdown-item" href="#">System</a></li>
<li><a class="dropdown-item" href="#">Light</a></li>
<li><a class="dropdown-item" href="#">Dark</a></li>
</ul>
</div>