Material-UI Navbar

A Material-ui Navbar is a navigation header that is placed at the top of the page. It can extend or collapse, depending on the screen size. A standard navigation bar is created with <nav class="navbar navbar-default">. Check this documentation and examples for Material-ui’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.


Example

import React from "react";
// import clsx from "clsx";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import { useTheme } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Box from "@material-ui/core/Box";
import Container from "@material-ui/core/Container";
import Divider from "@material-ui/core/Divider";
import Hidden from "@material-ui/core/Hidden";
import IconButton from "@material-ui/core/IconButton";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Menu from "@material-ui/core/Menu";
import Toolbar from "@material-ui/core/Toolbar";
// @material-ui/icons components
import Clear from "@material-ui/icons/Clear";
import Favorite from "@material-ui/icons/Favorite";
import MenuIcon from "@material-ui/icons/Menu";
import Settings from "@material-ui/icons/Settings";
import VolumeUp from "@material-ui/icons/VolumeUp";

// core components
import componentStyles from "assets/theme/components/navbar.js";

const useStyles = makeStyles(componentStyles);

export default function AuthNavbar() {
  const classes = useStyles();
  const theme = useTheme();
  const [anchorEl, setAnchorEl] = React.useState(null);

  const isMenuOpen = Boolean(anchorEl);

  const handleMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };

  const menuId = "responsive-menu-id";

  const listObject = (
    <List className={classes.appBarList}>
      <ListItem className={classes.appBarListItem}>
        <Box
          component={Favorite}
          width="1.25rem!important"
          height="1.25rem!important"
          className={classes.appBarListItemIcon}
        />
        <Hidden lgUp>Discover</Hidden>
      </ListItem>
      <ListItem className={classes.appBarListItem}>
        <Box
          component={VolumeUp}
          width="1.25rem!important"
          height="1.25rem!important"
          className={classes.appBarListItemIcon}
        />
        <Hidden lgUp>Profile</Hidden>
      </ListItem>
      <ListItem className={classes.appBarListItem}>
        <Box
          component={Settings}
          width="1.25rem!important"
          height="1.25rem!important"
          className={classes.appBarListItemIcon}
        />
        <Hidden lgUp>Settings</Hidden>
      </ListItem>
    </List>
  );

  const appBarRootClasses = {
    root: classes.appBarRootDefault,
  };
  const menuClasses = { paper: classes.appBarMenuPaper };
  const menuPozitions = { vertical: "top", horizontal: "right" };
  return (
    <>
      <AppBar
        position="relative"
        color="inherit"
        elevation={0}
        classes={appBarRootClasses}
      >
        <Toolbar>
          <Container
            display="flex!important"
            justifyContent="space-between"
            alignItems="center"
            component={Box}
            maxWidth="xl"
          >
            <Box
              display="flex"
              justifyContent="space-between"
              alignItems="center"
              width="100%"
            >
              <Box component="a" className={classes.appBarBrand}>
                Default Color
              </Box>
              <Hidden mdDown implementation="js">
                {listObject}
              </Hidden>
              <Hidden lgUp implementation="js">
                <IconButton
                  edge="start"
                  color="inherit"
                  onClick={handleMenuOpen}
                  aria-controls={menuId}
                  aria-haspopup="true"
                >
                  <Box
                    component={MenuIcon}
                    color={theme.palette.white.main}
                    width="2rem!important"
                    height="2rem!important"
                  />
                </IconButton>
                <Menu
                  anchorEl={anchorEl}
                  anchorOrigin={menuPozitions}
                  id={menuId}
                  keepMounted
                  transformOrigin={menuPozitions}
                  open={isMenuOpen}
                  onClose={handleMenuClose}
                  classes={menuClasses}
                >
                  <Box
                    display="flex"
                    justifyContent="space-between"
                    alignItems="center"
                    paddingLeft="1.25rem"
                    paddingRight="1.25rem"
                    paddingBottom="1rem"
                    className={classes.appBarOutlineNone}
                  >
                    <Box
                      alt="..."
                      height="36px"
                      component="img"
                      className={classes.appBarHeaderImg}
                      src={require("assets/img/brand/argon-react.png").default}
                    />
                    <IconButton
                      edge="start"
                      color="inherit"
                      onClick={handleMenuClose}
                      aria-controls={menuId}
                      aria-haspopup="true"
                    >
                      <Box
                        component={Clear}
                        width="2rem!important"
                        height="2rem!important"
                      />
                    </IconButton>
                  </Box>
                  <Box
                    component={Divider}
                    marginBottom="1rem!important"
                    marginLeft="1.25rem!important"
                    marginRight="1.25rem!important"
                  />
                  {listObject}
                </Menu>
              </Hidden>
            </Box>
          </Container>
        </Toolbar>
      </AppBar>
    </>
  );
}

Variations

import React from "react";
// import clsx from "clsx";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import { useTheme } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Box from "@material-ui/core/Box";
import Container from "@material-ui/core/Container";
import Divider from "@material-ui/core/Divider";
import Hidden from "@material-ui/core/Hidden";
import IconButton from "@material-ui/core/IconButton";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Menu from "@material-ui/core/Menu";
import Toolbar from "@material-ui/core/Toolbar";
// @material-ui/icons components
import Clear from "@material-ui/icons/Clear";
import MenuIcon from "@material-ui/icons/Menu";

// core components
import componentStyles from "assets/theme/components/navbar.js";

const useStyles = makeStyles(componentStyles);

export default function AuthNavbar() {
  const classes = useStyles();
  const theme = useTheme();
  const [anchorEl, setAnchorEl] = React.useState(null);

  const isMenuOpen = Boolean(anchorEl);

  const handleMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };

  const menuId = "responsive-menu-id";

  const listObject = (
    <List className={classes.appBarList}>
      <ListItem className={classes.appBarListItem}>
        Discover
      </ListItem>
      <ListItem className={classes.appBarListItem}>
        Profile
      </ListItem>
      <ListItem className={classes.appBarListItem}>
        Settings
      </ListItem>
    </List>
  );

  const appBarRootClasses = {
    root: classes.appBarRootPrimary,
  };
  const menuClasses = { paper: classes.appBarMenuPaper };
  const menuPozitions = { vertical: "top", horizontal: "right" };
  return (
    <>
      <AppBar
        position="relative"
        color="inherit"
        elevation={0}
        classes={appBarRootClasses}
      >
        <Toolbar>
          <Container
            display="flex!important"
            justifyContent="space-between"
            alignItems="center"
            component={Box}
            maxWidth="xl"
          >
            <Box
              display="flex"
              justifyContent="space-between"
              alignItems="center"
              width="100%"
            >
              <Box component="a" className={classes.appBarBrand}>
                Primary Color
              </Box>
              <Hidden mdDown implementation="js">
                {listObject}
              </Hidden>
              <Hidden lgUp implementation="js">
                <IconButton
                  edge="start"
                  color="inherit"
                  onClick={handleMenuOpen}
                  aria-controls={menuId}
                  aria-haspopup="true"
                >
                  <Box
                    component={MenuIcon}
                    color={theme.palette.white.main}
                    width="2rem!important"
                    height="2rem!important"
                  />
                </IconButton>
                <Menu
                  anchorEl={anchorEl}
                  anchorOrigin={menuPozitions}
                  id={menuId}
                  keepMounted
                  transformOrigin={menuPozitions}
                  open={isMenuOpen}
                  onClose={handleMenuClose}
                  classes={menuClasses}
                >
                  <Box
                    display="flex"
                    justifyContent="space-between"
                    alignItems="center"
                    paddingLeft="1.25rem"
                    paddingRight="1.25rem"
                    paddingBottom="1rem"
                    className={classes.appBarOutlineNone}
                  >
                    <Box
                      alt="..."
                      height="36px"
                      component="img"
                      className={classes.appBarHeaderImg}
                      src={require("assets/img/brand/argon-react.png").default}
                    />
                    <IconButton
                      edge="start"
                      color="inherit"
                      onClick={handleMenuClose}
                      aria-controls={menuId}
                      aria-haspopup="true"
                    >
                      <Box
                        component={Clear}
                        width="2rem!important"
                        height="2rem!important"
                      />
                    </IconButton>
                  </Box>
                  <Box
                    component={Divider}
                    marginBottom="1rem!important"
                    marginLeft="1.25rem!important"
                    marginRight="1.25rem!important"
                  />
                  {listObject}
                </Menu>
              </Hidden>
            </Box>
          </Container>
        </Toolbar>
      </AppBar>
    </>
  );
}
import React from "react";
// import clsx from "clsx";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import { useTheme } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Box from "@material-ui/core/Box";
import Container from "@material-ui/core/Container";
import Divider from "@material-ui/core/Divider";
import Hidden from "@material-ui/core/Hidden";
import IconButton from "@material-ui/core/IconButton";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Menu from "@material-ui/core/Menu";
import Toolbar from "@material-ui/core/Toolbar";
// @material-ui/icons components
import Clear from "@material-ui/icons/Clear";
import Favorite from "@material-ui/icons/Favorite";
import MenuIcon from "@material-ui/icons/Menu";
import Settings from "@material-ui/icons/Settings";
import VolumeUp from "@material-ui/icons/VolumeUp";

