Chakra UI Overlay Menu

Last Updated : 04 Feb, 2024

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;