Material UI — App Bar Customization

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to customize app bars with Material UI.

Dense App Bar

We can add a dense app bar for desktop apps.

To do that, we set the variant prop to dense .

For example, we can write:

import React from "react";
import AppBar from "@materialui/core/AppBar";
import Toolbar from "@materialui/core/Toolbar";
import IconButton from "@materialui/core/IconButton";
import Typography from "@materialui/core/Typography";
import MenuIcon from "@materialui/icons/Menu";

export default function App() {
  return (
    <div>
      <AppBar position="static">
        <Toolbar variant="dense">
          <IconButton edge="start">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" color="inherit">
            app
          </Typography>
        </Toolbar>
      </AppBar>
    </div>
  );
}

Bottom App Bar

To add the app bar to the bottom of the page, we make its position static.

For example, we can write:

import React from "react";
import AppBar from "@materialui/core/AppBar";
import Toolbar from "@materialui/core/Toolbar";
import IconButton from "@materialui/core/IconButton";
import Typography from "@materialui/core/Typography";
import MenuIcon from "@materialui/icons/Menu";
import Paper from "@materialui/core/Paper";
import { makeStyles } from "@materialui/core/styles";

const useStyles = makeStyles(theme => ({
  paper: {
    height: "calc(100vh - 100px)"
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div>
      <Paper square className={classes.paper}>
        foo
      </Paper>
      <AppBar position="static">
        <Toolbar variant="dense">
          <IconButton edge="start">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" color="inherit">
            app
          </Typography>
        </Toolbar>
      </AppBar>
    </div>
  );
}

We make the AppBar ‘s position static with the position prop.

Then we have our content in the Paper component.

We make it take up most of the height of the page.

Fixed Placement

We can make the placement of the AppBar fixed with the position prop.

For example, we can write:

import React from "react";
import AppBar from "@materialui/core/AppBar";
import Toolbar from "@materialui/core/Toolbar";
import IconButton from "@materialui/core/IconButton";
import Typography from "@materialui/core/Typography";
import MenuIcon from "@materialui/icons/Menu";
import Paper from "@materialui/core/Paper";
import { makeStyles } from "@materialui/core/styles";

const useStyles = makeStyles(theme => ({
  paper: {
    paddingTop: 50
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div>
      <AppBar position="fixed">
        <Toolbar variant="dense">
          <IconButton edge="start">
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" color="inherit">
            app
          </Typography>
        </Toolbar>
      </AppBar>
      <Paper square className={classes.paper}>
        foo
      </Paper>
    </div>
  );
}

to make the AppBar fixed with the position prop set to fixed .

We can replace fixed with sticky to get the same effect.

Scrolling

We can make the app bar disappear when we scroll down,

For example, we can write:

import React from "react";
import AppBar from "@materialui/core/AppBar";
import Toolbar from "@materialui/core/Toolbar";
import Typography from "@materialui/core/Typography";
import CssBaseline from "@materialui/core/CssBaseline";
import useScrollTrigger from "@materialui/core/useScrollTrigger";
import Box from "@materialui/core/Box";
import Container from "@materialui/core/Container";
import Slide from "@materialui/core/Slide";

function HideOnScroll(props) {
  const { children, window } = props;
  const trigger = useScrollTrigger({ target: window ? window() : undefined });

  return (
    <Slide appear={false} direction="down" in={!trigger}>
      {children}
    </Slide>
  );
}

export default function App() {
  return (
    <>
      <CssBaseline />
      <HideOnScroll>
        <AppBar>
          <Toolbar>
            <Typography variant="h6"> App Bar</Typography>
          </Toolbar>
        </AppBar>
      </HideOnScroll>
      <Toolbar />
      <Container>
        <Box my={2}>
          {[...new Array(200)]
            .map(() => `Lorem ipsum dolor sit amet`)
            .join("n")}
        </Box>
      </Container>
    </>
  );
}

to make the app bar disappear when we scroll down.

We did that with the HideOnScroll component.

The Slide component lets us make the scrollbar disappear when we scroll.

This is done by the useScrollTrigger hook.

We set the appear prop of the Slide to false to make the content disappear when we scroll.

The direction prop is set to down so that the content disappears when we scroll down.

Button to get Back to the Top

We can add a button to let us scroll to the top of the page.

For example, we can write:

import React from "react";
import AppBar from "@materialui/core/AppBar";
import Toolbar from "@materialui/core/Toolbar";
import Typography from "@materialui/core/Typography";
import CssBaseline from "@materialui/core/CssBaseline";
import useScrollTrigger from "@materialui/core/useScrollTrigger";
import Box from "@materialui/core/Box";
import Container from "@materialui/core/Container";
import Fab from "@materialui/core/Fab";
import KeyboardArrowUpIcon from "@materialui/icons/KeyboardArrowUp";
import Zoom from "@materialui/core/Zoom";
import { makeStyles } from "@materialui/core/styles";

const useStyles = makeStyles(theme => ({
  root: {
    position: "fixed",
    bottom: theme.spacing(2),
    right: theme.spacing(2)
  }
}));

function ScrollTop(props) {
  const { children, window } = props;
  const classes = useStyles();
  const trigger = useScrollTrigger({
    target: window ? window() : undefined,
    disableHysteresis: true,
    threshold: 100
  });

  const handleClick = event => {
    const anchor = (event.target.ownerDocument || document).querySelector(
      "#top"
    );

    if (anchor) {
      anchor.scrollIntoView({ behavior: "smooth", block: "center" });
    }
  };

  return (
    <Zoom in={trigger}>
      <div onClick={handleClick} className={classes.root}>
        {children}
      </div>
    </Zoom>
  );
}

export default function App() {
  return (
    <React.Fragment>
      <CssBaseline />
      <AppBar>
        <Toolbar>
          <Typography variant="h6"> App Bar</Typography>
        </Toolbar>
      </AppBar>
      <Toolbar id="top" />
      <Container>
        <Box my={2}>
          {[...new Array(200)]
            .map(() => `Lorem ipsum dolor sit amet`)
            .join("n")}
        </Box>
      </Container>
      <ScrollTop>
        <Fab color="secondary" size="small">
          <KeyboardArrowUpIcon />
        </Fab>
      </ScrollTop>
    </React.Fragment>
  );
}

to add a floating action button that we can click to move to the top of the page.

ScrollToTop is a component that uses the useScrollTrigger gook to move to the top of the page.

It has the trigger that we pass into the in prop.

The handleClick function lets us scroll to the top with the scrollIntoView method.

Conclusion

We can add app bars with various customizations.

We can make it fixed and scroll to the top with by adding our own code.