Bootstrap Dropdown in Navbar is not working with NextJs

Question

The Dropdown doesn't open up on click. I'm using bootstrap 5 on nextjs 12.

I tried adding the CDN links, but it doesn't work.

Any help is appreciated.

In the app.js 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 I added the CDN.

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;

The script element in the Home function looks strange to me: I'd change it to have a closing tag: <script ...></script>. — Cristián Ormazábal
– Cristián Ormazábal, Commented May 26, 2022 at 14:29

Mohammad Yaser Ahmadi · Accepted Answer · 2022-07-31 10:22:41Z

Please visit this tutorial, which helps you add navbar with bootstrap to a react or nextjs project

Don't use cdn link of bootstrap for using navbar in React project

You can use React bootstrap framework, to add navbar

npm install react-bootstrap bootstrap

Add the stylesheet to the app.js file

import 'bootstrap/dist/css/bootstrap.min.css';

And create a navbar component like the below code

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';

function BasicExample() {
  return (
    <Navbar bg="light" expand="lg">
      <Container>
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#link">Link</Nav.Link>
            <NavDropdown title="Dropdown" id="basic-nav-dropdown">
              <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.2">
                Another action
              </NavDropdown.Item>
              <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="#action/3.4">
                Separated link
              </NavDropdown.Item>
            </NavDropdown>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

export default BasicExample;

Saurabh Mistry · Accepted Answer · 2023-05-18 06:44:09Z

1

step-1 : import bootstrap css in _app.js

import "bootstrap/dist/css/bootstrap.min.css";

step-2 import bootstrap js in _app.js

import { useEffect } from "react";

useEffect(() => {
    require("bootstrap/dist/js/bootstrap.bundle.min.js");
  }, []);

final code looks like :

import "bootstrap/dist/css/bootstrap.min.css";
import { useEffect } from "react";
import '@/styles/globals.css'

config.autoAddCss = false;

export default function App({ Component, pageProps }) {
  
  useEffect(() => {
    require("bootstrap/dist/js/bootstrap.bundle.min.js");
  }, []);

  return <Component {...pageProps} />
}

answered May 18, 2023 at 6:44

Saurabh Mistry

13.8k5 gold badges60 silver badges78 bronze badges

Comments

Olivier Maignan · Accepted Answer · 2024-05-15 08:05:44Z

0

install bootstrap as explained in the previous comments and put import "bootstrap/dist/css/bootstrap.min.css"; in your root page.

This work for me : put this where you want to use your dropdown:

import { Dropdown } from "bootstrap";

answered May 15, 2024 at 8:05

Olivier Maignan

1

Collectives™ on Stack Overflow

Bootstrap Dropdown in Navbar is not working with NextJs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related