Collapsed Navbar not working react and bootstrap 5

For some reason the collapsed navbar icon does not expand when clicked on on smaller screens. I copied the example from bootstrap 5 and made sure to include bootstrap css/js and jquery.

class NavBar extends Component {
    render() {
      return (
        <div className="NavBar">
            <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
                <div className="container-fluid">
                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                      <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
                      <div className="navbar-nav mx-auto">
                        <HashLink className="navbar-brand" to="/#app">
                            Site
                        </HashLink>
                        <HashLink className="nav-link" to="/#about">
                            About
                        </HashLink>
                        <HashLink className="nav-link" to="/#skills">
                            Skills
                        </HashLink>
                        <HashLink className="nav-link" to="/#experience">
                            Experience
                        </HashLink>
                        <Link className="nav-link" to="/calculator">
                            Calculator
                        </Link>
                      </div>
                    </div>
                </div>
            </nav>
        </div>
      );
    }
}

1 thought on “Collapsed Navbar not working react and bootstrap 5”

  1. I found an answer here that works via react hooks: https://dev.to/johnotu/how-to-toggle-bootstrap-navbar-collapse-button-in-react-without-jquery-joo

    import React, { useState } from 'react';
    import Logo from '../images/logo_512x512.png';
    
    const TopNav = props => {
      const [isNavCollapsed, setIsNavCollapsed] = useState(true);
    
      const handleNavCollapse = () => setIsNavCollapsed(!isNavCollapsed);
    
      return (
        <nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
          <a class="navbar-brand text-info font-weight-bolder" href="/">
            <img src={Logo} alt="Logo" width="36" height="36" className="vertical-align-middle" />
            <span className="">Discounter</span>
          </a>
          <button class="custom-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded={!isNavCollapsed ? true : false} aria-label="Toggle navigation" onClick={handleNavCollapse}>
            <span class="navbar-toggler-icon"></span>
          </button>
    
          <div class={`${isNavCollapsed ? 'collapse' : ''} navbar-collapse`} id="navbarsExample09">
            <a className="nav-link text-info" href="/contact">Support</a>
            <a className="nav-link text-info" href="/login">Login</a>
            <a href="/request-demo" className="btn btn-sm btn-info nav-link text-white" >Request demo</a>
          </div>
        </nav>
      );
    }
    
    export default TopNav;
    
    Reply

Leave a Comment