Materialize CSS Dropdown - GeeksforGeeks

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.
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/?ref=rp">                Collections            </a>        </li>        <li>            <a href="https://www.geeksforgeeks.org/materialize-css-icons/?ref=rp">                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>
Output:
Materialize-CSS
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?