materialize provides dropdown css class to make a ul element as a dropdown and add the id of the ul element to the data-activates attribute of the button or anchor element. the following table mentions the available classes and their effects.

sr.no.

class name & description

dropdown-content

identifies ul as a materialize dropdown component. required for ul element.

data-activates

id of the dropdown ul element.

following is an example of using a dropdown.

example

<!doctype html>
<html>
   <head>
      <title>the materialize dropdowns example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <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">
      <h3>drop down demo</h3>
      <ul id="dropdown" class="dropdown-content">
         <li><a href="#">inbox<span class="badge">12</span></a></li>
         <li><a href="#!">unread<span class="new badge">4</span></a></li>
         <li><a href="#">sent</a></li>
         <li class="divider"></li> 
         <li><a href="#">outbox<span class="badge">14</span></a></li>
      </ul>
      <a class="btn dropdown-button" href="#" data-activates="dropdown">mail box<i class="mdi-navigation-arrow-drop-down right"></i></a>
   </body>
</html>

output

verify the output.

Previous Lesson

Next Lesson