Offcanvas

Build hidden sidebars into your project for navigation, shopping carts, and more.

Basic

Offcanvas includes support for a header with a close button and an optional body class for some initial padding.

const BSOffCanvas = () => {
    const [show, setShow] = useState(false);
  
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);
  
    return (
        <Fragment>
            <Button variant="primary" onClick={handleShow}>Launch</Button>  
            <Offcanvas show={show} onHide={handleClose}>
                <Offcanvas.Header closeButton>
                    <Offcanvas.Title>Offcanvas</Offcanvas.Title>
                </Offcanvas.Header>
                <Offcanvas.Body>
                    Some text as placeholder. In real life you can have the elements you
                    have chosen. Like, text, images, lists, etc.
                </Offcanvas.Body>
            </Offcanvas>
      </Fragment>
    );
}
export default BSOffCanvas;

Responsive

Responsive offcanvas classes hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual.

Design

Code

Resize your browser to show the responsive offcanvas toggle.

This is content within an .offcanvas-lg.


import { useState } from 'react';
import {
	Button,
	Offcanvas,
	Alert
} from 'react-bootstrap';

function OffCanvasResponsive() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" className="d-lg-none" onClick={handleShow}>
        Launch
      </Button>

      <Alert variant="info" className="d-none d-lg-block">
        Resize your browser to show the responsive offcanvas toggle.
      </Alert>

      <Offcanvas show={show} onHide={handleClose} responsive="lg">
        <Offcanvas.Header closeButton>
          <Offcanvas.Title>Responsive offcanvas</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
          <p className="mb-0">
            This is content within an <code>.offcanvas-lg</code>.
          </p>
        </Offcanvas.Body>
      </Offcanvas>
    </>
  );
}

export default OffCanvasResponsive;

Placement

Offcanvas supports a few different placements:

start places offcanvas on the left of the viewport
end places offcanvas on the right of the viewport
top places offcanvas on the top of the viewport
bottom places offcanvas on the bottom of the viewport

Design

Code

const BSOffCanvas = () => {
     
    function OffCanvasPlacement({ name, ...props }) {
        const [show, setShow] = useState(false);
    
        const handleClose = () => setShow(false);
        const handleShow = () => setShow(true);
    
        return (
          <>
            <Button variant="primary" onClick={handleShow} className="me-2 mb-2 mb-lg-0">
              {name}
            </Button>
            <Offcanvas show={show} onHide={handleClose} {...props}>
              <Offcanvas.Header closeButton>
                <Offcanvas.Title>Offcanvas</Offcanvas.Title>
              </Offcanvas.Header>
              <Offcanvas.Body>
                Some text as placeholder. In real life you can have the elements you
                have chosen. Like, text, images, lists, etc.
              </Offcanvas.Body>
            </Offcanvas>
          </>
        );
    }

    return (
        <Fragment>
            {['start', 'end', 'top', 'bottom'].map((placement, idx) => (
                <OffCanvasPlacement key={idx} placement={placement} name={placement} />
            ))}
        </Fragment>
    );
}
export default BSOffCanvas;

Backdrop

Scrolling the <body> element is disabled when an offcanvas and its backdrop are visible. Use the scroll prop to toggle <body> scrolling and the backdrop prop to toggle the backdrop.

Design

Code

const BSOffCanvas = () => {
            
    const options = [
        {
          name: 'Enable backdrop (default)',
          scroll: false,
          backdrop: true,
        },
        {
          name: 'Disable backdrop',
          scroll: false,
          backdrop: false,
        },
        {
          name: 'Enable body scrolling',
          scroll: true,
          backdrop: false,
        },
        {
          name: 'Enable both scrolling & backdrop',
          scroll: true,
          backdrop: true,
        },
    ];
    
    function OffCanvasBackdrop({ name, ...props }) {
        const [show, setShow] = useState(false);
    
        const handleClose = () => setShow(false);
        const toggleShow = () => setShow((s) => !s);
    
        return (
          <>
            <Button variant="primary" onClick={toggleShow} className="me-2 mb-2 mb-lg-0">
              {name}
            </Button>
            <Offcanvas show={show} onHide={handleClose} {...props}>
              <Offcanvas.Header closeButton>
                <Offcanvas.Title>Offcanvas</Offcanvas.Title>
              </Offcanvas.Header>
              <Offcanvas.Body>
                Some text as placeholder. In real life you can have the elements you
                have chosen. Like, text, images, lists, etc.
              </Offcanvas.Body>
            </Offcanvas>
          </>
        );
    }

    return (
        <Fragment>
            {options.map((props, idx) => (
                <OffCanvasBackdrop key={idx} {...props} />
            ))}
        </Fragment>
    );
}
export default BSOffCanvas;

Static backdrop

When backdrop is set to static, the offcanvas will not close when clicking outside of it.

Design

Code


import { useState } from 'react';
import {Button, Offcanvas} from 'react-bootstrap';

function OffCanvasStaticBackdrop() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Toggle static offcanvas
      </Button>

      <Offcanvas show={show} onHide={handleClose} backdrop="static">
        <Offcanvas.Header closeButton>
          <Offcanvas.Title>Offcanvas</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
          I will not close if you click outside of me.
        </Offcanvas.Body>
      </Offcanvas>
    </>
  );
}

export default OffCanvasStaticBackdrop;