CODEWITHSUNDEEP
reactjstwitter-bootstrapnext.jsreact-bootstrap
Benjamin
Benjamin

Reputation: 571

React Bootstrap navbar doesn't collapse (Next.js)

I am creating a Next.js app and I'm trying to integrate react-bootstrap.

I've managed to add the dependencies, but now when I try to collapse the navbar on mobile with the hamburger menu nothing happens.

This is what my files look like :

Navbar.js

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

const BaseNavbar = () => (
    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="mr-auto">
                <Nav.Link href="#features">Features</Nav.Link>
                <Nav.Link href="#pricing">Pricing</Nav.Link>
                <NavDropdown title="Dropdown" id="collasible-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>
            <Nav>
                <Nav.Link href="#deets">More deets</Nav.Link>
                <Nav.Link eventKey={2} href="#memes">
                    Dank memes
                </Nav.Link>
            </Nav>
        </Navbar.Collapse>
    </Navbar>
)

export default BaseNavbar;

_app.js

import 'bootstrap/dist/css/bootstrap.min.css'
import React from 'react';

export default function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
}

dependencies in my package.json

 "dependencies": {
    "bootstrap": "^4.5.0",
    "next": "9.4.4",
    "react": "16.13.1",
    "react-bootstrap": "^1.0.1",
    "react-dom": "16.13.1"
  }

How can I fix this issue ? I'm not sure what I'm missing!

Upvotes: 1

Views: 5393

Answers (3)

Raspijabi
Raspijabi

Reputation: 1

Try adding the import of the js scripts of bootstrap like

import 'bootstrap/dist/js/bootstrap.bundle';

Upvotes: 0

fruitloaf
fruitloaf

Reputation: 2892

I solved my issue by putting:

  <Head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"></link>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
  </Head>

So you need to put ALL Bootsrap code into: _app.js tags, not just the LINK part, but also the SCRIPT part

Upvotes: 1

Benjamin
Benjamin

Reputation: 571

The issue was that I put my Navbar component inside my _document.js file, like this:

import Document, { Html, Head, Main, NextScript } from 'next/document'
import BaseNavbar from '../components/navbar';
import Footer from '../components/footer';

class MyDocument extends Document {
    static async getInitialProps(ctx) {
        const initialProps = await Document.getInitialProps(ctx)
        return { ...initialProps }
    }

    render() {
        return (
            <Html>
                <Head />
                <body>
                    <Navbar />
                    <Main />
                    <Footer />
                    <NextScript />
                </body>
            </Html>
        )
    }
}

export default MyDocument

But it doesn't work like this, so now I've removed the Navbar from the _document.js file. I also created a Layout.js component :

import BaseNavbar from './Navbar';
import Footer from './Footer';
import React from 'react';
import Head from 'next/head';

const Layout = props => (
      <div className="Layout">
        <BaseNavbar />
         <div className="Content">
          {props.children}
         </div>
         <Footer />
      </div>
)

export default Layout;

And for every page of my application, I call this component and it will render my navbar, for example here is my about.js :

import Banner from '../components/Banner';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import React from 'react';
import Layout from '../components/Layout';

const About = () => (
    <Layout>
        <Banner name="Mon cursus" />
        <main className="mt-5">
            <Container>
                <Row>
                  About
                </Row>
            </Container>
        </main>
    </Layout>
)

export default About;

Upvotes: 4

Related Questions