Materialize CSS Dropdown

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: 

1. The dropdown-content class is used to identify which <ul> tag should be made a Materialize dropdown component.
2. The data-activates attribute is used to specify the id of the dropdown <ul> element.

Syntax:

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.

Example:

Output: