MUI AppBar For Top-Level Navigation In React
MUI|

Ayush

Arya

|

Jan 24, 24

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 AppBarToolbarIconButtonTypographyMenuContainerMenuItem, and Button. This sets the stage for building a robust navigation bar.

Desktop design

Desktop Design Material - UI AppBar

Mobile design

Mobile Design Material - UI AppBar
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.


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
contact@techayu.in

Chatbot