Javatpoint Logo
Javatpoint Logo

Materialize CSS Dropdowns

Materialize CSS provides dropdown facility. It provides several CSS classes to make ul element as a dropdown and add the id of the ul element to the data-activates attribute of the button or anchor element.

Following is the list of classes and their effects:

Index Class name Description
1) dropdown-content It is used to identify ul as a materialize dropdown component. It is required for ul element.
2) data-activates It is used to specify id of the dropdown ul element.

How to use Dropdown?

To add a dropdown list to any button, you must ensure that the data-activates attribute matches the id in the <ul> tag. You can add a divider with the <li class="divider"></li> tag. You can also add icons. Just add the icon inside the anchor tag.


Let's take an example to demonstrate dropdown:

Test it Now


Materialize Dropdowns 1
Materialize Dropdowns 2

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA