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.
Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.