Chakra UI Overlay Menu

An overlay menu is a type of navigation or menu system in web design that is displayed as an overlay on top of the main content of a webpage. It contrasts with traditional menus that are embedded within the page layout. The overlay menu is considered a modern design trend offering a dynamic size of menus don't similar to traditional menus and it can cover the whole page or we can set a custom margin around menu.

Prerequisites:

• NPM & Node
• React
• HTML, CSS and JavaScript
• React Chakra UI

Approach:

We created a simple Overlay Menu that contains random different menu items and it can be changed according the requirements using the Chakra UI Menu Component from the Chakra UI Library and we can customize this menu according to the website requirements.

Steps to Create the Project:

Step 1: Create a React application using the following command:

npx create-react-app gfg

Step 2: After creating your project folder(i.e. my-app), move to it by using the following command:

cd gfg

Step 3: After creating the React application, Install the required package using the following command:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Step 4: After that we will install the Chakra UI Icon Library using the following command:

npm i @chakra-ui/icons

Project Structure:

The updated dependencies in package.json will look like this:

"dependencies": {
    "@chakra-ui/icons": "^2.1.1",
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "framer-motion": "^11.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
},

Example: Write down the code in respective files:

// App.js

import React from "react";
import { ChakraProvider, CSSReset, Box, Container } from "@chakra-ui/react";
import { ChevronDownIcon } from "@chakra-ui/icons";
import { Button, Menu, MenuButton, MenuList, MenuItem } from "@chakra-ui/react";

function App() {
    return (
        <ChakraProvider>
            <CSSReset />
            <Container maxW="container.sm" mt={10}>
                <Box>
                    <Menu>
                        <MenuButton as={Button} 
                                    rightIcon={<ChevronDownIcon />}>
                            Actions
                        </MenuButton>
                        <MenuList>
                            <MenuItem>Download</MenuItem>
                            <MenuItem>Create a Copy</MenuItem>
                            <MenuItem>Mark as Draft</MenuItem>
                            <MenuItem>Delete</MenuItem>
                            <MenuItem>Attend a Workshop</MenuItem>
                        </MenuList>
                    </Menu>
                </Box>
            </Container>
        </ChakraProvider>
    );
}

export default App;

Steps to run the application:

Step 1: Type the following command in terminal

npm start

Step 2: Open web-browser and type the following URL

http://localhost:3000/

Output:

yashagarwal2852002

Follow

Improve

Article Tags :

• Web Technologies
• ReactJS
• Geeks Premier League
• Chakra UI
• Geeks Premier League 2023

+1 More