We had a failed attempt to create hierarchy in the sidenav while creating Two side-navs with Vanilla JavaScript - left-hand side-nav and right-hand side-nav. Materialize has collapsibles that can be used for this.

For more details see the documentation of the sidenav

examples/materializecss/side-nav-with-hierarchy.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Materialize: Sidenav with vanilla JavaScript</title>
  </head>

  <body>
    <div class="container">
      <!-- start the definition of the sidenav -->
      <ul id="slide-out" class="sidenav">
        <li><a href="#!">First Sidebar Link</a></li>
        <li><a href="#!">Second Sidebar Link</a></li>
        <li class="no-padding">
          <ul class="collapsible collapsible-accordion">
            <li>
              <a class="collapsible-header">Dropdown<i class="material-icons">arrow_drop_down</i></a>
              <div class="collapsible-body">
                <ul>
                  <li><a href="#!">First</a></li>
                  <li><a href="#!">Second</a></li>
                  <li><a href="#!">Third</a></li>
                  <li><a href="#!">Fourth</a></li>
                </ul>
              </div>
            </li>
          </ul>
        </li>
      </ul>
      <!-- end the definition of the sidenav -->

      <div class="row">
        <!-- the button to open the sidenav -->
        <div class="col s1"><a href="#" data-target="slide-out" class="sidenav-trigger">show main menu</a></div>
        <div class="col s11">&nbsp;</div>

        <div class="col s12">
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
           dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
           ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
           fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
           mollit anim id est laborum."
        </div>
      </div>


    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const elem = document.getElementById('slide-out');
    const options = {};
    const instance = M.Sidenav.init(elem, options);
    // instance.open()

    const collapsibles = document.querySelectorAll('.collapsible');
    const coptions = {};
    const collapsible_instances = M.Collapsible.init(collapsibles, coptions);
});
</script>
Try!

In order to open the side navigation bar the user needs to click on the "show main menu" link.

We had to initialize both the sidenav and the collapsible in the JavaScript code.

In order to see the little triangle to open the second level of items we had to include the Material fonts (the second stylesheet include at the top of the file).