// core components
import componentStyles from "assets/theme/components/navbar.js";

const useStyles = makeStyles(componentStyles);

export default function AuthNavbar() {
  const classes = useStyles();
  const theme = useTheme();
  const [anchorEl, setAnchorEl] = React.useState(null);

  const isMenuOpen = Boolean(anchorEl);

  const handleMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };

  const menuId = "responsive-menu-id";

  const listObject = (
    <List className={classes.appBarList}>
      <ListItem className={classes.appBarListItem}>
        <Box
          component={Favorite}
          width="1.25rem!important"
          height="1.25rem!important"
          className={classes.appBarListItemIcon}
        />
        <Hidden lgUp>Discover</Hidden>
      </ListItem>
      <ListItem className={classes.appBarListItem}>
        <Box
          component={VolumeUp}
          width="1.25rem!important"
          height="1.25rem!important"
          className={classes.appBarListItemIcon}
        />
        <Hidden lgUp>Profile</Hidden>
      </ListItem>
      <ListItem className={classes.appBarListItem}>
        <Box
          component={Settings}
          width="1.25rem!important"
          height="1.25rem!important"
          className={classes.appBarListItemIcon}
        />
        <Hidden lgUp>Settings</Hidden>
      </ListItem>
    </List>
  );

  const appBarRootClasses = {
    root: classes.appBarRootSuccess,
  };
  const menuClasses = { paper: classes.appBarMenuPaper };
  const menuPozitions = { vertical: "top", horizontal: "right" };
  return (
    <>
      <AppBar
        position="relative"
        color="inherit"
        elevation={0}
        classes={appBarRootClasses}
      >
        <Toolbar>
          <Container
            display="flex!important"
            justifyContent="space-between"
            alignItems="center"
            component={Box}
            maxWidth="xl"
          >
            <Box
              display="flex"
              justifyContent="space-between"
              alignItems="center"
              width="100%"
            >
              <Box component="a" className={classes.appBarBrand}>
                Success Color
              </Box>
              <Hidden mdDown implementation="js">
                {listObject}
              </Hidden>
              <Hidden lgUp implementation="js">
                <IconButton
                  edge="start"
                  color="inherit"
                  onClick={handleMenuOpen}
                  aria-controls={menuId}
                  aria-haspopup="true"
                >
                  <Box
                    component={MenuIcon}
                    color={theme.palette.white.main}
                    width="2rem!important"
                    height="2rem!important"
                  />
                </IconButton>
                <Menu
                  anchorEl={anchorEl}
                  anchorOrigin={menuPozitions}
                  id={menuId}
                  keepMounted
                  transformOrigin={menuPozitions}
                  open={isMenuOpen}
                  onClose={handleMenuClose}
                  classes={menuClasses}
                >
                  <Box
                    display="flex"
                    justifyContent="space-between"
                    alignItems="center"
                    paddingLeft="1.25rem"
                    paddingRight="1.25rem"
                    paddingBottom="1rem"
                    className={classes.appBarOutlineNone}
                  >
                    <Box
                      alt="..."
                      height="36px"
                      component="img"
                      className={classes.appBarHeaderImg}
                      src={require("assets/img/brand/argon-react.png").default}
                    />
                    <IconButton
                      edge="start"
                      color="inherit"
                      onClick={handleMenuClose}
                      aria-controls={menuId}
                      aria-haspopup="true"
                    >
                      <Box
                        component={Clear}
                        width="2rem!important"
                        height="2rem!important"
                      />
                    </IconButton>
                  </Box>
                  <Box
                    component={Divider}
                    marginBottom="1rem!important"
                    marginLeft="1.25rem!important"
                    marginRight="1.25rem!important"
                  />
                  {listObject}
                </Menu>
              </Hidden>
            </Box>
          </Container>
        </Toolbar>
      </AppBar>
    </>
  );
}
import React from "react";
// import clsx from "clsx";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import { useTheme } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Box from "@material-ui/core/Box";
import Container from "@material-ui/core/Container";
import Divider from "@material-ui/core/Divider";
import Hidden from "@material-ui/core/Hidden";
import IconButton from "@material-ui/core/IconButton";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Menu from "@material-ui/core/Menu";
import Toolbar from "@material-ui/core/Toolbar";
// @material-ui/icons components
import Clear from "@material-ui/icons/Clear";
import Favorite from "@material-ui/icons/Favorite";
import MenuIcon from "@material-ui/icons/Menu";
import Settings from "@material-ui/icons/Settings";
import VolumeUp from "@material-ui/icons/VolumeUp";

