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:

• NPM and Node
• React JS
• HTML, CSS, and JavaScript
• ReactJS ChakraUI

We will use the following approaches to implement Navigation Bar using React Chakra UI

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">
                GeeksforGeeks -
                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=' '>
                         <a href="https://www.geeksforgeeks.org/" target="_blank">
                            <img bg='red' src={gfgLogo} className="logo react"
                                alt="gfg logo" />
                         </a>
                        <BreadcrumbItem>
                            <BreadcrumbLink color='blue'
                              href='https://www.geeksforgeeks.org/'>
                              Home
                             </BreadcrumbLink>
                        </BreadcrumbItem>
                        <BreadcrumbItem>
                            <Link color='blue'
                                href=
                'https://www.geeksforgeeks.org/how-to-implement-chakra-ui-in-reactjs/'
                                isExternal>
                                About
                            </Link>
                        </BreadcrumbItem>

                        <BreadcrumbItem>
                            <BreadcrumbLink color='blue' href=
                            'https://www.geeksforgeeks.org/jobs?ref=ghm'>
                                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>
                            <a href="https://www.geeksforgeeks.org/"
                                target="_blank">
                                <img src={gfgLogo}
                                    className="logo react"
                                    alt="gfg logo" />
                            </a>
                        </MenuButton>
                        <MenuList>
                            <MenuItem as='a'
                                href='https://www.geeksforgeeks.org/'>
                                Home
                            </MenuItem>
                            <MenuItem as='a' href='#'>
                                About Us
                            </MenuItem>
                            <MenuItem as='a' href='#'>
                                Contact Us
                            </MenuItem>
                            <MenuDivider />
                            <MenuItem as='a' href=
'https://www.geeksforgeeks.org/jobs?ref=ghm'>
                                Careers
                            </MenuItem>
                            <MenuItem as='a' href=
'https://www.geeksforgeeks.org/courses/school-guide-course?'>
                                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: