How to create mega menu with reactjs

user_10948037 0
Viewed 2478

I am working on ecommerce web app with react/redux. I have two questions:

  1. How do I create a mega menu like aws(https://aws.amazon.com )?

  2. How do I display a category menu with sub categories filter on the left and content from the selected category with featured image thumbnail on the right similar to what they have on aws(https://aws.amazon.com )?

I am looking to use, either material UI, or Ant design or Material Bootstrap or any framework that can do that real well.

enter image description here

enter image description here

With image

react-bootstrap ant-design-pro redux material-ui reactjs
1 Answers

In Material UI, you could achieve this with the Popper utility.

You could create a popper and give it a height and width of your desired "mega" size.

The basic Material UI Popper example is below:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Popper from '@material-ui/core/Popper';

const useStyles = makeStyles((theme) => ({
  paper: {
    border: '1px solid',
    padding: theme.spacing(1),
    backgroundColor: theme.palette.background.paper,
  },
}));

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

  const handleClick = (event) => {
    setAnchorEl(anchorEl ? null : event.currentTarget);
  };

  const open = Boolean(anchorEl);
  const id = open ? 'simple-popper' : undefined;

  return (
    <div>
      <button aria-describedby={id} type="button" onClick={handleClick}>
        Toggle Popper
      </button>
      <Popper id={id} open={open} anchorEl={anchorEl}>
        <div className={classes.paper}>The content of the Popper.</div>
      </Popper>
    </div>
  );
}

You could add width and height properties to the paper style class according to your desired size (below is simply an example -- you may want to use pixel/percentages):

const useStyles = makeStyles((theme) => ({
    paper: {
        width: "50vh",
        height: 600,
        border: "1px solid",
        padding: theme.spacing(1),
        backgroundColor: theme.palette.background.paper,
    },
}));
user_81517500
Related