cnc-drop
A dropdown combines a trigger with an anchored cnc-popup. It manages open state,
positioning, click-away dismissal, selection behavior, and custom slotted content.
Quick start
Put the control that opens the menu in the named trigger slot. Everything else is
rendered inside the dropdown surface. By default, selecting content closes the dropdown.
<cnc-drop placement="bottom-start">
<cnc-button slot="trigger" label="Document actions"></cnc-button>
<div>
<button>Rename</button>
<button>Make a copy</button>
<button>Delete</button>
</div>
</cnc-drop>Usage guidance
Reach for a drop when a trigger owns its own menu and the two should travel together — it
wires the anchor, aria-expanded, Escape and outside-click for you, which is the
work you would otherwise repeat around a bare cnc-popup. Drop down to
cnc-popup
when the panel is anchored to something other than the control that opens it, or when you want
to own the open state outright; use cnc-tooltip for short guidance that is not a
menu, and cnc-context-menu when the gesture is a right-click rather than a press.
Leave close-on-select alone unless the panel holds controls the user adjusts
repeatedly — a filter form or a set of checkboxes. Prefer marking those individual controls
data-drop-keep-open
over turning the default off for the whole panel, so ordinary menu items keep closing the way a
menu should.