Dropdowns

Living Documentation

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.

Variant matrix Direction modes Live controls Copy-ready snippets

Catalog Blocks 6 Variants, directions, states, composition, snippets, playground

Trigger Styles 3 Solid, soft, and outline token variants

Directions 4 Down, up, start, and end options

Preview State Down - Solid Updates from playground controls

1. Variant Matrix

Core dropdown trigger and menu patterns

Primary command menu

Icon and context menu

2. Interaction Playground

Build a dropdown recipe from controls

Direction

Trigger Style

Intent

Button Size

Menu align end

Dark dropdown menu

Item icons

Menu header

Disabled final item

Live Output

Down Solid

Down direction, solid trigger, standard menu.

3. Directions and Placement

Directional dropdown behavior for constrained layouts

Vertical direction

Horizontal direction

4. State Modeling

Headers, disabled actions, and mixed item groups

Grouped items with header

Dark menu surface

5. Composition Patterns

Dropdowns in topbar, table actions, and filter bars

Table row actions

Filter menu

6. Real-use Snippets

Copy-ready examples for default, split, and dark menu dropdowns

Default Dropdown

<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>

Split Button Dropdown

<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>

Dark Menu Dropdown

<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>

Dropdown menus for commands, filters, and compact option lists

Display

Status