Dropdown
A flexible floating overlay that pairs any activator (slot="main") with any body content (slot="body"). Twelve placements (top/bottom/left/right × bare, -start, -end), three trigger modes (click / hover / manual), six theme colours, sm/md/lg sizes. The panel auto-flips to the opposite side when the requested side runs out of viewport space and shifts along the cross-axis to stay on-screen. Outside-click and Escape both close (configurable). Toggle Vue / CSS to switch the live demo and source together.
Basic
Click an activator button to open a dropdown panel below it.
Vue SFC
Placements
All 12 placements: top/bottom/left/right combined with -start, -end and bare (centered).
Vue SFC
Auto-flip + shift
Triggers placed near each viewport edge — the panel flips to the side with more room and shifts inward to stay on-screen.
Vue SFC
Sizes
Small, medium and large.
Vue SFC
Colors
All built-in color variants.
Vue SFC
Triggers
Click vs hover modes side-by-side.
Vue SFC
With mono-button
Use a real <mono-button> as the activator inside slot="main".
Vue SFC
Rich content
The body slot can host any HTML — including other mono components like input, checkbox, and button.
Vue SFC
Disabled
The activator does nothing on click.
Vue SFC
Event log
Live log of mno-click / mno-open / mno-close with the source field and resolvedSide.
Vue SFC
Customized
Override per-element styling with cssClass (Vue) or utility classes (CSS).
Vue SFC
CSS Variables
Vue SFC
Every dropdown is themed through --mono-dropdown-* custom properties. Setting one on the element, on any wrapper/ancestor, or inline all work — custom properties inherit, and they pierce the shadow-DOM boundary, so the same overrides apply to <mono-dropdown> and the shadow build. The size and color props set presets, but an explicit --mono-dropdown-* override always wins. To re-skin globally, set the underlying --theme-* tokens.
| Variable | Default | Controls |
|---|---|---|
--mono-dropdown-accent | --theme-primary | Panel border tint + glow shadow (set by color) |
--mono-dropdown-text | --theme-text | Panel text color |
--mono-dropdown-bg | --theme-surface | Panel background |
--mono-dropdown-border | --theme-border | Panel base border color |
--mono-dropdown-radius | 9px | Panel corner radius (set by size) |
--mono-dropdown-pad-x | 0.75rem | Panel horizontal padding (set by size) |
--mono-dropdown-pad-y | 0.6rem | Panel vertical padding (set by size) |
--mono-dropdown-font | 0.74rem | Panel font size (set by size) |
--mono-dropdown-min-width | 200px | Panel min width (set by size) |
--mono-dropdown-max-width | 280px | Panel max width (set by size) |
--mono-dropdown-offset | 6px | Gap between activator and panel (set by size) |
Types
Import
import { DropdownProps } from 'mono-helper'| Prop | Value | Default | Description |
|---|---|---|---|
modelValue | boolean | — | Two-way bound open state of the dropdown. |
placement | 'left' | 'right' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | — | Panel placement relative to the trigger. |
trigger | 'click' | 'hover' | 'manual' | — | How the dropdown opens: click, hover, or manual. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | — | Sizing scale of the dropdown panel. |
color | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | — | Color theme applied to the dropdown. |
disabled | boolean | — | Disables interaction and prevents opening. |
flip | boolean | — | When true, the panel auto-flips to the opposite side when the preferred side does not have enough room in the viewport. |
shift | boolean | — | When true, the panel shifts along the cross axis to stay inside the viewport instead of overflowing. |
offset | number | — | Pixel gap between the activator and the panel. |
closeOnOutsideClick | boolean | — | Closes the dropdown when clicking outside it. |
closeOnEscape | boolean | — | Closes the dropdown when the Escape key is pressed. |
cssClass | DropdownCssClass | — | Per-element class overrides for internal parts. |