How do I display an image on left of Material-UI AppBar, but retain the "hamburger" menu?

Question

I'd like to display an image on the left of a Material-UI AppBar, but keep the "hamburger" menu and have the image just to the right of that.

Is it possible? I can add an image to the left using

<AppBar title="My App"
        iconElementLeft = {<img src='header-logo.png' alt="Logo" />} />;

However, that replaces the "hamburger" menu, which is of no use to me.

I also tried creating an img as a child of the AppBar, but that puts the image to the right of any iconElementRight elements.

A related question is where does Material-UI recommend placing the logo when you have a hamburger menu? I found discussion of product logo design but not placement (https://material.io/design/iconography/product-icons.html#icon-treatments). When you have a hamburger on the left and a profile icon on the right it seems there no appropriate place for an icon. I'm probably going to but it on the drawer that opens after the user clicks the hamburger. — Michael Osofsky, Aug 15 '20 at 21:37

score 40 · Answer 1 · edited Sep 09 '19 at 21:10

40

In material ui 4.3.2, there is no 'title' props for AppBar. So to add a logo try the following method.

<AppBar color="inherit">
    <Toolbar>
        <img src="logo.png" alt="logo" className={classes.logo} />
      </Toolbar>
</AppBar>

Use the css to restrict the logo size. i.e.

const useStyles = makeStyles({
  logo: {
    maxWidth: 160,
  },
});

edited Sep 09 '19 at 21:10

Matt Stone

3,705
4
23
40

answered Aug 15 '19 at 19:52

Vikas Kumar

2,978
3
14
24

score 17 · Answer 2 · answered Nov 16 '21 at 20:44

Here's the MUI way

import Logo from "../assets/logo.png";

<AppBar position="static">
    <Toolbar>
        <Box
            component="img"
            sx={{
            height: 64,
            }}
            alt="Your logo."
            src={Logo}
        />
...
    </Toolbar>
</AppBar>

score 12 · Accepted Answer · answered Nov 06 '16 at 16:14

12

Just pass your tag as the title. Material-ui will take a node as title

Something like

 <AppBar
    title={<img src="https://unsplash.it/40/40"/>}
  />

Working pen

Hope this helps!

answered Nov 06 '16 at 16:14

Pranesh Ravi

18,642
9
46
70

1

Nice. I did it the hard way and recreated the menu using and IconButton. Looks like I'll be refactoring that tomorrow. – dommer Nov 06 '16 at 19:02
2

This pen appears broken? – f1lt3r Jun 21 '18 at 16:07
5

Issues when using TypeScript. Type 'Element' is not assignable to type 'string'.ts(2322) – Timothy Oliver Feb 25 '21 at 16:55

How do I display an image on left of Material-UI AppBar, but retain the "hamburger" menu?

3 Answers3