I am having an issue where the Dropdown menu is not opening up when clicked. I am currently using bootstrap 5 on nextjs 12.
I attempted to add the CDN links, but unfortunately, it was not successful.
Any assistance or advice would be greatly appreciated.
In my app.js file, I imported bootstrap.css:
_app.js
import "../styles/globals.css";
import "bootstrap/dist/css/bootstrap.css";
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;
In the Index.js file, I included the CDN link:
index.js
import Head from "next/head";
import Footer from "../components/Footer";
import Header from "../components/Header";
import Script from "next/script";
export default function Home() {
return (
<main className="d-flex flex-column min-vh-100">
<Header />
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"></link>
</Head>
<Script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" />
<div className="px-4 py-5 my-5 text-center flex-grow-1">
<h1 className="display-5 fw-bold">Next.js + Bootstrap ❤️</h1>
</div>
<Footer />
</main>
);
}
Header.js
const Header = () => {
return (
<header className="p-3 bg-dark text-white">
<div className="container">
<div className="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start ">
<ul className="nav col-12 col-lg-auto ms-lg-auto mb-2 justify-content-center mb-md-0 ">
<li className="nav-item dropdown">
<a href="#" className="nav-link px-2 text-white dropdown-toggle">
Services
</a>
<div className="dropdown-menu">
<a href="#" className="dropdown-item">
React
</a>
<a href="#" className="dropdown-item">Test</a>
</div>
</li>
</ul>
</div>
</div>
</header>
);
};
export default Header;