Dropdown

Dropdown is a nestable element that comes with the following elements already nested:
“Toggle element”, made of a Heading and an “Arrow Icon” element. This Toggle element will serve as the toggle by default for “Arrow Icon” and “Dropdown element”.
“Dropdown element”, is a nestable block element. You can put any elements at it, like you would do at a Bricks block or container.
You can build unlimited nested Dropdown elements (Dropdowns inside Dropdowns).
“Dropdown element” is the main element, if you will use a custom toggle for it, you can drag it outside Dropdown and remove both Dropdown and Toggle elements.

Toggle selector: determines the toggle that will be used passed by it’s classname. If you are keeping “Dropdown Element” inside “Dropdown” with the default “Toggle element” then Toggle selector will be “Toggle element” automatically.
Event: the user event at the toggle that will open/close the dropdown: click or hover.

Depending on the selected event, accesibility controls will be different and can be enabled/disabled from here: including: Opened by default, close on ESC and close when clicking outside.

At this section you can customize all positioning controls, including dropdown’s default position and toggle position. It is essential to set the appropiate positioning, specially at mobile devices, where you may need to set toggle position to static if being on a collapsed menu.

Mask is what makes “Dropdown element” quite special regarding other dropdowns out there. You may have noticed at dropdowns triggered on hover that they close when the pointer leaves the toggle and it doesn’t take time to the user to reach the dropdown before it closes, what is a really weird UX.
Mask is for having an additional spacing around the dropdown that will be taked into account to not close the dropdown. Think of it like an outer padding.
It is specially useful for the hover event, where hovering at this extra space won’t close the dropdown 😉

Dropdown elements have a fade and transform animations that can be customized at pleasure at any breakpoint. All their opacity, transform, duration, delay and CSS easing properties are available at these sections.

– Tamu