// core components
import componentStyles from "assets/theme/components/navbar.js";

const useStyles = makeStyles(componentStyles);

export default function AuthNavbar() {
  const classes = useStyles();
  const theme = useTheme();
  const [anchorEl, setAnchorEl] = React.useState(null);

  const isMenuOpen = Boolean(anchorEl);

  const handleMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };

  const menuId = "responsive-menu-id";

  const listObject = (
    <List className={classes.appBarList}>
      <ListItem className={classes.appBarListItem}>
        <Box
          component={Favorite}
          width="1.25rem!important"
          height="1.25rem!important"
          className={classes.appBarListItemIcon}
        />
        <Hidden lgUp>Discover</Hidden>
      </ListItem>
      <ListItem className={classes.appBarListItem}>
        <Box
          component={VolumeUp}
          width="1.25rem!important"
          height="1.25rem!important"
          className={classes.appBarListItemIcon}
        />
        <Hidden lgUp>Profile</Hidden>
      </ListItem>
      <ListItem className={classes.appBarListItem}>
        <Box
          component={Settings}
          width="1.25rem!important"
          height="1.25rem!important"
          className={classes.appBarListItemIcon}
        />
        <Hidden lgUp>Settings</Hidden>
      </ListItem>
    </List>
  );

  const appBarRootClasses = {
    root: classes.appBarRootError,
  };
  const menuClasses = { paper: classes.appBarMenuPaper };
  const menuPozitions = { vertical: "top", horizontal: "right" };
  return (
    <>
      <AppBar
        position="relative"
        color="inherit"
        elevation={0}
        classes={appBarRootClasses}
      >
        <Toolbar>
          <Container
            display="flex!important"
            justifyContent="space-between"
            alignItems="center"
            component={Box}
            maxWidth="xl"
          >
            <Box
              display="flex"
              justifyContent="space-between"
              alignItems="center"
              width="100%"
            >
              <Box component="a" className={classes.appBarBrand}>
                Error Color
              </Box>
              <Hidden mdDown implementation="js">
                {listObject}
              </Hidden>
              <Hidden lgUp implementation="js">
                <IconButton
                  edge="start"
                  color="inherit"
                  onClick={handleMenuOpen}
                  aria-controls={menuId}
                  aria-haspopup="true"
                >
                  <Box
                    component={MenuIcon}
                    color={theme.palette.white.main}
                    width="2rem!important"
                    height="2rem!important"
                  />
                </IconButton>
                <Menu
                  anchorEl={anchorEl}
                  anchorOrigin={menuPozitions}
                  id={menuId}
                  keepMounted
                  transformOrigin={menuPozitions}
                  open={isMenuOpen}
                  onClose={handleMenuClose}
                  classes={menuClasses}
                >
                  <Box
                    display="flex"
                    justifyContent="space-between"
                    alignItems="center"
                    paddingLeft="1.25rem"
                    paddingRight="1.25rem"
                    paddingBottom="1rem"
                    className={classes.appBarOutlineNone}
                  >
                    <Box
                      alt="..."
                      height="36px"
                      component="img"
                      className={classes.appBarHeaderImg}
                      src={require("assets/img/brand/argon-react.png").default}
                    />
                    <IconButton
                      edge="start"
                      color="inherit"
                      onClick={handleMenuClose}
                      aria-controls={menuId}
                      aria-haspopup="true"
                    >
                      <Box
                        component={Clear}
                        width="2rem!important"
                        height="2rem!important"
                      />
                    </IconButton>
                  </Box>
                  <Box
                    component={Divider}
                    marginBottom="1rem!important"
                    marginLeft="1.25rem!important"
                    marginRight="1.25rem!important"
                  />
                  {listObject}
                </Menu>
              </Hidden>
            </Box>
          </Container>
        </Toolbar>
      </AppBar>
    </>
  );
}
import React from "react";
// import clsx from "clsx";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import { useTheme } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Box from "@material-ui/core/Box";
import Container from "@material-ui/core/Container";
import Divider from "@material-ui/core/Divider";
import Hidden from "@material-ui/core/Hidden";
import IconButton from "@material-ui/core/IconButton";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Menu from "@material-ui/core/Menu";
import Toolbar from "@material-ui/core/Toolbar";
// @material-ui/icons components
import Clear from "@material-ui/icons/Clear";
import Favorite from "@material-ui/icons/Favorite";
import MenuIcon from "@material-ui/icons/Menu";
import Settings from "@material-ui/icons/Settings";
import VolumeUp from "@material-ui/icons/VolumeUp";

