Dropdown ​

Bootstrap

Bootstrap dropdown: compact menus for sort, filters, and actions. Markup below; when to use which trigger → Rules.

Sort menu ​

Sqrl custom

  • Trigger: current label + bi-arrow-down-up; btn-ghost (Sqrl custom — or link-style), data-bs-toggle="dropdown", no dropdown-toggle.
  • Menu: dropdown-menu → button.dropdown-item; selection = active + aria-current="true".

Sort menu

html
<div class="dropdown">
  <button
    type="button"
    class="btn btn-ghost align-baseline fw-normal text-body"
    data-bs-toggle="dropdown"
    aria-expanded="false"
  >
    <i class="bi bi-arrow-down-up me-1" aria-hidden="true"></i>
    Name (A-Z)
  </button>
  <div class="dropdown-menu">
    <button type="button" class="dropdown-item active" aria-current="true">
      Name (A-Z)
    </button>
    <button type="button" class="dropdown-item">Name (Z-A)</button>
    <button type="button" class="dropdown-item">
      Quote potential (high-low)
    </button>
    <button type="button" class="dropdown-item">
      Quote potential (low-high)
    </button>
  </div>
</div>

Docs static block: dropdown-menu show position-static d-block (omit in product).

Button trigger ​

  • Trigger: contextual btn-* + dropdown-toggle + data-bs-toggle="dropdown".
  • Same dropdown-menu / dropdown-item pattern; labels in the menu are plain text rows, not nested btn-* buttons.

Primary button trigger

html
<div class="dropdown">
  <button
    type="button"
    class="btn btn-success dropdown-toggle"
    data-bs-toggle="dropdown"
    aria-expanded="false"
  >
    Success
  </button>
  <div class="dropdown-menu">
    <button type="button" class="dropdown-item active" aria-current="true">
      Success
    </button>
    <button type="button" class="dropdown-item">Warning</button>
    <button type="button" class="dropdown-item">Danger</button>
  </div>
</div>

Rules ​

When to use ​

  • Dropdown: user picks one option from a short list (sort, filter, status, overflow actions).
  • Not a popover (explanation/tooltip-style content) or a modal (multi-step or blocking task).
  • Look and spacing live in theme.scss — implement with Bootstrap classes only; do not re-specify colours or sizes in app CSS.

Behaviour ​

  • Close on selection (Bootstrap default). For sort-style triggers, update the trigger label to match the new active item.
  • One active row at a time for single-select menus.

Sort-style trigger ​

  • Toolbar/table sort, view, or filter — shows current value + sort icon.
  • No dropdown-toggle on the trigger (no caret); icon is bi-arrow-down-up only — Iconography.

Button trigger ​

  • Primary/secondary button that opens a menu — add dropdown-toggle.
  • Menu copy describes the action or state (e.g. “Warning”, “Delete”); use btn-danger on a footer/header button, not as a dropdown-item styled like a full button.