Dropdowns are common place in forms and for navigation. They help the user 'drill down' to a choice like the next page or section to visit.
You should not overuse them though, if the number of choices is limited showing all options at the same time might lead to a better user experience.
In Site Designer the content of the dropdown can be accessed by clicking on the button followed by a click on the eye icon in the design pane.
To see the dropdown in action just Preview in any browser.
In Material Design, instead of opening right below the trigger button, dropdowns 'pop over' the trigger button.
The component consists of a container with a link (text link, link container or link button) that function triggers the appearance of a hidden unordered lists.
The link element uses the .dropdown-trigger class and needs to point to the ID of the dropdown through the data-target attribute. The data-target attribute value can be updated on the Elements pane — always make sure it matches the ID of the unordered (dropdown) list!
This variation uses the more classic dropdown instead of the popover. This is configured in the embedded HTML element in this component — you can access the HTML element through the Elements pane.
This has been configured so that simply adding the .align-bottom class will trigger this behavior — only if this needs changing you will want to access the code in the HTML element.
In the component below the dropdown visibility is trigger by a hover instead of a mouse click. On touchscreens the dropdown can be trigger by a tab.
This has been configured so that simply adding the .hover-trigger class to the button (link) will trigger this behavior — only if this needs changing you will want to access the code in the HTML element.