Material UI ToolBar

Last Updated : 20 Jan, 2021

Material-UI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google. In this article let’s discuss the Toolbar component in the Material-UI library.

Toolbar:

ToolBar doesn’t work independently as that of other Material-UI components, it works with the AppBar. The Toolbar component sets the properties of the children to make them horizontally aligned. The Toolbar component simply applies the normal CSS flex(display: ‘flex’), with vertical centering via alignItems: ‘center’, some padding, and the minHeight: 56px provided by the theme.mixins.toolbar.

Syntax:

<AppBar>
<Toolbar>
  <Typography variant="h6">
    This Is ToolBar Example
  </Typography>
</Toolbar>
</AppBar>

Installing React App:

Step1: Create a React app using the following command.

npx create-react-app toolbar-example

Step 2: Now get into the project directory

cd toolbar-example

Installing Material-UI:

Installing Material-UI’s source files via npm/yarn, and they take care of injecting the CSS needed.

npm install @material-ui/core
// OR
yarn add @material-ui/core

Importing AppBar and Toolbar:

import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';

Important Props:

children: It is Toolbar children, usually it can be a mixture of IconButton, Button, Typography, etc.
component: The component used for the root node. Either a string to use the HTML element or a component. eg: div.
disableGutters: It is used to enable or disable gutter padding. Example: true or false.
variant: It is used to choose the variant of the toolbar. Example: regular, dense.

CSS Rule Names:

root: This applies styles to the root element.
gutters: This applies styles to the root element if disableGutters={false}.
regular: This applies styles to the root element if variant=”regular”.
dense: This applies styles to the root element if variant=”dense”.

Example 1: In this example, we have implemented the toolbar as Top AppBar.

Javascript

import React from 'react';
import {AppBar, Toolbar, IconButton, Typography, Button} from '@material-ui/core';
import { fade, makeStyles } from '@material-ui/core/styles';
import MenuIcon from '@material-ui/icons/Menu';
  
const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
    display: 'none',
    [
      theme.breakpoints.up('sm')]: {
        display: 'block',
    },
  },
}));
  
export default function ToolbarExample() {
  const classes = useStyles();
  
  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            className={classes.menuButton}
            color="inherit"
          >
            <MenuIcon />
          </IconButton>
          <Typography className={classes.title} variant="h6" noWrap>
            Welcome To GFG
          </Typography>
              <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output:

Example 2: As a Bottom AppBar

Javascript

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import {
  AppBar, 
  Toolbar, 
  Typography, 
  IconButton, 
  Paper,
  Fab, 
  List,
  ListItem,
  ListItemText} from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu';
import AddIcon from '@material-ui/icons/Add';
  
const messages = [
  {
    id: 1,
    primary: 'Welcome To GeeksForGeeks',
    secondary: "A Computer Science Portal For Geeks",
  },
  {
    id: 2,
    primary: 'Welcome To GeeksForGeeks',
    secondary: "A Computer Science Portal For Geeks",
  },
  {
    id: 3,
    primary: 'Welcome To GeeksForGeeks',
    secondary: "A Computer Science Portal For Geeks",
  },
  {
    id: 4,
    primary: 'Welcome To GeeksForGeeks',
    secondary: "A Computer Science Portal For Geeks",
  },
  {
    id: 5,
    primary: 'Welcome To GeeksForGeeks',
    secondary: "A Computer Science Portal For Geeks",
  },
  {
    id: 6,
    primary: 'Welcome To GeeksForGeeks',
    secondary: "A Computer Science Portal For Geeks",
  },
  {
    id: 7,
    primary: 'Welcome To GeeksForGeeks',
    secondary: "A Computer Science Portal For Geeks",
  },
  {
    id: 8,
    primary: 'Welcome To GeeksForGeeks',
    secondary: "A Computer Science Portal For Geeks",
  }
];
  
const useStyles = makeStyles((theme) => ({
  text: {
    padding: theme.spacing(2, 2, 0),
  },
  paper: {
    paddingBottom: 50,
  },
  list: {
    marginBottom: theme.spacing(2),
  },
  appBar: {
    top: 'auto',
    bottom: 0,
  },
  fabButton: {
    position: 'absolute',
    zIndex: 1,
    top: -30,
    left: 0,
    right: 0,
    margin: '0 auto',
  },
}));
  
export default function BottomAppBar() {
  const classes = useStyles();
  return (
    <React.Fragment>
      <Paper square className={classes.paper}>
        <Typography className={classes.text} 
                    variant="h5" gutterBottom>
          List
        </Typography>
        <List className={classes.list}>
          {messages.map(({ id, primary, 
                           secondary, person }) => (
            <React.Fragment key={id}>
              <ListItem button>
                <ListItemText primary={primary} 
                              secondary={secondary} />
              </ListItem>
            </React.Fragment>
          ))}
        </List>
      </Paper>
      <AppBar position="fixed" color="primary" 
                               className={classes.appBar}>
        <Toolbar>
          <IconButton edge="start" color="inherit" 
                      aria-label="open drawer">
            <MenuIcon />
          </IconButton>
          <Fab color="secondary" aria-label="add" 
               className={classes.fabButton}>
            <AddIcon />
          </Fab>
        </Toolbar>
      </AppBar>
    </React.Fragment>
  );
}

Output:

My Personal Notes

Related Articles

Table of Contents

Material UI ToolBar

Javascript

Javascript