title: Sub menus in nav bar link in material ui
body: <p>Hi I am new to react and wanted to implement sub menus to my menu.</p>
  <p>What I wanted was something like this  Report &gt; My report
  &gt; MIS report</p>
  <p>I am importing and using NavLink from react router dom.</p>
  <p>The menu currently looks like this with no sub-menus:</p>
  <p><a href="https://i.stack.imgur.com/pI5tL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pI5tL.png" alt="enter image description here" /></a></p>
  <p>This is my code where I am using the nav bar link:</p>
  <pre><code>export const mainListItems = (
    &lt;List&gt;
      &lt;NavLink to=&quot;dashboard&quot;&gt;
        &lt;ListItem button&gt;
          &lt;ListItemIcon&gt;&lt;/ListItemIcon&gt;
          &lt;ListItemText primary=&quot;Dashboard&quot; /&gt;
        &lt;/ListItem&gt;
      &lt;/NavLink&gt;
      &lt;NavLink to=&quot;userform&quot;&gt;
        &lt;ListItem button&gt;
          &lt;ListItemIcon&gt;&lt;/ListItemIcon&gt;
          &lt;ListItemText primary=&quot;Registration&quot; /&gt;
        &lt;/ListItem&gt;
      &lt;/NavLink&gt;
      &lt;NavLink to=&quot;&quot;&gt;
        &lt;ListItem button&gt;
          &lt;ListItemIcon&gt;&lt;/ListItemIcon&gt;
          &lt;ListItemText primary=&quot;Report&quot; /&gt;
        &lt;/ListItem&gt;
      &lt;/NavLink&gt;
    &lt;/List&gt;
  );
  </code></pre>
  <p>This is the link in my App.js</p>
  <pre><code>const App = () =&gt; (
    &lt;HashRouter&gt;
      &lt;Switch&gt;
        &lt;Route path=&quot;/signin&quot; component={SignIn} /&gt;
        &lt;Route path=&quot;/userform&quot; component={UserForm} /&gt;
        &lt;Route path=&quot;/dashboard&quot; component={Dashboard} /&gt;
  
        &lt;Redirect from=&quot;/&quot; to=&quot;signin&quot; /&gt;
      &lt;/Switch&gt;
    &lt;/HashRouter&gt;
  );
  </code></pre>
  <p>I need some direction in this. How do I implement my own sub menus</p>