react js react-boostrap toggling menu buttons not working

Question

I am reading the examples on react-bootstrap for Navbar Nav controls on https://react-bootstrap.github.io/components/navbar/. My current menu button are not toggle at all.

I read some of the post here but they are all using the same code example like

<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>

I have the following code that is not toggling buttons

<Navbar>
  <Navbar.Brand /> // tried this but does not fix it
  <Nav>
    {menuButtonList} // this is any array of menu buttons that include 'Home'
  </Nav>
</Navbar>

The current issue, by default Home button is highlighted as active. When I clicked on the other menu buttons, they highlight and toggle. The first button, Home, stays active.

Any help is appreciated.

I think you are missing NavBar.Toggle and NavBar.Collapse — kunquan

buzatto buzatto · Accepted Answer · 2021-01-05T21:22:56

Actually your Home is expected to keep highlighted because it's a Navbar.Brand component not a Nav.Link. A Navbar.Brand is expected to behave like that, it's related to what a Brand is all about. When you display your Brand you expect that it shines to reinforce your Brand.

if you don't want a Brand than it's better to switch to another Nav.Link nested at you Nav component instead.

react js react-boostrap toggling menu buttons not working

2 Answers