Material UI ToolBar

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:
Material-UI
Picked
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
REST API (Introduction)
Node.js fs.readFileSync() Method
How to set the default value for an HTML <select> element ?
How to create footer to stay at the bottom of a Web page?
Roadmap to Learn JavaScript For Beginners
How to set input type date in dd-mm-yyyy format using HTML ?