CODEWITHSUNDEEP
reactjsmaterial-ui
Arttu
Arttu

Reputation: 251

Material UI fixed MenuItem

I'm wondering is there possibility to add fixed MenuItem to Menu? I'd like to use one of MenuItems to show header. Also if there's another solutions I'm open to try them too.

Here's the structure:

<Menu>
    <MenuItem className={classes.header}>This is header</MenuItem>
    <MenuItem>Item</MenuItem>
    <MenuItem>Item</MenuItem>
    <MenuItem>Item</MenuItem>
</Menu>

I tried to set header MenuItem's position to fixed but it throws whole Menu top of the page.

header: {
   position: 'fixed',
},

EDIT: To clear a bit what I'm looking for. GitHub has same kind of menu:

enter image description here

Upvotes: 1

Views: 4234

Answers (1)

antoineso
antoineso

Reputation: 2151

You can use position sticky but you will need to "adjust" z-index too because of this issue:
overflow issue

so you can do something like this (based on material ui example):

import React from "react";
import IconButton from "@material-ui/core/IconButton";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import { makeStyles } from "@material-ui/core/styles";
import MoreVertIcon from "@material-ui/icons/MoreVert";

import { Paper, TextField } from "@material-ui/core";
const useStyles = makeStyles({
  header: {
    position: "sticky",
    top: 0,
    backgroundColor: "white",
     zIndex: 2
  },
  search: {
    marginBottom: "5px",
    
  },
  card: {
    width: "100%"
  }
});

const options = [
  "None",
  "Atria",
  "Callisto",
  "Dione",
  "Ganymede",
  "Hangouts Call",
  "Luna",
  "Oberon",
  "Phobos",
  "Pyxis",
  "Sedna",
  "Titania",
  "Triton",
  "Umbriel"
];

const ITEM_HEIGHT = 48;

export default function LongMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);
  const classes = useStyles();
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

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

  return (
    <div>
      <IconButton
        aria-label="more"
        aria-controls="long-menu"
        aria-haspopup="true"
        onClick={handleClick}
      >
        <MoreVertIcon />
      </IconButton>
      <Menu
        elevation={1}
        className={classes.menu}
        id="long-menu"
        anchorEl={anchorEl}
        keepMounted
        open={open}
        onClose={handleClose}
        PaperProps={{
          style: {
            maxHeight: ITEM_HEIGHT * 4.5,
            width: "800px",
            backgroundColor: "white"
          }
        }}
      >
        <div className={classes.header}>
          <Paper className={classes.card} elevation={3}>
            <TextField
              className={classes.search}
              label={"search filter"}
              variant={"outlined"}
            ></TextField>
          </Paper>
        </div>
        {options.map((option) => (
          <MenuItem
            key={option}
            selected={option === "Pyxis"}
            onClick={handleClose}
          >
            {option}
          </MenuItem>
        ))}
      </Menu>
    </div>
  );
}

here a sandbox link
this is the result after adding z-index:
with z-index

Upvotes: 3

Related Questions