Material UI fixed MenuItem - reactjs

Question

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:

Answer 1

You can use position sticky but you will need to "adjust" z-index too because of this 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: