React Suite Nav Multi-level Navigation

Last Updated : 18 Jun, 2022

React suite is a library of React components that has sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.

In this article, we’ll learn about React Suite Nav Removable. A nav component provides a list of various types of navigation menus, which can be landscape and portrait layouts. We can also create multi-level navigation in the navbar in which we can create multi-level dropdown menus.

Creating React Application And Installing Module:

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

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

Syntax:

// Import statement
import { Nav } from "rsuite/";

// App.Js file
function App() {
    <Nav>
      <Nav.Item>...</Nav.Item>
      <Nav.Menu title="...">
        <Nav.Item>...</Nav.Item>
        <Nav.Menu title="...">
          <Nav.Item>...</Nav.Item>
        </Nav.Menu>
      </Nav.Menu>
    </Nav>
}

Example 1: Below example demonstrates the basic use of the multi-level nav component.

Javascript

import { Nav } from "rsuite/"; 
import "rsuite/dist/rsuite.min.css"; 
  
export default function App() { 
    return ( 
        <center> 
            <div> 
                <h2>GeeksforGeeks</h2> 
                <h4 style={{ color: "green" }}> 
                    React Suite Nav Multilevel-navigation 
                </h4> 
                <div style={{ marginTop: 20 }}> 
                    <Nav> 
                        <Nav.Item active>Courses</Nav.Item> 
                        <Nav.Item>Tutorials</Nav.Item> 
                        <Nav.Menu title="Jobs"> 
                            <Nav.Item>Apply for Jobs</Nav.Item> 
                            <Nav.Item>Jobathon</Nav.Item> 
                            <Nav.Menu title="Post a Job"> 
                                <Nav.Item>Post a Job</Nav.Item> 
                                <Nav.Item>Open previous jobs</Nav.Item> 
                            </Nav.Menu> 
                        </Nav.Menu> 
                        <Nav.Menu title="Practice"> 
                            <Nav.Item>All DSA problems</Nav.Item> 
                            <Nav.Item>Problem of the Day</Nav.Item> 
                        </Nav.Menu> 
                    </Nav> 
                </div> 
            </div> 
        </center> 
    ); 
}

Output:

Example 2: Below example demonstrates the multi-level nav component with active and disabled options.

Javascript

import { Nav } from "rsuite/"; 
import "rsuite/dist/rsuite.min.css"; 
  
export default function App() { 
  
    return ( 
        <center> 
            <div> 
                <h2>GeeksforGeeks</h2> 
                <h4 style={{ color: "green" }}> 
                    React Suite Nav Multilevel-navigation 
                </h4> 
                <div style={{ marginTop: 20 }}> 
                    <Nav> 
                        <Nav.Item active>Home</Nav.Item> 
                        <Nav.Item disabled>Courses</Nav.Item> 
                        <Nav.Item>Tutorials</Nav.Item> 
                        <Nav.Menu title="Jobs"> 
                            <Nav.Item>Apply for Jobs</Nav.Item> 
                            <Nav.Item>Jobathon</Nav.Item> 
                            <Nav.Menu title="Post a Job"> 
                                <Nav.Item active> 
                                    Post a Job 
                                </Nav.Item> 
                                <Nav.Item disabled> 
                                    Open previous jobs 
                                </Nav.Item> 
                            </Nav.Menu> 
                        </Nav.Menu> 
                        <Nav.Menu title="Practice"> 
                            <Nav.Item> 
                                All DSA problems 
                            </Nav.Item> 
                            <Nav.Item active> 
                                Problem of the Day 
                            </Nav.Item> 
                        </Nav.Menu> 
                    </Nav> 
                </div> 
            </div> 
        </center> 
    ); 
} 