1

How would I place an entry of a drawer component at the bottom? (instead of consecutively from the top)

For example, I want the help item to be at the bottom of the drawer navigation.

enter image description here

Here is the code I have so far

     <Drawer
        variant="persistent"
        anchor="left"
      >
        <List>
          <ListItem>
             <ListItemIcon ... </ListItemIcon>
             <ListItemIcon ... </ListItemIcon>
          </ListItem>
          <ListItem>
             <ListItemIcon ... </ListItemIcon>
             <ListItemIcon ... </ListItemIcon>
          </ListItem>
          <ListItem>
             <ListItemIcon ... </ListItemIcon>
             <ListItemIcon ... </ListItemIcon>
          </ListItem>
          <ListItem>
             <ListItemIcon ... </ListItemIcon>
             <ListItemIcon ... </ListItemIcon>
          </ListItem>
          <ListItem>
             <ListItemIcon ... </ListItemIcon>
             <ListItemIcon ... </ListItemIcon>
          </ListItem>
          <ListItem>
             <ListItemIcon ... </ListItemIcon>
             <ListItemIcon ... </ListItemIcon>
          </ListItem>


          <ListItem
            style={{ position: "absolute", bottom: "0" }}
            dense
            button
            component={Link}
            to={"/help"}
          >
            <ListItemIcon>{<HelpIcon />}</ListItemIcon>
            <ListItemText primary={"Help"} />
          </ListItem>
        </List>
      </Drawer>

There have been some past posts about this topic but nothing related to using list components to build drawer components.

vicki
  • 225
  • 2
  • 10

2 Answers2

3

I found a solution!! Create a separate list and add style={{ position: "absolute", bottom: "0" }} to its style prop.

vicki
  • 225
  • 2
  • 10
1

Easiest answer I can think of is adding a margin-top: auto (might be marginTop for the style prop) to the ListItem

coravacav
  • 131
  • 1
  • 1
  • 7