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.
Prerequisites:
We will use the following approaches to implement Navigation Bar using React Chakra UI
Table of Content
- Navigation Bar Using Breadcrumb and LinkBox
- Navigation Bar Using Menu Components
Steps to Create React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app gfg-navigation-app
Step 2: After creating your project folder(i.e. gfg-navigation-app), move to it by using the following command:
cd gfg-navigation-app
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
Project Structure:
The updated dependencies in the package.json file:
"dependencies": {
"@chakra-ui/react": "^2.8.2",
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"framer-motion": "^6.5.1",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
Approach 1: Navigation Bar Using Breadcrumb and LinkBox:
We created the basic box having navigation components like Breadcrumb and LinkBox from the Chakra UI library and placed it for handling a header menu bar with the usual menu items as “Home”, “About”, “Contact” and “Career”. A logo is added with an image icon and a href link is used for adding links to various navigated landing web pages. Access to other links is implemented using HTML href and Chakra UI BreadcrumbLink.
Example: Below example demonstrates the usage of first approach to create the navigation.
Javascript
// Filename - App.js import { ChakraProvider, Text } from "@chakra-ui/react" ; import Nav from "./Nav" ; import "./App.css" ; function App() { return ( <ChakraProvider> <Text color= "#2F8D46" fontSize= "2rem" textAlign= "center" fontWeight= "600" my= "1rem" > w3wiki - ReactJS Chakra UI concepts </Text> <Nav /> </ChakraProvider> ); } export default App; |
Javascript
import { useState } from 'react' import gfgLogo from './assets/gfg-new-logo.svg' import { Flex, Box, Text,Image,Link, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, } from "@chakra-ui/react" ; const Nav = () => { return ( <Box bg= "lightgrey" w= "100%" h= "90%" p={4}> <Text as= "h2" fontWeight= "bold" > Top Navigation Bar by Chakra UI </Text> <Flex mt= '3' justifyContent= "left" > <Flex direction= "column" alignItems= "left" w={{ base: "90%" , md: "90%" , lg: "100%" }}> <Breadcrumb bg= "#BFD8AF" fontWeight= 'bold' spacing= '4px' pt= '1' separator= ' ' > <img bg= 'red' src={gfgLogo} className= "logo react" alt= "gfg logo" /> </a> <BreadcrumbItem> <BreadcrumbLink color= 'blue' Home </BreadcrumbLink> </BreadcrumbItem> <BreadcrumbItem> <Link color= 'blue' href= isExternal> About </Link> </BreadcrumbItem> <BreadcrumbItem> <BreadcrumbLink color= 'blue' href= Career </BreadcrumbLink> </BreadcrumbItem> <BreadcrumbItem> <BreadcrumbLink color= 'blue' href= '#' > Contact </BreadcrumbLink> </BreadcrumbItem> </Breadcrumb> </Flex> </Flex> </Box> ); }; export default Nav; |
Step to Run the application: Run the application using the following command:
npm run start
Output: Now go to http://localhost:3000 in your browser:
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: