MUI AppBar for Top-Level Navigation in React
mui|

Ayush

Arya

|

Feb 05, 2024

Material-UI AppBar For Top-Level Navigation In React


In this guide, we'll delve into the powerful Material-UI AppBar component to create seamless top-level navigation bars in your React applications. Learn to integrate dynamic links, implement responsive design, and enhance user experience effortlessly.

Installation and Setup

Ensure you have Material-UI installed in your React project. Import the necessary components, including AppBar, Toolbar, IconButton, Typography, Menu, Container, MenuItem, and Button. This sets the stage for building a robust navigation bar.

Desktop design

Material-UI AppBar for Top-Level Navigation in React

Mobile design

Material-UI AppBar for Top-Level Navigation in React

1import React from "react"; 2import Link from "next/link"; 3import { AppBar,Box,Toolbar,IconButton,Typography,Menu,Container,MenuItem, Button, } from "@mui/material"; 4import MenuIcon from "@mui/icons-material/Menu"; 5 6const css = { 7 mx: 2, 8 color: "#6F10D9 ", 9 display: "block", 10 fontWeight: 700, 11 fontSize: 16, 12 fontFamily: " 'Inter', sans-serif", 13 textDecoration: "none", 14 "&:hover": { 15 color: "#9B63DC", 16 }, 17}; 18const btncss = { 19 fontFamily: " 'Inter', sans-serif", 20 letterSpacing: "normal", 21 px: 2, 22 ml: 2, 23 color: "#fff", 24 backgroundColor: "#F03D91 ", 25 "&:hover": { backgroundColor: "#BB1161" }, 26 textTransform: "none", 27}; 28 29const navItems = [ 30 { text: "Home", href: "/" }, 31 { text: "About", href: "/about" }, 32 { text: "Services", href: "/services" }, 33 { text: "Blog", href: "/blog" }, 34 { text: "Contact ", href: "/contact" }, 35]; 36 37const NavBar = () => { 38 const [anchorElNav, setAnchorElNav] = React.useState(null); 39 const handleOpenNavMenu = (event) => { 40 setAnchorElNav(event.currentTarget); 41 }; 42 const handleCloseNavMenu = () => { 43 setAnchorElNav(null); 44 }; 45 46 return ( 47 <AppBar 48 position="static" 49 sx={{ 50 backgroundColor: "#fff", 51 boxShadow: 52 "rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px", 53 }} 54 > 55 <Container maxWidth="xl"> 56 <Toolbar disableGutters> 57 {/* --------------------------------logo------------------------------------- */} 58 <Typography 59 sx={{ 60 fontWeight: 800, 61 fontSize: 22, 62 fontFamily: " 'Inter', sans-serif", 63 color: "#F03D91 ", 64 }} 65 > 66 Techayu 67 </Typography> 68 <Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}> 69 <Menu 70 id="menu-appbar" 71 anchorEl={anchorElNav} 72 anchorOrigin={{ 73 vertical: "bottom", 74 horizontal: "left", 75 }} 76 keepMounted 77 transformOrigin={{ 78 vertical: "top", 79 horizontal: "left", 80 }} 81 open={Boolean(anchorElNav)} 82 onClose={handleCloseNavMenu} 83 sx={{ 84 display: { xs: "block", md: "none" }, 85 }} 86 > 87 {navItems.map((item, index) => ( 88 <MenuItem key={index} onClick={handleCloseNavMenu}> 89 <Typography 90 textAlign="center" 91 component={Link} 92 href={item.href} 93 sx={css} 94 > 95 {item.text} 96 </Typography> 97 </MenuItem> 98 ))} 99 <MenuItem onClick={handleCloseNavMenu}> 100 <Button 101 sx={btncss} 102 component={Link} 103 href="/contact" 104 > 105 Get In Touch 106 </Button> 107 </MenuItem> 108 </Menu> 109 </Box> 110 111 <Box sx={{ display: { xs: "flex", md: "none" } }}> 112 <IconButton 113 size="large" 114 aria-label="account of current user" 115 aria-controls="menu-appbar" 116 aria-haspopup="true" 117 onClick={handleOpenNavMenu} 118 > 119 <MenuIcon /> 120 </IconButton> 121 </Box> 122 <Box 123 sx={{ 124 flexGrow: 1, 125 display: { xs: "none", md: "flex" }, 126 alignItems: "center", 127 justifyContent: "center", 128 textAlign: "center", 129 }} 130 > 131 {navItems.map((item, index) => ( 132 <Typography 133 key={index} 134 onClick={handleCloseNavMenu} 135 sx={css} 136 component={Link} 137 href={item.href} 138 > 139 {item.text} 140 </Typography> 141 ))} 142 </Box> 143 <Box sx={{ flexGrow: 0, display: { xs: "none", md: "flex" } }}> 144 <Button 145 component={Link} 146 href="/contact" 147 sx={btncss} 148 > 149 Get In Touch 150 </Button> 151 </Box> 152 </Toolbar> 153 </Container> 154 </AppBar> 155 156 ); 157}; 158export default NavBar;

Creating a Responsive Navigation Bar

Utilize the provided navItems array to define your navigation links. The NavBar component incorporates responsive design by adapting the layout for both small and medium screens. The menu icon triggers a dropdown for smaller screens, while a horizontal layout is maintained for larger screens.

Customizing the AppBar

Explore the AppBar's customization options, including background color, shadow, and typography. The css object defines styling for navigation links, ensuring a visually appealing and user-friendly design.

Handling Menu Interactions

The Menu component facilitates the dropdown menu on smaller screens. Dynamically generate menu items based on the navItems array, and utilize the handleOpenNavMenu and handleCloseNavMenu functions for seamless menu interactions.

Enhancing User Interaction

Implement smooth transitions and hover effects on navigation links to enhance user interaction. The Button component serves as a prominent "Get In Touch" call-to-action button, guiding users to a specific page.

Conclusion: Elevate Navigation with Material-UI AppBar

Mastering Material-UI AppBar empowers you to create sophisticated top-level navigation bars in your React applications. This guide provides a solid foundation for building responsive, visually appealing, and user-friendly navigation experiences.

Feel free to customize the code, experiment with additional features, and tailor the AppBar to match the unique design requirements of your React project. Elevate your navigation game with Material-UI and deliver an exceptional user experience.


Popular Blog Categories


Contact Me

Phone

Discuss A Project Or Just Want To Say Hi?
My Inbox Is Open For All.

Mail : techayu001@gmail.com

Chatbot