How to create multi-level navigation menu with MaterialUI and TypeScript? I would like to add to the '/questions' the follwing: 2 navigation menu:

• /questions/Tags
• /questions/Users

like as in the Screenshot

export function NavBar(...) {
  return (
    <>
      <Drawer>
        <List>
            <NavItem
              to="/questions"
              primary="questions"
              icon={CloudOff}
            />
          )}
          <NavItem to="/questions" primary="questions" icon={Window} />
        </List>
      </Drawer>
    </>
  );
}

CodePudding user response：

Lot of posibility...

The best way it's to prepare an array with the menu information and map on, something like this :

const TestArea = ({ params }) => {
  const menu = [{ mainMenu: "tata", subMenu: ["toto", "titi"] }];
  return (
    <>
      <Toolbar
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "flex-start",
        }}
      >
        {menu.map((item) => {
          return (
            <>
              <Typography variant="overline">{item.mainMenu}</Typography>
              {item.subMenu.map((subItem) => {
                return (
                  <Typography variant="caption" style={{ marginLeft: "40%" }}>
                    {subItem}
                  </Typography>
                );
              })}
            </>
          );
        })}
      </Toolbar>
    </>
  );
};

With this base, you can customize with the component of your choose, render element like link with a path to...

Button color="inherit" component={Link} to="/classic">

Yes, I know, it's plain JSX not TSX, it's just for example. If you need more information, say me !