I'm new to reactjs and material ui I would like to create a drop down in my nav bar

Question

The following below are my codes

I would like to put a dropdown on my UI Elements and Tables on my navbar having trouble to do it

My current Output

Ideal Output

LayoutMain.js

          {links.map(({ icon: Icon, ...link }, index) => (
            <ListItem
              button
              key={link.name}
              onClick={() => gotoRoute(link.route)}
              selected={link.route === location.pathname}
            >
              <ListItemIcon>
                <Icon />
              </ListItemIcon>
              <ListItemText primary={link.name} />
            </ListItem>
          ))}
        </List>

Links.js

export const links = [
  {
    name: 'Dashboard',
    icon: Dashboard,
    route: '/',

  },
  {
    name: 'UI Elements',
    icon: ListAlt,
    route: '/UIElements',
  },
  {
    name: 'General',
    icon: RadioButtonUnchecked,
    route: '/General',

  },
  {
    name: 'Tables',
    icon: TableChart,
    route: '/Tables'
  }
];

question from:https://stackoverflow.com/questions/66048634/im-new-to-reactjs-and-material-ui-i-would-like-to-create-a-drop-down-in-my-nav

Answer 1

One way you could do this is by using an Accordion component from MUI

{links.map(({ icon: Icon, ...link }, index) => {
   if (link.name !== 'UI Elements') {
     return 
       <ListItem
         button
         key={link.name}
         onClick={() => gotoRoute(link.route)}
         selected={link.route === location.pathname}
       >
       <ListItemIcon>
         <Icon />
       </ListItemIcon>
       <ListItemText primary={link.name} />
      </ListItem>
   } else return
     <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <Typography>{link.name}</Typography>
        </AccordionSummary>
        <AccordionDetails>
          {uiElements.map((uiElement) => (
            <ListItem>
             <ListItemIcon>
              <Icon />
             </ListItemIcon>
             <ListItemText primary={link.name} />
            </ListItem>
          )}
        </AccordionDetails>
      </Accordion>
 })}
</List>

You would need another array of uiElements inside your uiElements object to map through with the additional information.