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:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- 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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:





My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.