Materialize CSS Dropdown

Last Updated : 15 Sep, 2020

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.

Syntax:

HTML

<!-- Dropdown Trigger -->
<h5>
  <a class='dropdown-button btn green' 
     href='#'
     data-activates='dropdown1'>
    Drop Me!
    <i class="large material-icons">
      arrow_drop_down
    </i>
  </a>
</h5>

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:

HTML

<!DOCTYPE html>
<html>

<head>
    <!--Import Google Icon Font-->
    <link rel="stylesheet" href=
"https://fonts.googleapis.com/icon?family=Material+Icons">

    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">

    <script type="text/javascript" src=
        "https://code.jquery.com/jquery-2.1.1.min.js">
    </script>

    <!-- Let the browser know that the
  website is optimized for mobile -->
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
</head>

<body>
    <h4>Dropdown in Materialize:</h4>
    <!-- Dropdown Trigger -->
    <h5><a class='dropdown-button btn green'
            href='#' data-activates='dropdown1'>
            Drop Me!
            <i class="large material-icons">
                arrow_drop_down
            </i>
        </a>
    </h5>

    <!-- Dropdown Structure -->
    <ul id='dropdown1' class='dropdown-content'>

        <!-- Define the links in the dropdown -->
        <li>
            <a href=
"https://www.geeksforgeeks.org/materialize-css-collections/">
                Collections
            </a>
        </li>
        <li>
            <a href=
"https://www.geeksforgeeks.org/materialize-css-icons/">
                Icons
            </a>
        </li>

        <!-- Define a divider -->
        <li class="divider"></li>
        <li><a href="#!">Table</a></li>

        <!-- Define a list item with an icon -->
        <li>
            <a href="#!">
                <i class="material-icons">
                    view_module
                </i>
                Home
            </a>
        </li>
    </ul>

    <!-- Compiled and minified JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js">
    </script>
</body>

</html>