// core components
import componentStyles from "assets/theme/components/navbar.js";

const useStyles = makeStyles(componentStyles);

export default function AuthNavbar() {
  const classes = useStyles();
  const theme = useTheme();
  const [anchorEl, setAnchorEl] = React.useState(null);

  const isMenuOpen = Boolean(anchorEl);

  const handleMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };

  const menuId = "responsive-menu-id";

  const listObject = (
    <List className={classes.appBarList}>
      <ListItem className={classes.appBarListItem}>
        <Box
          component={Favorite}
          width="1.25rem!important"
          height="1.25rem!important"
          className={classes.appBarListItemIcon}
        />
        <Hidden lgUp>Discover</Hidden>
      </ListItem>
      <ListItem className={classes.appBarListItem}>
        <Box
          component={VolumeUp}
          width="1.25rem!important"
          height="1.25rem!important"
          className={classes.appBarListItemIcon}
        />
        <Hidden lgUp>Profile</Hidden>
      </ListItem>
      <ListItem className={classes.appBarListItem}>
        <Box
          component={Settings}
          width="1.25rem!important"
          height="1.25rem!important"
          className={classes.appBarListItemIcon}
        />
        <Hidden lgUp>Settings</Hidden>
      </ListItem>
    </List>
  );

  const appBarRootClasses = {
    root: classes.appBarRootWarning,
  };
  const menuClasses = { paper: classes.appBarMenuPaper };
  const menuPozitions = { vertical: "top", horizontal: "right" };
  return (
    <>
      <AppBar
        position="relative"
        color="inherit"
        elevation={0}
        classes={appBarRootClasses}
      >
        <Toolbar>
          <Container
            display="flex!important"
            justifyContent="space-between"
            alignItems="center"
            component={Box}
            maxWidth="xl"
          >
            <Box
              display="flex"
              justifyContent="space-between"
              alignItems="center"
              width="100%"
            >
              <Box component="a" className={classes.appBarBrand}>
                Warning Color
              </Box>
              <Hidden mdDown implementation="js">
                {listObject}
              </Hidden>
              <Hidden lgUp implementation="js">
                <IconButton
                  edge="start"
                  color="inherit"
                  onClick={handleMenuOpen}
                  aria-controls={menuId}
                  aria-haspopup="true"
                >
                  <Box
                    component={MenuIcon}
                    color={theme.palette.white.main}
                    width="2rem!important"
                    height="2rem!important"
                  />
                </IconButton>
                <Menu
                  anchorEl={anchorEl}
                  anchorOrigin={menuPozitions}
                  id={menuId}
                  keepMounted
                  transformOrigin={menuPozitions}
                  open={isMenuOpen}
                  onClose={handleMenuClose}
                  classes={menuClasses}
                >
                  <Box
                    display="flex"
                    justifyContent="space-between"
                    alignItems="center"
                    paddingLeft="1.25rem"
                    paddingRight="1.25rem"
                    paddingBottom="1rem"
                    className={classes.appBarOutlineNone}
                  >
                    <Box
                      alt="..."
                      height="36px"
                      component="img"
                      className={classes.appBarHeaderImg}
                      src={require("assets/img/brand/argon-react.png").default}
                    />
                    <IconButton
                      edge="start"
                      color="inherit"
                      onClick={handleMenuClose}
                      aria-controls={menuId}
                      aria-haspopup="true"
                    >
                      <Box
                        component={Clear}
                        width="2rem!important"
                        height="2rem!important"
                      />
                    </IconButton>
                  </Box>
                  <Box
                    component={Divider}
                    marginBottom="1rem!important"
                    marginLeft="1.25rem!important"
                    marginRight="1.25rem!important"
                  />
                  {listObject}
                </Menu>
              </Hidden>
            </Box>
          </Container>
        </Toolbar>
      </AppBar>
    </>
  );
}
import React from "react";
// import clsx from "clsx";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import { useTheme } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Box from "@material-ui/core/Box";
import Container from "@material-ui/core/Container";
import Divider from "@material-ui/core/Divider";
import Hidden from "@material-ui/core/Hidden";
import IconButton from "@material-ui/core/IconButton";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Menu from "@material-ui/core/Menu";
import Toolbar from "@material-ui/core/Toolbar";
// @material-ui/icons components
import Clear from "@material-ui/icons/Clear";
import Favorite from "@material-ui/icons/Favorite";
import MenuIcon from "@material-ui/icons/Menu";
import Settings from "@material-ui/icons/Settings";
import VolumeUp from "@material-ui/icons/VolumeUp";

