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:
![](https://neveropen.co.za/wp-content/uploads/2023/10/wardslaus_rubhabha_projectstructure-117.png)
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>neveropen</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:
![](https://neveropen.co.za/wp-content/uploads/2023/10/neveropen_ezgifcomgifmaker37.gif)
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>neveropen</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> ); } |
Output:
![](https://neveropen.co.za/wp-content/uploads/2023/10/rubhabha_ezgifcomgifmaker36.gif)
Reference: https://rsuitejs.com/components/nav/#multi-level-navigation