Dropdown

How it works

Dropdown is a nestable widget made up of “Menu Items” that admit any kind of content: custom code, templates, global widgets and shortcodes.

Content tab

Settings group

Toggle selector: determines the toggle that will be used passed by it’s classname.
Event: the user event on the toggle that will open/close the dropdown: click or hover.

Accessibility group

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.

Fade & Transform animations groups

Dropdown has a fade and transform animations that can be customized at pleasure at any breakpoint. Their opacity, transform, duration, delay and CSS easing properties are customizable at these sections.

Style tab

Positioning group

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 group

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 😉