React Suite Nav Used with Link in next/link

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.geeksforgeeks.org">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' }}>
                GeeksforGeeks
            </h1>

            <h3>React Suite Nav Used With Links in next/links </h3>

            <Nav vertical >
                <Nav.Item >
                    <Link href=
                        "https://www.geeksforgeeks.org">
                            Home
                    </Link>
                </Nav.Item>
                <Nav.Item >
                    <Link href=
                        "https://www.geeksforgeeks.org">
                            News
                    </Link>
                </Nav.Item>
                <Nav.Item >
                    <Link href=
                        "https://www.geeksforgeeks.org">
                            Solutions
                    </Link>
                </Nav.Item>
                <Nav.Item >
                    <Link href=
                        "https://www.geeksforgeeks.org">
                            Products
                    </Link>
                </Nav.Item>
                <Nav.Item >
                    <Link href=
                        "https://www.geeksforgeeks.org">
                            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' }}>
                GeeksforGeeks
            </h1>

            <h3>React Suite Nav Used with Link in next/link </h3>

            <Nav appearance="tabs" >
                <Nav.Item icon={<ExploreIcon />} active >
                    <Link href=
                        "https://www.geeksforgeeks.org">
                            Explore
                    </Link>
                </Nav.Item>
                <Nav.Item icon={<SearchIcon />} >
                    <Link href=
                        "https://www.geeksforgeeks.org/courses?utm_source=gfg-article&utm_medium=Q1-2023&utm_campaign=courses">
                            Search
                        </Link>
                    </Nav.Item>
                <Nav.Item icon={<SendIcon />} >
                    <Link href=
                        "https://practice.geeksforgeeks.org/jobs">
                            Hire
                    </Link>
                </Nav.Item>
                <Nav.Item icon={<SettingIcon />}>
                    <Link href=
                        "https://practice.geeksforgeeks.org/events">
                            Events
                    </Link>
                </Nav.Item>
            </Nav>
        </div>
    )
}

Output:

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