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 add app bars with Material UI.
App Bar
The app bar lets us display information and action relevant for the current screen.
To add one, we use the AppBar component.
For instance, we can write:
import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
export default function App() {
return (
<div>
<AppBar position="static">
<Toolbar>
<IconButton edge="start" color="inherit">
<MenuIcon />
</IconButton>
<Button color="inherit">home</Button>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</div>
);
}
We add an AppBar component with a Toolbar inside to add content to it.
It can have text and icons inside.
App Bar with a Search Field
We can add a search box with the InputBase component.
For instanc,e we can write:
import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import InputBase from "@material-ui/core/InputBase";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(theme => ({
inputRoot: {
color: "inherit"
},
inputInput: {
color: "white"
}
}));
export default function App() {
const classes = useStyles();
return (
<div>
<AppBar position="static">
<Toolbar>
<IconButton edge="start" color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
<Button color="inherit">home</Button>
<Button color="inherit">Login</Button>
<InputBase
placeholder="Search"
classes={{
root: classes.inputRoot,
input: classes.inputInput
}}
/>
</Toolbar>
</AppBar>
</div>
);
}
to add the toolbar buttons with the search box.
The search box is added to the InputBase component.
We can pass classes to it with the classes prop to style it.
App Bar with Menu
We can add an app bar with a menu by using the Menu component inside the Toolbar in the AppBar .
For example, we can write:
import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import IconButton from "@material-ui/core/IconButton";
import MenuIcon from "@material-ui/icons/Menu";
import AccountCircle from "@material-ui/icons/AccountCircle";
import MenuItem from "@material-ui/core/MenuItem";
import Menu from "@material-ui/core/Menu";
export default function App() {
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleMenu = event => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<div>
<AppBar position="static">
<Toolbar>
<IconButton edge="start" color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
<Typography variant="h6">App</Typography>
<div>
<IconButton onClick={handleMenu} color="inherit">
<AccountCircle />
</IconButton>
<Menu
anchorEl={anchorEl}
anchorOrigin={{
vertical: "top",
horizontal: "right"
}}
keepMounted
transformOrigin={{
vertical: "top",
horizontal: "right"
}}
open={open}
onClose={handleClose}
>
<MenuItem onClick={handleClose}>Logout</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
</Menu>
</div>
</Toolbar>
</AppBar>
</div>
);
}
to add our menu.
We added the Menu to the right of the text with the Menu component.
The opening of the menu is controlled by the open state.
onClose sets the open state to false to close the menu.
The menu items also do the same thing to close the menu when they’re clicked.
App Bar with Search Field
We can add a search box if we apply some styles to the InputBase component.
For example, we can write:
import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import IconButton from "@material-ui/core/IconButton";
import Typography from "@material-ui/core/Typography";
import InputBase from "@material-ui/core/InputBase";
import { makeStyles } from "@material-ui/core/styles";
import MenuIcon from "@material-ui/icons/Menu";
import SearchIcon from "@material-ui/icons/Search";
const useStyles = makeStyles(theme => ({
search: {
position: "relative",
borderRadius: theme.shape.borderRadius,
marginLeft: 0,
width: "100%"
},
searchIcon: {
padding: theme.spacing(0, 2),
height: "100%",
position: "absolute",
display: "flex",
alignItems: "center",
justifyContent: "center"
},
inputRoot: {
color: "inherit"
},
inputInput: {
padding: theme.spacing(1, 1, 1, 0),
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
width: "100%"
}
}));
export default function App() {
const classes = useStyles();
return (
<div>
<AppBar position="static">
<Toolbar>
<IconButton edge="start" color="inherit" aria-label="menu">
<MenuIcon />
</IconButton>
<Typography variant="h6">App</Typography>
<div className={classes.search}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>
<InputBase
placeholder="Search…"
classes={{
root: classes.inputRoot,
input: classes.inputInput
}}
/>
</div>
</Toolbar>
</AppBar>
</div>
);
}
We’ve to apply some styles to the search box to make it display properly within the toolbar.
We made the icon absolute position so that we can move it to the center of the toolbar.
This is done with alignItems and justifyContent set to center with the searchIcon class.
Also, we’ve to search class to move the search box to be vertically centered.
We also made it rounded with the borderRadius .
Conclusion
We can add an app bar with text, icons, and an input box.
To add them, we’ve to style them to make them look right in the box.
