What are the Materialize classes of Dropdowns ?

Last Updated : 27 Dec, 2022

Materialize is a modern responsive CSS framework based on Material Design by Google. Its goal is to develop a system of design that allows integrated user experience across all its services on any platform. Materialize is a design language that combines the classic principles of successful design along with innovation and technology. Materialize comes with various useful components which helps developer to create responsive websites.

Dropdown is one of the built-in components of materialize CSS. Dropdown in Materialize CSS is basically used to allow the user to select one of the values in a list. Materialize CSS has a stylish dropdown list having various interactive options.

Materialize CSS provides various CSS classes to create a nice dropdown in an easy way. The following are the available classes and their usage.

dropdown-content: It is used to identify an unordered list (ul) as a materialize dropdown component. It is required for ul element.
data-activates : It is used to specify the ID of the dropdown unordered list (ul) element.

Dropdown in Materialize CSS provides several CSS classes to add a dropdown list to any button. Only you need to make sure that the data-activates attribute id matches the id in the unordered list element tag i.e. <ul>. You can add a divider to divide two elements of ul tag, with the class “divider”. You can also add icons as implemented in the following examples.

Example 1: The following example demonstrates a simple dropdown box.

HTML

<!DOCTYPE html>
<html>
 
<head>
 
    <!-- Imported Materialize Font Icon library -->
    <link rel="stylesheet" href=
"https://fonts.googleapis.com/icon?family=Material+Icons" />
 
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css" />
    <script type="text/javascript"
        src="https://code.jquery.com/jquery-2.1.1.min.js">
    </script>
 
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
    </script>
</head>
 
<body class="container">
    <h2 class="green-text">GeeksforGeeks</h2>
    <h3 class="blue-grey-text">
        Materialize CSS Dropdown
    </h3>
 
    <!-- Dropdown Initiated -->
    <ul id="dropdownId" class="dropdown-content">
        <li><a href="#">CSS</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">PHP</a></li>
        <li><a href="#">Java</a></li>
 
        <!-- Setting a divider -->
        <li class="divider"></li>
        <li><a href="#" class="black-text">End</a></li>
    </ul>
 
    <!-- DropdownId assigned to data-activates property  -->
 
    <a class="btn dropdown-button" href="#"
        data-activates="dropdownId">
        Tutorials
 
        <!-- Icons used here -->
        <i class="mdi-navigation-arrow-drop-down 
            right material-icons">
        </i>
    </a>
</body>
 
</html>

Output:

Example 2: The following example demonstrates a dropdown with Materialize CSS Badges Component with some options setting in the initialization of the dropdown plugin.

HTML

<!DOCTYPE html>
<html>
 
<head>
 
    <!-- Imported Materialize Font Icon library -->
    <link rel="stylesheet" href=
"https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css" />
    <script type="text/javascript"
        src="https://code.jquery.com/jquery-2.1.1.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
    </script>
</head>
 
<body class="container">
 
    <br />
    <h2 class="green-text">GeeksforGeeks</h2>
    <h3 class="blue-grey-text">
        Materialize badge classes
    </h3>
 
    <!-- Dropdown Initiated -->
    <ul id="dropdownId" class="dropdown-content">
        <li>
            <!-- use of Badge class -->
            <a href="#">Checked<span
                class="card badge">89+</span>
            </a>
        </li>
        <li>
            <a href="#!">Unchecked
                <span class="card new badge blue">20</span>
            </a>
        </li>
        <li><a href="#" class="card badge">Spam</a></li>
 
        <li class="divider"></li>
        <li><a href="#">Junk<span
            class="badge">14</span></a>
        </li>
    </ul>
 
    <!-- DropdownId of ul is assigned 
        to data-activates property -->
    <a class="btn dropdown-button" href="#"
        data-activates="dropdownId">
        My mails
 
        <!-- Using Icons -->
        <i class="mdi-navigation-arrow-drop-down right"></i>
    </a>
 
    <script>
        $('.dropdown-button').dropdown({
            inDuration: 250,// Enter transition in ms
            outDuration: 250,// Out transition in ms
            constraintWidth: true,// Width takes size of activator
            hover: true, // Activate on hover    
            belowOrigin: true, //Dropdown is below activator
            alignment: 'right'
        });
    </script>
</body>
 
</html>