Approach 1 Navigation Bar Using Breadcrumb and LinkBox

Approach 2: Navigation Bar Using Menu Components:

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

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.

Tags:

#Chakra UI #ReactJS #Web Technologies

Project Structure:

Approach 2: Navigation Bar Using Menu Components:

Approach 1 Navigation Bar Using Breadcrumb and LinkBox

Javascript

Javascript

React Chakra UI Navigation

Similar Reads