Material UI fixed MenuItem

0
votes

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

1
reactjsmaterial-ui
It really doesn't make any sense to me. fixed position means "Don't move when user scrolls or something like that" How will it apply on MenuItems? Do you mean "Show it before (top of) any other thing"? – OverShifted
I want to use first MenuItem to show header of Menu and next MenuItems are actual items. In my project there's actually almost 30 items so Menu is scrollable, but I want to keep header on top. – Arttu
you want it look like a table ? – antoineso
Ok. now it makes more sense. I think having a scrollable Menu Is not a really good idea. But for any reason; this might fit best for your usage. But try using other widgets if your menu is that long. – OverShifted
I added image to original post to clear what I'm looking for – Arttu

1 Answers

2
votes

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