React Suite Nav Navegación multinivel

React suite es una biblioteca de componentes de React que tiene un diseño de interfaz de usuario sensato y una experiencia de desarrollo amigable. Es compatible con todos los principales navegadores. Proporciona componentes preconstruidos de React que se pueden usar fácilmente en cualquier aplicación web.

En este artículo, aprenderemos sobre React Suite Nav Extraíble . Un componente de navegación proporciona una lista de varios tipos de menús de navegación, que pueden ser diseños horizontales y verticales. También podemos crear una navegación de varios niveles en la barra de navegación en la que podemos crear menús desplegables de varios niveles.

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el comando dado:

npm create-react-app projectname

Paso 2: después de crear su proyecto, muévase a él usando el comando dado:

cd projectname

Paso 3: ahora instale el paquete de Nodes rsuite usando el comando dado:

npm install rsuite

Estructura del proyecto: ahora la estructura de su proyecto debería tener el siguiente aspecto:

 

Sintaxis:

// 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>
}

Ejemplo 1: El siguiente ejemplo demuestra el uso básico del componente de navegación multinivel.

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

Producción:

 

Ejemplo 2: el siguiente ejemplo muestra el componente de navegación multinivel con opciones activas y deshabilitadas.

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

Producción:

 

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