Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use AppBar Component in Material UI?
The Material UI is a library containing various components with different styles and responsive designs. For example, Material UI contains an AppBar component, which we can directly import into the React component and use as a child component of other components.
Also, the Material UI library contains different components like buttons, links, tab bars, pagination etc. Furthermore, we can manipulate every component by passing a prop while using the component. For example, we can make an AppBar responsive by passing the respected props.
This tutorial will teach us to use the AppBar component in Material UI.
Users should install the Material UI library before using it in the application. Open the terminal, go to the project directory and enter the below commands to install Material UI in the React application.
npm install @mui/material @mui/icons-material
Syntax
Users can follow the syntax below to use the Material UI library for a stylish AppBar component.
<Box sx = {{ flexGrow: 1 }}>
<AppBar position = "static">
<Toolbar>
{/* Add the content for toolbar */}
</Toolbar>
</AppBar>
</Box>
In the above syntax, we have used the AppBar component and passed the position as a prop. Also, we have wrapped the AppBar component in the Box component and added the Toolbar component as a child of the AppBar component.
Example
In the example below, we have used the AppBar component from the Material UI library and created the simple top navbar.
In the AppBar component, we have also passed some child components with props. In the TypoGraphy component, we have passed ‘sx={{ flexGrow: 1}}’ as a prop which allows us to set other content at the right corner of the AppBar component.
Also, we have added the Sign Up, and Sign In buttons at the right corner of the NavBar.
import React from "react"; import AppBar from "@mui/material/AppBar"; import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; import Button from "@mui/material/Button"; import Toolbar from "@mui/material/Toolbar"; export default function App() { return ( <Box> <AppBar position="static"> <Toolbar> {/* sx = {flexGrow: 1} allows us to set all content at right except typography */} <Typography variant = "h4" sx = {{ flexGrow: 1 }}> AppBar </Typography> <Button color = "inherit"> Sign Up </Button> <Button color = "inherit"> Sign In </Button> </Toolbar> </AppBar> </Box> ); }
Output
Example
In the example below, we have created the responsive Navbar using the AppBar component of the Material UI library.
Users can see a menu item in the row for laptop-size devices and as a tooltip for tablet and mobile devices. Also, users can change the menu options in the page array. Furthermore, developers can observe how we have used the map() method to create each menu item.
import * as React from "react"; import Container from "@mui/material/Container"; import Toolbar from "@mui/material/Toolbar"; import Button from "@mui/material/Button"; import MenuItem from "@mui/material/MenuItem"; import IconButton from "@mui/material/IconButton"; import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; import AppBar from "@mui/material/AppBar"; import Menu from "@mui/material/Menu"; import MenuIcon from "@mui/icons-material/Menu"; export default function App() { const pages = ["Page 1", "Page 2", "Page 3"]; const [menuItems, setmenuItems] = React.useState(null); // function to close and open the tooltip menu const openMenuToolTip = (event) => { setmenuItems(event.currentTarget); }; const closeMenuToolTip = () => { setmenuItems(null); }; return ( <AppBar position = "static"> <Container maxWidth = "xxl"> {/* adding the toolbar */} <Toolbar disableGutters> {/* adding the logo icon */} <Typography Variant = "h4" sx = {{ letterSpacing: "5px", color: "white", textDecoration: "none", }} > LOGOIcon </Typography> {/* menu icon for mobile and tablet devices */} <Box sx = {{ flexGrow: 1, display: { xs: "flex", md: "none" } }}> <IconButton onClick = {openMenuToolTip} color = "inherit"> <MenuIcon /> </IconButton> {/* tooptip options */} <Menu anchorEl = {menuItems} open = {Boolean(menuItems)} onClose = {closeMenuToolTip} > {pages.map((page) => ( <MenuItem key = {page} onClick = {closeMenuToolTip}> <Typography textAlign = "center"> {page} </Typography> </MenuItem> ))} </Menu> </Box> {/* menu items for laptop devices */} <Box sx = {{ flexGrow: 1, display: { xs: "none", md: "flex" } }}> {pages.map((page) => ( <Button key = {page} onClick = {closeMenuToolTip} sx = {{ color: "white", display: "block" }} > {page} </Button> ))} </Box> </Toolbar> </Container> </AppBar> ); }
Output
Example
In the example below, we have added the search bar in the navbar using the AppBar component. We have created custom styles for the search bar.
In the output, users can observe that we have added the search bar at the right corner of the AppBar component.
import * as React from "react"; import { styled } from "@mui/material/styles"; import AppBar from "@mui/material/AppBar"; import Box from "@mui/material/Box"; import InputBase from "@mui/material/InputBase"; import Toolbar from "@mui/material/Toolbar"; import SearchIcon from "@mui/icons-material/Search"; import Typography from "@mui/material/Typography"; // different styles for the search bar // style for search div const Search = styled("div")(({ theme }) => ({ position: "relative", width: "100%", [theme.breakpoints.up("sm")]: { marginLeft: theme.spacing(1), width: "auto", }, })); // style for a search icon const SearchIconWrapper = styled("div")(({ theme }) => ({ display: "flex", alignItems: "center", padding: theme.spacing(0, 2), height: "100%", position: "absolute", })); // style for input in the search const StyledInputBase = styled(InputBase)(({ theme }) => ({ color: "inherit", "& .MuiInputBase-input": { padding: theme.spacing(1, 1, 1, 0), paddingLeft: `3.5rem`, width: "100%", }, })); export default function App() { return ( <Box sx = {{ flexGrow: 1 }}> <AppBar position = "static"> <Toolbar> <Typography sx = {{ flexGrow: 1 }}>Text</Typography> {/* adding the search to AppBar component */} <Search> <SearchIconWrapper> <SearchIcon /> </SearchIconWrapper> <StyledInputBase placeholder="Search texts" /> </Search> </Toolbar> </AppBar> </Box> ); }
Output
In this tutorial, users learned to use the AppBar component of the Material UI. We have seen three different examples with an AppBar component. In the first example, we have created a basic Navbar, in second example we have created responsive navbar, and in third example we have aadded the search bar to the AppBar component.
2K+ Views
