React Suite Nav Justified

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 Justified helps to create a Nav in which Nav items have equal width. 

 Syntax:

<Nav justified>
    <Nav.Item >Item</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 1: 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 will learn to create a simple justified Nav.

Javascript

import React,{useState} from 'react';
import 'rsuite/dist/rsuite.min.css';
import { Nav } from 'rsuite';
export default function App(){

return (
    <div>
        <h1 style={{color:'green'}}>GeeksforGeeks</h1>
        <h3>React Suite Nav Justified</h3>
        <Nav justified activeKey="home" >
        <Nav.Item eventKey="home" >
        Home
        </Nav.Item>
        <Nav.Item eventKey="news">News</Nav.Item>
        <Nav.Item eventKey="solutions">Solutions</Nav.Item>
        <Nav.Item eventKey="products">Products</Nav.Item>
        <Nav.Item eventKey="about">About</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 have created a Justified Nav. Also provided some colors to it to show the equal distance between Nav items. Icons are also used from https://rsuitejs.com/resources/icons/

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';
export default function App(){

return (
    <div>
        <h1 style={{color:'green'}}>GeeksforGeeks</h1>
        <h3>React Suite Nav Justified</h3>
        <Nav justified activeKey="Explore" >
        <Nav.Item eventKey="Explore" icon={<ExploreIcon/>}
        style={{background:'green',color:'white'}}>
        Explore
        </Nav.Item>
        <Nav.Item eventKey="Search" icon={<SearchIcon/>}
        style={{background:'red',color:'white'}}>
        Search</Nav.Item>
        <Nav.Item eventKey="delete" icon={<TrashIcon/>}
        style={{background:'violet',color:'white'}}>
        Delete</Nav.Item>
        <Nav.Item eventKey="send" icon={<SendIcon/>}
        style={{background:'orange',color:'white'}}>Send</Nav.Item>
        <Nav.Item eventKey="settings" icon={<SettingIcon/>}
        style={{background:'pink',color:'black'}}>Settings</Nav.Item>
        </Nav>
    </div>
)
}

Output:

Reference: https://rsuitejs.com/components/nav/#justified