MUI 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

Mobile design

import React from "react";
import Link from "next/link";
import { AppBar,Box,Toolbar,IconButton,Typography,Menu,Container,MenuItem, Button, } from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";

const css = {
  mx: 2,
  color: "#6F10D9 ",
  display: "block",
  fontWeight: 700,
  fontSize: 16,
  fontFamily: " 'Inter', sans-serif",
  textDecoration: "none",
  "&:hover": {
    color: "#9B63DC",
  },
};
const btncss = {
  fontFamily: " 'Inter', sans-serif",
  letterSpacing: "normal",
  px: 2,
  ml: 2,
  color: "#fff",
  backgroundColor: "#F03D91  ",
  "&:hover": { backgroundColor: "#BB1161" },
     textTransform: "none",
};

const navItems = [
  { text: "Home", href: "/" },
  { text: "About", href: "/about" },
  { text: "Services", href: "/services" },
  { text: "Blog", href: "/blog" },
  { text: "Contact ", href: "/contact" },
];

const NavBar = () => {
  const [anchorElNav, setAnchorElNav] = React.useState(null);
  const handleOpenNavMenu = (event) => {
    setAnchorElNav(event.currentTarget);
  };
  const handleCloseNavMenu = () => {
    setAnchorElNav(null);
  };

  return (
      <AppBar
        position="static"
        sx={{
          backgroundColor: "#fff",
          boxShadow:
            "rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px",
        }}
      >
        <Container maxWidth="xl">
          <Toolbar disableGutters>
            {/* --------------------------------logo------------------------------------- */}
            <Typography
              sx={{
                fontWeight: 800,
                fontSize: 22,
                fontFamily: " 'Inter', sans-serif",
                color: "#F03D91  ",
              }}
            >
              Techayu
            </Typography>
            <Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
              <Menu
                id="menu-appbar"
                anchorEl={anchorElNav}
                anchorOrigin={{
                  vertical: "bottom",
                  horizontal: "left",
                }}
                keepMounted
                transformOrigin={{
                  vertical: "top",
                  horizontal: "left",
                }}
                open={Boolean(anchorElNav)}
                onClose={handleCloseNavMenu}
                sx={{
                  display: { xs: "block", md: "none" },
                }}
              >
                {navItems.map((item, index) => (
                  <MenuItem key={index} onClick={handleCloseNavMenu}>
                    <Typography
                      textAlign="center"
                      component={Link}
                      href={item.href}
                      sx={css}
                    >
                      {item.text}
                    </Typography>
                  </MenuItem>
                ))}
                <MenuItem onClick={handleCloseNavMenu}>
                  <Button
                    sx={btncss}
                    component={Link}
                    href="/contact"
                  >
                    Get In Touch
                  </Button>
                </MenuItem>
              </Menu>
            </Box>

            <Box sx={{ display: { xs: "flex", md: "none" } }}>
              <IconButton
                size="large"
                aria-label="account of current user"
                aria-controls="menu-appbar"
                aria-haspopup="true"
                onClick={handleOpenNavMenu}
              >
                <MenuIcon />
              </IconButton>
            </Box>
            <Box
              sx={{
                flexGrow: 1,
                display: { xs: "none", md: "flex" },
                alignItems: "center",
                justifyContent: "center",
                textAlign: "center",
              }}
            >
              {navItems.map((item, index) => (
                <Typography
                  key={index}
                  onClick={handleCloseNavMenu}
                  sx={css}
                  component={Link}
                  href={item.href}
                >
                  {item.text}
                </Typography>
              ))}
            </Box>
            <Box sx={{ flexGrow: 0, display: { xs: "none", md: "flex" } }}>
              <Button
                component={Link}
                href="/contact"
                sx={btncss}
              >
                Get In Touch
              </Button>
            </Box>
          </Toolbar>
        </Container>
      </AppBar>
   
  );
};
export 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 MUI 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.