How to create a nested, folding menu with Angular Material2?

Question

I am looking for support in Angular Material2 for submenus in the sidebar. The top level usually closes by default, and opening the top level will call up nested menu items.

I thought this made sense as a starting point, but the child navigation items display (poorly) outside the parent items:

plnkr

<md-sidenav-container class="my-container"> <md-sidenav #sidenav class="my-sidenav"> <md-list> <md-list-item> <h3 md-line> First Parent </h3> <md-nav-list> <a md-list-item href="#">First Child</a> <a md-list-item href="#">Second Child</a> <a md-list-item href="#">Third Child</a> </md-nav-list> </md-list-item> <md-list-item> <h3 md-line> Second Parent </h3> <md-nav-list> <a md-list-item href="#">First Child</a> <a md-list-item href="#">Second Child</a> </md-nav-list> </md-list-item> </md-list> </md-sidenav> <div class="my-container"> <button md-button (click)="sidenav.open()">Open</button> </div> </md-sidenav-container> 

Has anyone created such a sidebar using @ angular / stuff?

Answer 1

Unfortunately, at the moment, the material design library does not provide any tool to accomplish what you want.

Once it comes out, you can use the tree component to achieve what you want. Otherwise, you should look to build one yourself. I did it myself (in a proprietary code base, unfortunately), and I would be happy to help with specific questions. For this, I used nested <md-list> s, <button md-icon-button> and custom animations.