// core components
import componentStyles from "assets/theme/components/navbar.js";

const useStyles = makeStyles(componentStyles);

export default function AuthNavbar() {
  const classes = useStyles();
  const theme = useTheme();
  const [anchorEl, setAnchorEl] = React.useState(null);

  const isMenuOpen = Boolean(anchorEl);

  const handleMenuOpen = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };

  const menuId = "responsive-menu-id";

  const listObject = (
    <List className={classes.appBarList}>
      <ListItem className={classes.appBarListItem}>
        <Box
          component={Favorite}
          width="1.25rem!important"
          height="1.25rem!important"
          className={classes.appBarListItemIcon}
        />
        <Hidden lgUp>Discover</Hidden>
      </ListItem>
      <ListItem className={classes.appBarListItem}>
        <Box
          component={VolumeUp}
          width="1.25rem!important"
          height="1.25rem!important"
          className={classes.appBarListItemIcon}
        />
        <Hidden lgUp>Profile</Hidden>
      </ListItem>
      <ListItem className={classes.appBarListItem}>
        <Box
          component={Settings}
          width="1.25rem!important"
          height="1.25rem!important"
          className={classes.appBarListItemIcon}
        />
        <Hidden lgUp>Settings</Hidden>
      </ListItem>
    </List>
  );

  const appBarRootClasses = {
    root: classes.appBarRootInfo,
  };
  const menuClasses = { paper: classes.appBarMenuPaper };
  const menuPozitions = { vertical: "top", horizontal: "right" };
  return (
    <>
      <AppBar
        position="relative"
        color="inherit"
        elevation={0}
        classes={appBarRootClasses}
      >
        <Toolbar>
          <Container
            display="flex!important"
            justifyContent="space-between"
            alignItems="center"
            component={Box}
            maxWidth="xl"
          >
            <Box
              display="flex"
              justifyContent="space-between"
              alignItems="center"
              width="100%"
            >
              <Box component="a" className={classes.appBarBrand}>
                Info Color
              </Box>
              <Hidden mdDown implementation="js">
                {listObject}
              </Hidden>
              <Hidden lgUp implementation="js">
                <IconButton
                  edge="start"
                  color="inherit"
                  onClick={handleMenuOpen}
                  aria-controls={menuId}
                  aria-haspopup="true"
                >
                  <Box
                    component={MenuIcon}
                    color={theme.palette.white.main}
                    width="2rem!important"
                    height="2rem!important"
                  />
                </IconButton>
                <Menu
                  anchorEl={anchorEl}
                  anchorOrigin={menuPozitions}
                  id={menuId}
                  keepMounted
                  transformOrigin={menuPozitions}
                  open={isMenuOpen}
                  onClose={handleMenuClose}
                  classes={menuClasses}
                >
                  <Box
                    display="flex"
                    justifyContent="space-between"
                    alignItems="center"
                    paddingLeft="1.25rem"
                    paddingRight="1.25rem"
                    paddingBottom="1rem"
                    className={classes.appBarOutlineNone}
                  >
                    <Box
                      alt="..."
                      height="36px"
                      component="img"
                      className={classes.appBarHeaderImg}
                      src={require("assets/img/brand/argon-react.png").default}
                    />
                    <IconButton
                      edge="start"
                      color="inherit"
                      onClick={handleMenuClose}
                      aria-controls={menuId}
                      aria-haspopup="true"
                    >
                      <Box
                        component={Clear}
                        width="2rem!important"
                        height="2rem!important"
                      />
                    </IconButton>
                  </Box>
                  <Box
                    component={Divider}
                    marginBottom="1rem!important"
                    marginLeft="1.25rem!important"
                    marginRight="1.25rem!important"
                  />
                  {listObject}
                </Menu>
              </Hidden>
            </Box>
          </Container>
        </Toolbar>
      </AppBar>
    </>
  );
}