Material UI > Material UI AppBar

Material-UI's AppBar

The AppBar component in Material UI is a Paper component with some special CSS properties.

The main CSS properties added here to make this bar stick to the top of the screen are the position: fixed, top: 0, with the width: 100% to set this to stretch across the screen. Of course, a z-index puts the content above other content on the page.

AppBar Position prop

By default, the AppBar's position is fixed, and the appropriate CSS positioning is set by the component (top, left, right). You can change the position property of the AppBar by using the position prop. The available options are the same as the CSS position values- position absolute, fixed, relative, static and sticky.

AppBar Color prop / Custom AppBar color

There are two ways to set the color of the AppBar component. You can use the color prop, with options: default, inherit, primary, secondary, transparent. These will refer to the colors set in Material UI's theme. If you want to set a custom color, see the examples here where we use a custom CSS class to set the backgroundColor.

Material UI's Toolbar component

The AppBar doesn't actually set any of the properties of the children to make them horizontally aligned in the way they are. That is the responsibility of the Toolbar component. The Toolbar component simply applies normal flex CSS (display: 'flex'), along with vertical centering via alignItems: 'center', some padding, and the minHeight: 56px provided by theme.mixins.toolbar.

Because the Toolbar has a minHeight of 56px, it can also be used as your first component in your main content section, to act as a spacer. As you can see in our example, "this content doesn't appear below the AppBar", the paragraph starts about 64px from the top of the screen. The additional 8px padding is at the top of the document by default, set by the browser's <body> tag, which is overridden by the App Bar setting top: 0px. This seems to be why using the Toolbar component as the first component works, because it is offset by 8px, so the start of your content appears just below the AppBar.

In our above example, we use flexGrow: 1 in our custom CSS class for the title, so that it stretches across available empty space. Because Toolbar is a flexbox, we can use any of the flex properties on the children as normal. See our Material UI grid tutorial for more discussion on Flexbox.

AppBar documentation

Lesson 5/12

import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";
import { createTheme, ThemeProvider, styled } from "@mui/material/styles";
import { green } from "@mui/material/colors";

const theme = createTheme({
  palette: {
    primary: {
      main: green[200],
    },
    secondary: {
      main: green[500],
    },
  },
});

function ButtonAppBar() {
  return (
    <ThemeProvider theme={theme}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            FrogNotes
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </ThemeProvider>
  );
}

export default function App() {
  return (
    <>
      <ButtonAppBar />
    </>
  );
}

Open Sandbox