How to create an Appbar in Material-UI React

Material-UI Appbar component:

App Bar is used as the top header bar in a screen. All information related to the current screen like title and other action buttons like search, menu buttons etc. are shown inside an app bar.

YouTube video:

I have published one YouTube video on AppBar. You can watch it here:

Simple example:

We need to use one Toolbar component in an AppBar. Both are defined in material-ui/core.Inside the toolbar, we can add other components like menu buttons, title etc. in a toolbar.

Let's take a look at the below example:

import {
  AppBar,
  Toolbar,
  Typography,
  IconButton,
  Button,
  makeStyles,
  createStyles,
} from "@material-ui/core";
import MenuIcon from "@material-ui/icons/Menu";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    heading: {
      flexGrow: 1,
    },
    white: {
      color: "white",
    },
  })
);

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

  return (
    <div>
      <AppBar>
        <Toolbar>
          <IconButton className={classes.white}>
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.heading}>
            This is a heading
          </Typography>
          <Button className={classes.white}>Sign In</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}

export default App;

Here, we are using a Toolbar inside an AppBar with one menu icon, heading text and one button.

It will give the below output:

Changing the color of AppBar:

We can change the color of an AppBar by using the color props.

import {
  AppBar,
  Toolbar,
  Typography,
  IconButton,
  Button,
  makeStyles,
  createStyles,
  colors,
} from "@material-ui/core";
import MenuIcon from "@material-ui/icons/Menu";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    appBar: {
      backgroundColor: colors.brown[500],
    },
    heading: {
      flexGrow: 1,
    },
    white: {
      color: "white",
    },
  })
);

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

  return (
    <div>
      <AppBar className={classes.appBar}>
        <Toolbar>
          <IconButton className={classes.white}>
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.heading}>
            This is a heading
          </Typography>
          <Button className={classes.white}>Sign In</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}

export default App;

Adding a different component with Appbar:

We can also show one component with Appbar. Let's create one component called RandomText with the below content:

import { Typography } from "@material-ui/core";

const RandomText = () => (
  <Typography variant="p">
    Adipisicing incididunt do occaecat commodo eiusmod reprehenderit incididunt.
    Culpa veniam adipisicing culpa non officia. In ullamco commodo ex dolore.
    Quis consectetur culpa pariatur veniam dolore ex. Veniam deserunt tempor et
    eiusmod magna. Voluptate enim excepteur irure fugiat in velit deserunt ut
    pariatur minim. Adipisicing labore quis non velit deserunt nostrud laborum
    ut ipsum exercitation ad fugiat et exercitation. Velit non elit ullamco esse
    occaecat ut Lorem irure veniam dolor sit ea elit elit. Ex sint elit qui
    cillum nostrud in amet et veniam. Eu tempor do qui voluptate ipsum id et sit
    ex ex Lorem. Commodo ipsum est nulla proident excepteur sunt Lorem. Qui
    labore eiusmod veniam exercitation tempor aliquip enim laboris occaecat
    irure eu cillum nulla consectetur. Est duis non eu culpa velit non do
    proident adipisicing excepteur velit sint do. Sint velit sunt magna Lorem
    excepteur. Anim ea consequat do veniam ipsum ad irure adipisicing aute.
    Proident consectetur sint sunt ea laboris. Elit sunt minim quis nulla
    cupidatat commodo magna. Deserunt minim cillum laboris ullamco est elit
    minim cupidatat. Fugiat minim nulla et incididunt amet culpa velit nisi
    occaecat. Cillum consectetur sint cillum fugiat sit nulla. Deserunt non anim
    magna minim ut in esse eu nulla cupidatat ullamco dolore quis aute.
    Exercitation incididunt ut cupidatat qui veniam sunt adipisicing irure.
    Cupidatat elit occaecat velit consequat sint sunt cillum. Qui magna non
    pariatur ullamco culpa in consectetur proident ullamco commodo cillum. Nulla
    ex do consectetur eu. Incididunt adipisicing incididunt sunt laboris minim
    ut occaecat. Magna nostrud culpa nostrud laboris Lorem cupidatat consectetur
    ex. Culpa tempor culpa laborum cupidatat id duis reprehenderit. Excepteur id
    pariatur ex cillum anim consequat. Anim ea eiusmod cillum officia id esse
    incididunt do ut cillum aliquip. Proident ea irure eiusmod aute. Adipisicing
    esse adipisicing ex deserunt ex commodo sit voluptate irure enim
    exercitation. Sunt incididunt sit amet quis ea fugiat. Reprehenderit nulla
    quis non occaecat. Reprehenderit aliquip ipsum esse ea anim qui in Lorem
    magna. Reprehenderit sint ad excepteur consequat quis. Qui adipisicing ea et
    Lorem deserunt Lorem consectetur. Minim reprehenderit esse elit est
    excepteur adipisicing nostrud. Elit mollit proident anim duis occaecat
    dolore consectetur eu aliquip nisi ex esse. Eu non elit qui sint sint. Sint
    non et et ea culpa ad enim et reprehenderit occaecat dolor reprehenderit.
    Sunt nostrud sit occaecat ut do. Sit incididunt laboris cillum dolor
    incididunt aute culpa consequat pariatur mollit excepteur et laboris. Ut
    laboris laboris et voluptate.
  </Typography>
);

export default RandomText;

This component holds a paragraph of random text. Now, put that component below the AppBar component:

import RandomText from "./RandomText";
...
...
...
<div>
  <AppBar className={classes.appBar}>
    <Toolbar>
      <IconButton className={classes.white}>
        <MenuIcon />
      </IconButton>
      <Typography variant="h6" className={classes.heading}>
        This is a heading
      </Typography>
      <Button className={classes.white}>Sign In</Button>
    </Toolbar>
  </AppBar>
  <RandomText />
</div>

It will show the text below the AppBar. You can scroll the text. You can copy-paste the same text for multiple times to check the scrolling.

But, as you can see in the above picture, few lines of the text are showing behind the AppBar. To fix that, you can use position = 'sticky' in your AppBar.

 <AppBar position="sticky" className={classes.appBar}>
 ...
 ...