From http://gohugo.io/extras/menus/

hugo-menu-rendering.html

<!--sidebar start-->
<aside>
    <div id="sidebar" class="nav-collapse">
        <!-- sidebar menu start-->
        <ul class="sidebar-menu">
          {{ $currentNode := . }}
          {{ range .Site.Menus.main }}
              {{ if .HasChildren }}

            <li class="sub-menu{{if $currentNode.HasMenuCurrent "main" . }} active{{end}}">
            <a href="javascript:;" class="">
                {{ .Pre }}
                <span>{{ .Name }}</span>
                <span class="menu-arrow arrow_carrot-right"></span>
            </a>
            <ul class="sub">
                {{ range .Children }}
                <li{{if $currentNode.IsMenuCurrent "main" . }} class="active"{{end}}><a href="{{.URL}}"> {{ .Name }} </a> </li>
                {{ end }}
            </ul>
          {{else}}
            <li>
            <a class="" href="{{.URL}}">
                {{ .Pre }}
                <span>{{ .Name }}</span>
            </a>
          {{end}}
          </li>
          {{end}}
            <li> <a href="https://github.com/spf13/hugo/issues" target="blank">Questions and Issues</a> </li>
            <li> <a href="#" target="blank">Edit this Page</a> </li>
        </ul>
        <!-- sidebar menu end-->
    </div>
</aside>
<!--sidebar end-->

materialize-menu.html

<ul id="nav-mobile" class="side-nav fixed">
      <li class="logo">
        <a id="logo-container" href="http://esolia.com" class="brand-logo">
          <object id="front-page-logo" type="image/svg+xml" data="/img/eSolia-Logo-Flat-2015.svg" width="100%">Your browser does not support SVG</object>
        </a>
      </li>
      <li class="bold active"><a href="about.html" class="waves-effect waves-teal">About</a></li>
      <li class="bold"><a href="getting-started.html" class="waves-effect waves-teal">Getting Started</a></li>
      <li class="no-padding">
        <ul class="collapsible collapsible-accordion">
          <li class="bold"><a class="collapsible-header  waves-effect waves-teal">CSS</a>
            <div class="collapsible-body">
              <ul>
                <li><a href="color.html">Color</a></li>
                <li><a href="grid.html">Grid</a></li>
                <li><a href="helpers.html">Helpers</a></li>
                <li><a href="media-css.html">Media</a></li>
                <li><a href="sass.html">Sass</a></li>
                <li><a href="shadow.html">Shadow</a></li>
                <li><a href="table.html">Table</a></li>
                <li><a href="typography.html">Typography</a></li>
              </ul>
            </div>
          </li>
          <li class="bold"><a class="collapsible-header  waves-effect waves-teal">Components</a>
            <div class="collapsible-body">
              <ul>
                <li><a href="badges.html">Badges</a></li>
                <li><a href="buttons.html">Buttons</a></li>
                <li><a href="cards.html">Cards</a></li>
                <li><a href="collections.html">Collections</a></li>
                <li><a href="footer.html">Footer</a></li>
                <li><a href="forms.html">Forms</a></li>
                <li><a href="icons.html">Icons</a></li>
                <li><a href="navbar.html">Navbar</a></li>
                <li><a href="pagination.html">Pagination</a></li>
                <li><a href="preloader.html">Preloader</a></li>
              </ul>
            </div>
          </li>
          <li class="bold"><a class="collapsible-header  waves-effect waves-teal">JavaScript</a>
            <div class="collapsible-body">
              <ul>
                <li><a href="collapsible.html">Collapsible</a></li>
                <li><a href="dialogs.html">Dialogs</a></li>
                <li><a href="dropdown.html">Dropdown</a></li>
                <li><a href="media.html">Media</a></li>
                <li><a href="modals.html">Modals</a></li>
                <li><a href="parallax.html">Parallax</a></li>
                <li><a href="pushpin.html">Pushpin</a></li>
                <li><a href="scrollfire.html">ScrollFire</a></li>
                <li><a href="scrollspy.html">Scrollspy</a></li>
                <li><a href="side-nav.html">SideNav</a></li>
                <li><a href="tabs.html">Tabs</a></li>
                <li><a href="transitions.html">Transitions</a></li>
                <li><a href="waves.html">Waves</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </li>
      <li class="bold"><a href="http://materializecss.com/mobile.html" class="waves-effect waves-teal">Mobile</a></li>
      <li class="bold"><a href="showcase.html" class="waves-effect waves-teal">Showcase</a></li>
    </ul>