Materialize CSS provides a dropdown facility that allows the user to choose one value from a set of given values in a list. To add a dropdown list to any button, it has to be made sure that the data-target attribute matches with the id in the <ul> tag.
The main class and attribute used in a dropdown are:
- The dropdown-content class is used to identify which <ul> tag should be made a Materialize dropdown component.
- The data-activates attribute is used to specify the id of the dropdown <ul> element.
In dropdown list following elements can be added:
- A divider is added by using the divider class. It can be added to an empty <li> tag to show a divider.
- Icons are added by using the material-icons class using the <i> tag. The icon to be used can be specified and it would be displayed next to the text of the list item.