Sub menus in nav bar link in material ui

Question

Hi I am new to react and wanted to implement sub menus to my menu.

What I wanted was something like this Report > My report > MIS report

I am importing and using NavLink from react router dom.

The menu currently looks like this with no sub-menus:

This is my code where I am using the nav bar link:

export const mainListItems = (
  <List>
    <NavLink to="dashboard">
      <ListItem button>
        <ListItemIcon></ListItemIcon>
        <ListItemText primary="Dashboard" />
      </ListItem>
    </NavLink>
    <NavLink to="userform">
      <ListItem button>
        <ListItemIcon></ListItemIcon>
        <ListItemText primary="Registration" />
      </ListItem>
    </NavLink>
    <NavLink to="">
      <ListItem button>
        <ListItemIcon></ListItemIcon>
        <ListItemText primary="Report" />
      </ListItem>
    </NavLink>
  </List>
);

This is the link in my App.js

const App = () => (
  <HashRouter>
    <Switch>
      <Route path="/signin" component={SignIn} />
      <Route path="/userform" component={UserForm} />
      <Route path="/dashboard" component={Dashboard} />

      <Redirect from="/" to="signin" />
    </Switch>
  </HashRouter>
);

I need some direction in this. How do I implement my own sub menus

Answer 1

You can use Nested List Items and you can find a similar example here.