Chakra UI Navigation Link
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:
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" > w3wiki - 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: