What is the best way to adjust the position of a dropdown menu in Material UI?

I am currently working on a Gatsby application and I'm trying to achieve a dropdown menu effect when the Menu icon is clicked, with the menu appearing right under the header and expanding to 100% width. Below is the code snippet that I have been using:

Despite my efforts to modify the component properties as shown below, the expected behavior is not being achieved:

          getContentAnchorEl={null}
          anchorEl={anchorEl}
          anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'left',
          }}
          transformOrigin={{
            vertical: 'bottom',
            horizontal: 'center',
          }}
          
import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import MenuItem from "@material-ui/core/MenuItem"
import { Menu } from '@material-ui/core';
import { Link } from "gatsby"

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    backgroundColor: "#e8eaf6",
    color: "black"
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1
  },
}));

export default function NavBar() {
  const classes = useStyles();
  const [open, setOpen] = useState(false)
  const [anchorEl, setAnchorEl] = React.useState(null);
  const handleClick = (e) =>{
    setOpen(!open)
    setAnchorEl(document.querySelector('header'))
  }
  const handleMenuClose = () => {
    setOpen(!open)
    setAnchorEl(null)
  }

  return (
    <AppBar position="static" className={classes.root}>
      <Toolbar>
        <Typography variant="h5" className={classes.title}>
          Inhouse Orders
        </Typography>
        <IconButton edge="false" className={classes.menuButton} color="inherit" aria-label="menu">
          <MenuIcon onClick={(e)=>handleClick(e)}/>
        </IconButton>
        <Menu
          className={classes.menu}
          open={open}
          onClose={handleMenuClose}
          getContentAnchorEl={null}
          anchorEl={anchorEl}
          anchorOrigin={{
            vertical: 'top',
            horizontal: 'left',
          }}
          transformOrigin={{
            vertical: 'bottom',
            horizontal: 'center',
          }}
          >
          <Link to="/1"><MenuItem>1</MenuItem></Link>
          <Link to="/2"><MenuItem>2</MenuItem></Link>
          <Link to="/3"><MenuItem>3</MenuItem></Link>
          <Link to="/4"><MenuItem>4</MenuItem></Link>
        </Menu>
      </Toolbar>
    </AppBar>
  );
}

At this point, I am unsure about what steps to take next. Should I consider creating a custom theme or tweaking existing styles?

Answer №1

If you're looking to customize the position of the dropdown menu in Material UI Popover, check out the Anchor playground in their documentation for guidance.

Regarding the 100% width query, it seems like there might be a misunderstanding. The dropdown menu's anchor is fixed and adjusts its width based on the content size. If you require a specific width, consider using a Dialog component instead of a dropdown menu.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tracing a path with a snapping motion using my thumb

Before we begin, let's take a look at the example below. The functionality of this component should mimic that of an input type range. However, I am facing some challenges in calculating the step value and snapping the thumb onto the trail based on t ...

Identify the currently active subitem within the item-active class in a PHP carousel slider

I am working on creating an image carousel slider with 4 items and 4 slides each. These images will act as radio buttons, and I want to highlight the slide corresponding to the selected radio button. So, when the carousel loads, the selected slide should b ...

Tips for creating sliding header content alongside the header

Is it possible for the content in the header to scroll up, displaying only the navigation list and hiding the logo when a user scrolls on the website? Currently, while the header background slides up, the content within the header remains in place. I feel ...

Utilizing the jQuery slideToggle method on the specified target element

