Dropdowns
Toggle-able menus with single / multi selection, search, nested submenus, direction variants, auto-close modes, and contextual colors.
Basic Dropdowns
Menu Content Types
Nested Submenus
Directions
Menu Alignment
Fixed Width (opt-in)
By default the trigger sizes to its content — same as any .lp-btn.
Add .lp-dropdown-fixed on the wrapper when you don't want the
button resizing as the selection changes; labels longer than the pinned
width truncate with an ellipsis. Four sizes:
-sm (120px) · default (160px) ·
-lg (200px) · -xl (260px).
.lp-dropdown-fixed-sm — 120px
.lp-dropdown-fixed — 160px
.lp-dropdown-fixed-lg — 200px
.lp-dropdown-fixed-xl — 260px
Sizes
Auto-close Behaviors
Control when the menu closes via data-lp-auto-close:
true (any click), inside (item click only),
outside (doc click only), or false (Escape / toggle only).
Inline Option Rows
Wrap items in .lp-dropdown-row to lay them out horizontally inside the menu — useful for alignment toolbars, reaction pickers, colour strips, or any compact toolbar. Pair with .lp-dropdown-item-icon for square icon-only buttons. Rows can be mixed freely with regular vertical items, headers, and dividers. ← / → navigate within a row; ↑ / ↓ still step through the menu linearly.
Row Display Control (silent rows)
Add data-lp-silent="true" to any .lp-dropdown-row so its selections stay
highlighted inside the menu but don't update the toggle label. Rows without the attribute behave
normally — their most-recent click wins the trigger. Mix silent and audible rows freely.
JavaScript API
Listens for lp:dropdown:* events. Open DevTools + click an item.
(events appear here)
Programmatic open(), close(), toggle(), select(), getValue().
disable() / enable().
Split Button Dropdown
Selection Styles
Three selection visuals, switched via data-lp-selection-style:
default (tinted row + check icon) ·
highlight (tinted row, no icon) ·
check (icon only, no tint). Author the icon glyph yourself
inside .lp-dropdown-check to swap the tick for anything else.
Default — tint + check
Highlight — tint only, no icon
Check — icon only, no tint
Custom icon — swap check for any glyph
Leading status icons (any utility text color)
Multiple Selection
Set data-lp-multiple="true" to allow several values.
Multi-select defaults to autoClose: "outside" so the menu
stays open as you tick items. Add data-lp-show-actions="true"
for the All / None helper row; data-lp-max-selections
caps the number of concurrent picks.
Searchable + All/None actions
Plain multi — auto-injected checkboxes
max-selections="3" — extra clicks are silently ignored
Min Selection & Custom Display Text
data-lp-min-selections="N" guarantees at least N
values are picked — clicking a selected item that would drop you below
the floor is silently blocked (the None action is also disabled).
The trigger text comes from data-lp-all-selected-text when
every item is active, otherwise from data-lp-multiple-selected-text
(where {count} expands to the number of active items).
min="1" — you can never end up with zero outlets. Try to uncheck the last one.
min="2" — you can deselect down to two, but the third click is blocked.
Custom template: "2 people assigned" · "All Team Members" once you tick everyone.
Multiple Selection Styles
No Scroll & No Wrap
Contextual Selection Colors
Events
All events fire on the .lp-dropdown element and bubble. Cancelable events
can be blocked with event.preventDefault(). Read payload from event.detail.
| Event | When it fires | Cancelable | detail payload |
|---|---|---|---|
lp:dropdown:show | Before the menu opens | Yes | { instance } |
lp:dropdown:shown | After the menu has opened | No | { instance } |
lp:dropdown:hide | Before the menu closes | Yes | { instance } |
lp:dropdown:hidden | After the menu has closed | No | { instance } |
lp:dropdown:change | Selection changes (single or multiple mode) | No | { value, text, values, texts, previousValues, action } |
lp:dropdown:search | Search input changes (searchable mode) | No | { query, visibleCount } |
lp:dropdown:action | Item carrying a data-action is clicked | No | { action, value } |
JavaScript API
Get an instance with Launchpad.Launchpad.getInstance(el, "dropdown") or
new Launchpad.Dropdown(el, options).
Methods
| Method | Description |
|---|---|
show() | Open the menu (emits show / shown). |
hide() | Close the menu (emits hide / hidden). |
toggle() | Toggle open/closed. |
isOpen() | Returns true if the menu is open. |
select(value, text?) | Single-select: set the active item by value. |
toggleSelect(value) | Multi-select: toggle an item; enforces min/max. |
clearSelection() | Deselect everything. |
selectAll() | Multi-select: select every item (respects maxSelections). |
selectNone() | Multi-select: deselect every item (blocked if minSelections > 0). |
getValue() | First selected value, or null. |
getValues() | Array of selected values. |
getText() / getTexts() | Same as above, for visible text. |
disable() / enable() | Disable or re-enable the trigger. |
isDisabled() | Current disabled state. |
setItemDisabled(value, flag) | Disable/enable a specific item. |
update() | Recompute the trigger's displayed text from current selections. |
destroy() | Remove listeners and deregister. |
Options & data-lp-* attributes
| Option | Data attribute | Default | Description |
|---|---|---|---|
autoClose | data-lp-auto-close | "outside" | true (any click) · "inside" (item click) · "outside" (doc click, default) · false (manual only) |
multiple | data-lp-multiple | false | Enable multi-select with checkboxes. |
multipleStyle | data-lp-multiple-style | "checkbox" | "checkbox" or "check" (icon only). |
selectionStyle | data-lp-selection-style | "default" | Single-select variant: "default" · "highlight" · "check". |
maxSelections | data-lp-max-selections | null | Cap on selected items in multi mode. |
minSelections | data-lp-min-selections | null | Floor on selected items in multi mode. |
showActions | data-lp-show-actions | false | Render the All / None action row. |
selectAllText | data-lp-select-all-text | "All" | Label for All action (or empty to hide). |
selectNoneText | data-lp-select-none-text | "None" | Label for None action (or empty to hide). |
allSelectedText | data-lp-all-selected-text | null | Trigger text when every item is selected. |
multipleSelectedText | data-lp-multiple-selected-text | "{count} selected" | Trigger template. {count} substitutes the number. |
submenuTrigger | data-lp-submenu-trigger | "hover" | "hover" or "click". Auto-switches to click on touch devices. |
placeholder | data-lp-placeholder | initial selected text | Trigger text when nothing is selected. |