AB Dropdown

Overlay panel anchored to a trigger slot — menus, custom popups, not a form value picker.

HTML tag: c-ec5b45db9e69f4fcabd48c4dc751b0863

When to use

• popup panel anchored to a custom trigger
• toggle menu overlay (not form select)
• placement-controlled floating content

Props

Prop	Type	Default	Description
open	Boolean	false
disabled	Boolean	false
close_on_outside_click	Boolean	true
close_on_escape	Boolean	true
placement	String	bottom-start
portal	Boolean

Rules

• Use slots: trigger (opener), default slot (panel content).
• Control .open or listen to open-changed.
• placement positions the panel; close_on_outside_click and close_on_escape handle dismiss.
• Methods: toggle, openDropdown, closeDropdown.

Events

Event	Detail
open-changed	open: Boolean

Methods

Signature	Description
toggle()
openDropdown()
closeDropdown()
focus(options: Object)

What to avoid

Do not use for form option selection (ab-select). Do not confuse with ab-menu — dropdown is slot-based generic overlay.

Example

<c-ec5b45db9e69f4fcabd48c4dc751b0863 .open=${menuOpen} .placement=${'bottom-start'} @open-changed=${e => menuOpen = e.detail.open}>
  <c-e1e50e9eb30704a5cbb1fd51ba1afed37 slot="trigger" .label=${'Actions'}></c-e1e50e9eb30704a5cbb1fd51ba1afed37>
  <div>Menu content</div>
</c-ec5b45db9e69f4fcabd48c4dc751b0863>