How can I use Navbar.Collapse and Navbar.Offcanvas together?

Viewed 219

My goal is to have a standard topnav on large and greater breakpoints, then on smaller/mobile screens, to use an offcanvas instead while hiding the normal topnav links. However, when I use the two together, the hamburger button triggers both the collapse and the offcanvas, even though the aria-label is set to the offcanvas id (I understand this is just an accessibility label)

How can I tell it to only trigger the offcanvas and just ignore the collapse?

Alternatively, I want the collapse to come in from the side, like the offcanvas does, rather than the top.

Here's my code, as basic as it is:

import React from 'react'
import { Container, Nav, Navbar, NavDropdown, Offcanvas } from 'react-bootstrap';

const NavLinks = () => (
  <Nav className="justify-content-end flex-grow-1 pe-3">
    <Nav.Link href="#action1">Home</Nav.Link>
    <Nav.Link href="#action2">Link</Nav.Link>
    <NavDropdown title="Dropdown" id="offcanvasNavbarDropdown">
      <NavDropdown.Item href="#action3">Action</NavDropdown.Item>
      <NavDropdown.Item href="#action4">Another action</NavDropdown.Item>
      <NavDropdown.Divider />
      <NavDropdown.Item href="#action5">Something else here</NavDropdown.Item>
    </NavDropdown>
  </Nav>
);

const Header = () => {
  return (
    <Navbar bg="light" expand="lg">
      <Container fluid>
        <Navbar.Brand href="#">Navbar Offcanvas</Navbar.Brand>
        <Navbar.Collapse>
          <NavLinks />
        </Navbar.Collapse>
        <Navbar.Toggle aria-controls="offcanvasNavbar" />
        <Navbar.Offcanvas
          id="offcanvasNavbar"
          aria-labelledby="offcanvasNavbarLabel"
          placement="end">
          <Offcanvas.Header closeButton>
            <Offcanvas.Title id="offcanvasNavbarLabel">
              Offcanvas
            </Offcanvas.Title>
          </Offcanvas.Header>
          <Offcanvas.Body>
            <NavLinks />
          </Offcanvas.Body>
        </Navbar.Offcanvas>
      </Container>
    </Navbar>
  );
}

export default Header
0 Answers
Related