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/css/materialize-css-collections/">
Collections
</a>
</li>
<li>
<a href=
"https://www.geeksforgeeks.org/css/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>
Output:
