CODEWITHSUNDEEP
reactjsmaterial-uiappbar
dommer
dommer

Reputation: 19810

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

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.

Upvotes: 19

Views: 68284

Answers (3)

Roozbeh
Roozbeh

Reputation: 732

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>

Upvotes: 22

Vikas Kumar
Vikas Kumar

Reputation: 2998

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,
  },
});

Upvotes: 40

Pranesh Ravi
Pranesh Ravi

Reputation: 19113

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!

Upvotes: 12

Related Questions