Site icon Ampersand Tutorials

Nested Dropdown in Materialize CSS in Easy 3 steps

Dinesh Kumar R

Quick answer: A nested dropdown in Materialize CSS is a dropdown menu placed inside a parent dropdown list item, usually inside the li.dropdown-item wrapper. You wrap the parent label in a sub menu trigger, nest a ul.dropdown-menu with the sub items inside, and use a small icon or arrow so visitors know a second level exists.

Learn how to create Nested Dropdown in Materialize CSS

Nested dropdown is one of the most important elements web developers look for while designing the website. Materialize CSS Framework does not offer nested dropdown in their repository. In this tutorial, you will be learning how to create a nested dropdown menu in Materialize CSS framework. 

Creating Dropdown Button:

Initially, we need to insert the dropdown button from the Materialize CSS Framework. We need to add the respective JS for the dropdown menu.

Step 1: 

Create an HTML template from the Materialize CSS official website. Use the following link:

http://materializecss.com/getting-started.html


  <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <!-- Compiled and minified CSS -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
     

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
    </body>
  </html>

Step 2:

Add the DropDown button as given on the website. Use the following link: 

http://materializecss.com/dropdown.html

Dropdown Code
Dropdown Button
Dropdown Open

Step 3:

We can now add the nested dropdown in created dropdown button.

  1. In the last list item in <ul>, we can now copy paste the classes for the dropdown menu. 
  2. Change the data-activates option to dropdown2 and change the class name to dropdown-button2
  3. Insert the following javascript within the script tag.
  4. Add the following style just above the </head> tag
 <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <style>.dropdown-content{
    overflow: visible !important;
}</style>
    </head>

    <body>
     <a class='dropdown-button btn' href='#' data-activates='dropdown1' data-beloworigin="true">Drop Me!</a>
        <ul id='dropdown1' class='dropdown-content'>
            <li><a href="#!">one</a></li>
            <li><a href="#!">two</a></li>
            <li class="divider"></li>
            <li>
                <a class='dropdown-button2' href='#' data-activates='dropdown2'>Dropdown></a>
            </li>
        </ul>
        <ul id='dropdown2' class='dropdown-content'>
            <li><a href="#!">one</a></li>
            <li><a href="#!">two</a></li>
        </ul>
        
      <!--Import jQuery before materialize.js-->
      <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.98.0/js/materialize.min.js"></script>
      <script>
        $(document).ready(function(){
          $('.dropdown-button2').dropdown({
              inDuration: 300,
              outDuration: 225,
              constrain_width: false, // Does not change width of dropdown to that of the activator
              hover: true, // Activate on hover
              gutter: ($('.dropdown-content').width()*3)/2.5 + 2, // Spacing from edge
              belowOrigin: false, // Displays dropdown below the button
              alignment: 'left' // Displays dropdown with edge aligned to the left of button
            }
          );
         
        });
        </script>
    </body>
  </html>
Nested Dropdown Button
Nested Dropdown Open

We have successfully created the nested dropdown in Materialize CSS framework.

In this tutorials series, you’ll learn more Materialize CSS Plugins, Working Codes and tutorials. In the next tutorial, you’ll learn how to create Navbar with Autocomplete Search Box

Frequently asked questions

Can you nest a second dropdown menu inside a Materialize dropdown?

Yes. Put a new ul with the dropdown-menu class inside the parent li.dropdown-item, then add the dropdown-trigger class to its label.

How many levels of sub menus can Materialize CSS handle?

Materialize CSS has no fixed limit, but three levels is a practical maximum for readability. Deeper menus usually confuse visitors on mobile.

Why does my Materialize sub menu not open on hover?

The dropdown-trigger class only opens menus on click. Hover behaviour needs a small jQuery handler of your own.

Exit mobile version