title: Sidenav (Menu / Submenu) Angular 4 Material Design 2
body: <p>I'm working in a project with Angular 4 and Material Design (Angular Material). I have trouble with the sidenav menu. I don't know how to create a sub menu or subcategories. I need to add (Maths, Communication, Arts) below of each disability.</p>
  
  <p>Categories:</p>
  
  <p><img src="https://i.stack.imgur.com/TTVaw.png" alt="Categories"></p>
  
  <p>This is my code:</p>
  
  <pre><code>  &lt;md-list-item&gt;
      &lt;md-icon md-list-icon&gt;face&lt;/md-icon&gt;
      &lt;span class="sidenav-item-name" md-line&gt;{{category.name}}&lt;/span&gt;
      &lt;md-icon&gt;keyboard_arrow_down&lt;/md-icon&gt;
     &lt;/md-list-item&gt;
  </code></pre>
  
  <p>I found an example of the menu but it didn't work:</p>
  
  <pre><code>&lt;a&gt; 
   &lt;md-icon aria-hidden="true"&gt;trending_flat&lt;/md-icon&gt; 
   &lt;span&gt;Menu&lt;/span&gt; &lt;md-icon aria-hidden="true"&gt;chevron_right&lt;/md-icon&gt; 
  &lt;/a&gt; 
  &lt;md-nav-list&gt; 
   &lt;md-list-item routerlinkactive="open"&gt; 
    &lt;div &gt; &lt;a routerlinkactive="active-link" href="/pages/blank"&gt;Sub Menu1&lt;/a&gt; 
    &lt;/div&gt; 
   &lt;/md-list-item&gt; 
   &lt;md-list-item routerlinkactive="open"&gt; 
    &lt;div &gt; &lt;a routerlinkactive="active-link" href="/pages/blank"&gt;Sub Menu2&lt;/a&gt; 
    &lt;/div&gt; 
   &lt;/md-list-item&gt; 
  &lt;/md-nav-list&gt;
  </code></pre>
  
  <p>I don't know how to implement it right or what extra code or "class" I need to add. This is how it looks.</p>
  
  <p>Menu with error:</p>
  
  <p><img src="https://i.stack.imgur.com/edrr8.png" alt="Menu with error"></p>