I am using bootstrap5 navbar in react. On making the screen size smaller I can see the hamburger icon but its not showing any options when I click it. I have faced similar issues before and the issue was not using popperjs. I have imported popperjs this time, unable to figure out what I am missing.

import React from "react";


function Header() {
    return (
        <React.Fragment>
            <nav className="navbar navbar-expand-lg navbar-light bg-light m-4 rounded shadow">
                <div className="container-fluid">
                    <a className="navbar-brand" href="/">Navbar</a>
                    <button className="navbar-toggler" type="button"
                        data-bs-toggle="collapse" data-bs-target="#navbarNav"
                        aria-controls="navbarNav" aria-expanded="false"
                        aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="collapse navbar-collapse" id="navbarNav">
                        <ul className="navbar-nav ms-auto">
                            <li className="nav-item">
                                <a className="nav-link active" aria-current="page" href="/">Home</a>
                            </li>
                            <li className="nav-item">
                                <a className="nav-link" href="/">Posts</a>
                            </li>
                            <li className="nav-item">
                                <a className="nav-link" href="/">Profile</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </React.Fragment>
    );
}

export default Header;

App.js :

import './App.css';
import 'bootstrap/dist/css/bootstrap.css';
import Header from './components/Header';
import '@popperjs/core';

function App() {
  return (
    <div className="App">
      <Header></Header>
    </div>
  );
}

export default App;

Please help me on where is the mistake.

CodePudding user response：

You need to import bootstrap JS too...

import * from 'bootstrap'

Then the Navbar data-bs- attributes will work as expected...

https://codeply.com/p/Wz416Uc9kC