Is there a way to add hamburgers to react bootstrap toggle navbar?

Question

I could not find a quick solution to implement nice hamburgers from https://jonsuh.com/hamburgers/ to react-bootstrap.

It does not work with (because it is button inside the button).

<Navbar.Toggle>
  <Hamburger />
</Navbar.Toggle>

Answer 1

I found another hamburger solution for react-bootstrap.

import { useState } from 'react'
import Container from 'react-bootstrap/Container'
import Nav from 'react-bootstrap/Nav'
import Navbar from 'react-bootstrap/Navbar'
import Hamburger from 'hamburger-react'

function NavigationHead() {
  const [isOpen, setOpen] = useState(false)

  return (
    <Navbar collapseOnSelect expand="md" bg="light">
      <Container>
        <Navbar.Brand href="/">Navbar</Navbar.Brand>
        <Navbar.Toggle>
          <Hamburger toggled={isOpen} toggle={setOpen} />
        </Navbar.Toggle>
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link href="/#/catalog">Catalog</Nav.Link>
            <Nav.Link href="/#/favourites">Favourites</Nav.Link>
          </Nav>
          <Nav>
            <Nav.Link href="/#/tasks">My tasks</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  )
}

export default NavigationHead