I'm encountering an issue with jQuery slideToggle, and here's the code I have: $(".dropdownmainmenu").click(function(){ $(this).children(".showmenu").slideToggle(); $(this).toggleClass("activemainmenu"); $(this).find(".showarrowmainmen ...

having difficulty utilizing svg files in a react application

I'm having trouble with a SVG image. I initially tried importing it from a folder, but it appeared empty. Then, I attempted to directly specify the path, but that didn't solve the issue. The file name is image.svg <svg xmlns="http://www. ...

concise stylus CSS selector

Is there a way to condense these stylus selectors for a cleaner look? #map > div.mapboxgl-control-container > div.mapboxgl-ctrl-top-left > div:nth-child(1) > button #map > div.mapboxgl-control-container > div.mapboxgl-ctrl-top-left > ...

What is preventing the "car" icon from moving along the designated "path" in an svg file?

When I click "next", the path changes color, but the "car" does not move. When I setState . However, if I setState in: const [position, setPosition] = useState('here!!! I set position') The car moves. What could be the problem? Unfortunately ...

Utilizing the `repeat` function within `grid-template-areas` eliminates the need to manually repeat grid cell

When working with grid-template-areas in CSS grid, I encountered a situation where I wanted a header to span the entire width. Instead of defining the template-grid-columns with repeat(12, 1fr), I was searching for a way to utilize repeat() so that I would ...

Using CSS to Showcase Text and Images

Setting up a database for Weapons for Sale and incorporating PHP code: <?php echo '<link rel="stylesheet" href="display.css" type="text/css">'; function FindPhoto($name) { $dir_path = "http://www.chemicalzero.com/FireArms_Bis/Guns ...

Enhancing Material UI v4 Themes using TypeScript

I am attempting to implement my own custom palette option in the theme section, but I am struggling with how to do the augmentation part using TypeScript. So far, I have created a file named "material-ui.d.ts" and inside it, I only have: import { PaletteO ...

Encountered a problem while attempting to generate a React project using the npx create-react

I encountered an error in Visual Studio Code, where the second part is causing issues and I can't even install anything with npm in the terminal. npm install -g npm@latest npm ERR! code ECONNREFUSED npm ERR! errno ECONNREFUSED npm ERR! FetchError: req ...

What is the process for adjusting the color of the browser tab?

My chat application is running smoothly, but a client has requested the ability to highlight or make the browser tab blink when they receive a visitor call. This will help them respond promptly to incoming inquiries. Does anyone know how to implement thi ...

What are some ways to connect my CSS styles without encountering a MIME error?

Working on a Nodejs - Express - Vanillajs project, I encountered an issue when testing my routes. The index page failed to load CSS, displaying the following error message: Refused to apply style from 'http://localhost:3000/public/css/bootstrap.min. ...

Struggling to properly position buttons within a horizontal form layout in Bootstrap

I'm facing an issue with aligning buttons and inputs in my code. The buttons are currently aligned with the labels, but I want them to be aligned with the inputs instead. I've tried using inline forms, but it's not working as expected. What ...

How to work with multiple selections in React material-ui Autocomplete

I'm currently using Material-ui Autocomplete in multiple selection mode. My goal is to retrieve all the selected values when the form is submitted. Although I found a solution on how to get individual values through the onChange event handler from thi ...

Different "criteria" for CSS wildcard selectors using Selenium

There are several CSS webelements on my page with ids in the format: cell_[number]-button_[number] I am attempting to target ALL of these elements by using Selenium to locate all elements that begin with cell and include button: var elements = Util.driver ...

Tips for sending custom props to a dynamic page in Next.js

I have created a component called Card.js which is responsible for linking to dynamic pages when a card is clicked. My goal is to pass a value, such as 'category', to the dynamic page [id].js so that I can implement additional logic there. Card. ...

Utilize CSS transition to smoothly reveal a hidden div with a fading effect

I am trying to create a hover effect where a caption displayed over an image fades in with a background color change. I have attempted to use transitions but they do not seem to work for block elements. For the code and JSFiddle, please visit this link. ...

Creating a centered arrow using CSS within boxes

Here is the CSS class that I have applied to my divs: .rightarrow{ width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 20px; border-color: transparent transparent transparent #aaaaa9; } This is ...

Having trouble getting my contact form to function with React and Express

I recently created a form using React which can be found at react_project/src/components/ContactForm/index.js const FormSection = () => { const [status, setStatus] = useState("Submit"); const handleSubmit = async (e) => { e.preventDefault(); ...