Approach 2 Navigation Bar Using Menu Components
In this approach, we have used the menu components including MenuButton, MenuList, MenuItem, and MenuDivider of ChakraUI.
Example: Below example demonstrates the usage of menu component approach to create the navigation.
Javascript
import { useState } from 'react'import gfgLogo from './assets/gfg-new-logo.svg'import { Flex, Box, Link, Button, Menu, MenuButton, MenuList, MenuItem, MenuDivider,} from "@chakra-ui/react";const Nav = () => { return ( <Box bg="lightgrey" w="100%" h="100%" p={4}> <Flex mt='3' justifyContent="center"> <Flex direction="row" alignItems="left" w={{ base: "90%", md: "70%", lg: "50%" }}> <Menu> <MenuButton> target="_blank"> <img src={gfgLogo} className="logo react" alt="gfg logo" /> </a> </MenuButton> <MenuList> <MenuItem as='a' Home </MenuItem> <MenuItem as='a' href='#'> About Us </MenuItem> <MenuItem as='a' href='#'> Contact Us </MenuItem> <MenuDivider /> <MenuItem as='a' href= Careers </MenuItem> <MenuItem as='a' href= Our Courses </MenuItem> </MenuList> </Menu> </Flex> </Flex> </Box> );};export default Nav; |
Steps to Run the App:
npm start
Output: Now go to http://localhost:3000 in your browser:
React Chakra UI Navigation
React Chakra UI Navigation Bar is used in every website to make it more user-friendly so that the navigation through the website becomes easy and the user can directly search for the topic of their interest.