React Suite Nav Multi-level Navigation

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.

Output:

 

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

Output:

 

Reference: https://rsuitejs.com/components/nav/#multi-level-navigation