Usage without trigger

Use the component without a trigger? Is that possible?

Yes, it is. You don't need to invoke the <dropdown.trigger> component to make the dropdown work. The yielded dropdown has actions you can invoke from any other item. Yes, it is. You don't need to invoke the <dropdown.trigger> component to make the dropdown work. The yielded dropdown has actions you can invoke from any other item.

Sometimes you just cannot achieve what you want with this approach, so you need to step down and wire things yourself.

If you invoke the open or toggle action from say, a button, the dropdown is going to open and will take as the element to be anchored to element with data-ebd-id="{{dropdown.uniqueId}}-trigger".

What kind of things can you do with this?

By example, you can open or close the component when an item is clicked but make the dropdown attach itself to an entirely different item in the page.

Let's create an input with a button. When that button is clicked the drodown will open below the input, not not below the button that you clicked.

Remember that almost always you will want to use the provided trigger component <dropdown.trigger> because it takes care of all the A11y, bindings and classes for you, but when you can't it's good to know that you can still use your own markup and wire things together yourself.

A good middle-ground is to apply the same trigger modifier that the component uses, but to your element or component. It will get all of the same a11y and bindings that the <dropdown.trigger> component gets.