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