Chakra UI Overlay Menu - Coding

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:

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:

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:

Javascript

// 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:

Chakra Ui Overlay Menu

Reffered: https://www.geeksforgeeks.org

Geeks Premier League

Related
Chakra UI Border Radius
Chakra UI Shadow
Chakra UI Color and background color
Chakra UI Form Range Slider
What Is The Primary Purpose Of The Azure Data Explorer?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	13