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>
    );
}