Adding vertical divider to material-ui AppBar component

You can use a right border in order to add a vertical divider. Use em for the border size and padding size so that your elements are responsive. You can see the result here

<Toolbar>
  <Typography
    type="title"
    color="inherit"
    style={{ borderRight: '0.1em solid black', padding: '0.5em' }}
  >
    Title
  </Typography>

  <Typography type="title" color="inherit" style={{ padding: '0.5em' }}>
    Title 2
  </Typography>
</Toolbar>

This can also be used for vertical menubar dividers:

<Divider orientation="vertical" flexItem />

See here: https://material-ui.com/components/dividers/