Discussion on: Bootstrap 5 + React project setup and customisation

[Ruben Santana]

Hello Ted. You can use something like this to collapse the NavBar.

import React, { useState } from 'react';

const TopNav = () => {
  const [isNavCollapsed, setIsNavCollapsed] = useState(true);

  const handleNavCollapse = () => setIsNavCollapsed(!isNavCollapsed);

  return (
    <>
      <div id="navSpace"></div>
      <nav id="navPrincipal" className="navbar navbar-expand-lg navbar-light bg-light">
        <div className="container-fluid">
          <a className="navbar-brand" href="/">
            <img
              src="img/logo.png"
              alt="Logo"
              id="navbar-logo"
              className="vertical-align-middle"
            />
          </a>
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarPrincipal"
            aria-controls="navbarPrincipal"
            aria-expanded={!isNavCollapsed ? true : false}
            aria-label="Toggle navigation"
            onClick={handleNavCollapse}
          >
            <span className="navbar-toggler-icon"></span>
          </button>

          <div
            className={`${isNavCollapsed ? 'collapse' : ''} navbar-collapse`}
            id="navbarPrincipal"
          >
            <a className="nav-link text-dark" href="/uno">
              Uno
            </a>
            <a className="nav-link text-dark" href="/dos">
              Dos
            </a>
          </div>
        </div>
      </nav>
    </>
  );
};

export default TopNav;

Credit to dev.to/johnotu/how-to-toggle-boots...