How can I make a navbar toggler collapse when an option is selected?

Question

I have a bootstrap navbar with 5 NavLinks and a <select> with 2 options for language selection. The NavLinks and <select> collapse into a toggler on smaller screens. When a NavLink is clicked, the toggler collapses again; however, when an <option> is selected, the toggler does not collapse. How can I make the toggler collapse when an <option> is selected?

<Navbar
        bg="dark"
        variant="dark"
        className="fixed-top"
        expand="lg"
        collapseOnSelect
      >
        <Container>
          <Navbar.Brand href="#" className="navbar-left">
            Page Title
          </Navbar.Brand>
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav" className="nav-collapse">
            <Nav className="mx-auto Nav">
              <Nav.Link href="#">Link One</Nav.Link>
              <Nav.Link href="#">Link Two</Nav.Link>
              <Nav.Link href="#">Link Three</Nav.Link>
            </Nav>

            <Nav>
              <Nav.Link
                href="https://github.com/">
             
              </Nav.Link>
              <Nav.Link
                href="https://www.linkedin.com">
              </Nav.Link>
            </Nav>
            <div className="language-select">
              <select
                className="custom-select"
                value={props.language}
                onChange={(e) => props.handleSetLanguage(e.target.value)}
              >
                <option value="English">English</option>
                <option value="Español">Español</option>
              </select>
            </div>
          </Navbar.Collapse>
        </Container>
      </Navbar>

score 0 · Accepted Answer · answered Apr 13 '23 at 12:18

You can create a useState hook and add expanded={expanded} into your <Navbar> properties to collapse it manually. Don't forget to call setExpanded(false) every time you want it to collapse.

function App(props) {
  const [expanded, setExpanded] = useState(false);

  return (
    <Navbar
      bg="dark"
      variant="dark"
      className="fixed-top"
      expanded={expanded}
      expand="lg"
      collapseOnSelect
    >
      <Container>
        <Navbar.Brand href="#" className="navbar-left">
          Page Title
        </Navbar.Brand>
        <Navbar.Toggle
          aria-controls="responsive-navbar-nav"
          onClick={() => setExpanded(!expanded)}
        />
        <Navbar.Collapse id="responsive-navbar-nav" className="nav-collapse">
          <Nav className="mx-auto Nav">
            <Nav.Link onClick={() => setExpanded(false)} href="#">
              Link One
            </Nav.Link>
            <Nav.Link onClick={() => setExpanded(false)} href="#">
              Link Two
            </Nav.Link>
            <Nav.Link onClick={() => setExpanded(false)} href="#">
              Link Three
            </Nav.Link>
          </Nav>

          <Nav>
            <Nav.Link href="https://github.com/"></Nav.Link>
            <Nav.Link href="https://www.linkedin.com"></Nav.Link>
          </Nav>
          <div className="language-select">
            <select
              className="custom-select"
              value={props.language}
              onChange={(e) => {
                props.handleSetLanguage(e.target.value);
                setExpanded(false);
              }}
            >
              <option value="English">English</option>
              <option value="Español">Español</option>
            </select>
          </div>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

How can I make a navbar toggler collapse when an option is selected?

1 Answers1