Unlimited Access

Upgrade your plan from a Free trial, to select ‘Business Plan’. Start Now

Upgrade Now

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.

Design
Code
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;

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;