Si ya has creado un componente de navbar en tu aplicación React utilizando Bootstrap y ahora quieres asegurarte de que el menú del navbar se cierre automáticamente al hacer clic en cualquier enlace, estás en el lugar correcto. Aquí te mostraré cómo hacerlo de manera sencilla.
Tabla de contenidos
- Paso 1: Definir el Estado de Colapso
- Paso 2: Crear Manejadores de Eventos
- Paso 3: Añadir Eventos a los Elementos del Navbar
Paso 1: Definir el Estado de Colapso
Primero, necesitas agregar un estado en tu componente para controlar si el navbar está colapsado o expandido. Utilizaremos el hook useState de React para manejar este estado.
import React, { useState } from 'react';
import { NavLink } from "react-router-dom";
export default function MyNavbar() {
const [isOpen, setIsOpen] = useState(false);
return (
<nav className="navbar navbar-expand-lg bg-body-tertiary">
<div className="container-fluid">
{/* ...resto del código */}
{/* La clase show de Bootstrap se utiliza para mostrar u ocultar el menú colapsado. */}
<div className={`collapse navbar-collapse ${isOpen ? 'show' : ''}`} id="navbarSupportedContent">
{/* ...resto del código */}
</div>
</div>
</nav>
);
}Paso 2: Crear Manejadores de Eventos
Vamos a crear dos funciones: una para alternar el estado de colapso del navbar y otra para cerrarlo cuando se haga clic en cualquier enlace.
import React, { useState } from 'react';
import { NavLink } from "react-router-dom";
export default function MyNavbar() {
const [isOpen, setIsOpen] = useState(false);
// Alternar el estado isOpen entre true y false cuando se hace clic en el botón del navbar
const handleToggle = () => {
setIsOpen(!isOpen);
};
// Establecer el estado isOpen en false, cerrando el menú cuando se hace clic en cualquier enlace
const handleClose = () => {
setIsOpen(false);
};
return (
<nav className="navbar navbar-expand-lg bg-body-tertiary">
{/* ...resto del código */}
</nav>
);
}Paso 3: Añadir Eventos a los Elementos del Navbar
Ahora, vamos a añadir estos manejadores de eventos a los elementos del navbar. Asegúrate de que el botón de toggle del navbar y cada enlace del menú llamen a estas funciones.
import React, { useState } from 'react';
import { NavLink } from "react-router-dom";
export default function MyNavbar() {
const [isOpen, setIsOpen] = useState(false);
const handleToggle = () => {
setIsOpen(!isOpen);
};
const handleClose = () => {
setIsOpen(false);
};
return (
<nav className="navbar navbar-expand-lg bg-body-tertiary">
<div className="container-fluid">
<NavLink to="/" className="navbar-brand fs-3 fw-bold" onClick={handleClose}>
Brand
</NavLink>
<button
className="navbar-toggler"
type="button"
onClick={handleToggle}
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded={isOpen ? 'true' : 'false'}
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
{/* La clase show de Bootstrap se utiliza para mostrar u ocultar el menú colapsado. */}
<div className={`collapse navbar-collapse ${isOpen ? 'show' : ''}`} id="navbarSupportedContent">
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
<li className="nav-item">
<NavLink to="/" className={`nav-link ${({ isActive}) => isActive ? "active" : ""}`} onClick={handleClose}>
Home
</NavLink>
</li>
<li className="nav-item">
<NavLink to="/link" className={`nav-link ${({ isActive}) => isActive ? "active" : ""}`} onClick={handleClose}>
Link
</NavLink>
</li>
<li className="nav-item dropdown">
<a className="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul className="dropdown-menu">
<li>
<NavLink to="/page-one" className={`dropdown-item ${({ isActive}) => isActive ? "active" : ""}`} onClick={handleClose}>
Page One
</NavLink>
</li>
<li>
<NavLink to="/page-two" className={`dropdown-item ${({ isActive}) => isActive ? "active" : ""}`} onClick={handleClose}>
Page Two
</NavLink>
</li>
<li><hr className="dropdown-divider" /></li>
<li>
<NavLink to="/page-three" className={`dropdown-item ${({ isActive}) => isActive ? "active" : ""}`} onClick={handleClose}>
Page Three
</NavLink>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
);
}
Y eso es todo. Con estos simples cambios, el menú de tu navbar se cerrará automáticamente cada vez que se haga clic en un enlace, mejorando así la experiencia de usuario en dispositivos móviles.
Espero que este pequeño tutorial te haya sido útil. ¡Déjame tus comentarios si tienes alguna pregunta!
Y si tienes dudas con respecto a cómo integrar Bootstrap en tu proyecto con React, estos recursos pueden interesarte: