Chakra UI Navigation Link - Coding

Chakra UI Navigation Link are accessible elements used primarily for navigation and a versatile component designed to improve the navigation experience within web applications. Integrated seamlessly into Chakra UI, a popular React component library, this feature empowers developers to create interactive and intuitive navigation links, providing users with quick access to different sections or pages while maintaining a cohesive and visually appealing interface.

Prerequisites:

Approach:

In this article, we’ll explore how to leverage Chakra UI’s Navigation Link component to enhance the navigation experience in web applications. We’ll cover various aspects such as setting up navigation links, customizing styles, and implementing interactivity to create a seamless navigation experience.

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: Below is the basic example of the Chakra UI Navigation Link:

Javascript

// App.js File
 
import React from 'react';
import {
    ChakraProvider,
    Box, Text, Link
}
    from '@chakra-ui/react';
import { ExternalLinkIcon }
    from '@chakra-ui/icons'
 
function App() {
    return (
        <ChakraProvider>
            <Text
                color="#2F8D46"
                fontSize="2rem"
                textAlign="center"
                fontWeight="400"
                my="1rem">
                GeeksforGeeks - React JS Chakra UI concepts
            </Text>
            <Box w="40%" mx="auto">
                <Text
                    color="#2F8D46"
                    fontSize="1.4rem"
                    fontWeight="400"
                    my="1rem"
                    mt="2rem"
                >
                    Simple Link using Link Component
                </Text>
                <Link>Chakra UI</Link>
 
                <Text
                    color="#2F8D46"
                    fontSize="1.4rem"
                    fontWeight="400"
                    my="1rem"
                    mt="2rem"
                >
                    External Link
                </Text>
                <Link href='https://chakra-ui.com' isExternal>
                    Chakra Design system <ExternalLinkIcon mx='2px' />
                </Link>
 
                <Text
                    color="#2F8D46"
                    fontSize="1.4rem"
                    fontWeight="400"
                    my="1rem"
                    mt="2rem"
                >
                    Link inline with Text
                </Text>
                <Text>
                    Did you know that{' '}
                    <Link color='teal.500' href='#'>
                        links can live inline with text
                    </Link>
                </Text>
            </Box>
        </ChakraProvider>
    );
}
 
export default App;

Steps to run the application:

npm start

Output:

Chakra UI Navigation Link

Reffered: https://www.geeksforgeeks.org

ReactJS

Related
Chakra UI Navigation Link Overlay
How to set up the Provider Component in a React application ?
Chakra UI Margin and padding
What are the benefits of using hooks in React-Redux?
What is the React Context API?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	12