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
Types
Import
import { DropdownProps } from 'mono-helper'| Prop | Value | Default | Description |
|---|---|---|---|
modelValue | boolean | false | Two-way bound open state of the dropdown. |
placement | 'left' | 'right' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | 'bottom-start' | Panel placement relative to the trigger. |
trigger | 'click' | 'hover' | 'manual' | 'click' | How the dropdown opens: click, hover, or manual. |
size | 'sm' | 'md' | 'lg' | 'md' | Sizing scale of the dropdown panel. |
color | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'primary' | Color theme applied to the dropdown. |
disabled | boolean | false | Disables interaction and prevents opening. |
flip | boolean | true | When true, the panel auto-flips to the opposite side when the preferred side does not have enough room in the viewport. |
shift | boolean | true | When true, the panel shifts along the cross axis to stay inside the viewport instead of overflowing. |
offset | number | 8 | Pixel gap between the activator and the panel. |
closeOnOutsideClick | boolean | true | Closes the dropdown when clicking outside it. |
closeOnEscape | boolean | true | Closes the dropdown when the Escape key is pressed. |
cssClass | DropdownCssClass | {} | Per-element class overrides for internal parts. |