Open In App

Materialize CSS Dropdown

Improve
Improve
Like Article
Like
Save
Share
Report

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:

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=
  
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href=
  
    <script type="text/javascript" src=
    </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=
                Collections
            </a>
        </li>
        <li>
            <a href=
                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=
    </script>
</body>
  
</html>


Output:




Last Updated : 15 Sep, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads