React Suite Nav Used with Link in next/link

0 0 2 minutes read

React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. Nav Provides a list of various forms of navigation menus, which can be landscape and portrait layouts.

Nav Items can be used with Links also. These can be used for any redirection.

Syntax:

<Nav >
    <Nav.Item >
        <Link href="https://www.zambiatek.com">Home</Link>
    </Nav.Item>
</Nav>

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

 npm install rsuite

Project Structure: It will look like the following.

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code. In this example, we have created a vertical nav with Links.

Javascript

import React, { useState } from 'react'; 
import 'rsuite/dist/rsuite.min.css'; 
import { Nav } from 'rsuite'; 
import Link from '@mui/material/Link'; 
  
export default function App() { 
  
    return ( 
        <div> 
            <h1 style={{ color: 'green' }}> 
                zambiatek 
            </h1> 
              
            <h3>React Suite Nav Used With Links in next/links </h3> 
              
            <Nav vertical > 
                <Nav.Item > 
                    <Link href= 
                        "https://www.zambiatek.com"> 
                            Home 
                    </Link> 
                </Nav.Item> 
                <Nav.Item > 
                    <Link href= 
                        "https://www.zambiatek.com"> 
                            News 
                    </Link> 
                </Nav.Item> 
                <Nav.Item > 
                    <Link href= 
                        "https://www.zambiatek.com"> 
                            Solutions 
                    </Link> 
                </Nav.Item> 
                <Nav.Item > 
                    <Link href= 
                        "https://www.zambiatek.com"> 
                            Products 
                    </Link> 
                </Nav.Item> 
                <Nav.Item > 
                    <Link href= 
                        "https://www.zambiatek.com"> 
                            About 
                    </Link> 
                </Nav.Item> 
            </Nav> 
        </div> 
    ) 
} 

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Example 2: In this example, we will also use icons with Nav Items and use Link with them.

Javascript

import React, { useState } from 'react'; 
import 'rsuite/dist/rsuite.min.css'; 
import SendIcon from '@rsuite/icons/Send'; 
import SearchIcon from '@rsuite/icons/Search'; 
import TrashIcon from '@rsuite/icons/Trash'; 
import SettingIcon from '@rsuite/icons/Setting'; 
import ExploreIcon from '@rsuite/icons/Explore'; 
import { Nav } from 'rsuite'; 
import Link from '@mui/material/Link'; 
export default function App() { 
  
    return ( 
        <div> 
            <h1 style={{ color: 'green' }}> 
                zambiatek 
            </h1> 
              
            <h3>React Suite Nav Used with Link in next/link </h3> 
              
            <Nav appearance="tabs" > 
                <Nav.Item icon={<ExploreIcon />} active > 
                    <Link href= 
                        "https://www.zambiatek.com"> 
                            Explore 
                    </Link> 
                </Nav.Item> 
                <Nav.Item icon={<SearchIcon />} > 
                    <Link href= 
                        "https://practice.zambiatek.com/courses?utm_source=gfg-article&utm_medium=Q1-2023&utm_campaign=courses"> 
                            Search 
                        </Link> 
                    </Nav.Item> 
                <Nav.Item icon={<SendIcon />} > 
                    <Link href= 
                        "https://practice.zambiatek.com/jobs"> 
                            Hire 
                    </Link> 
                </Nav.Item> 
                <Nav.Item icon={<SettingIcon />}> 
                    <Link href= 
                        "https://practice.zambiatek.com/events"> 
                            Events 
                    </Link> 
                </Nav.Item> 
            </Nav> 
        </div> 
    ) 
} 

Output:

Reference: https://rsuitejs.com/components/nav/#used-with-code-link-code-in-code-next-link-code

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!