Developed by Codescandy

Offcanvas

Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.

Offcanvas components

Below is an offcanvas example that is shown by default (via.show on .offcanvas ). Offcanvas includes support for a header with a close button and an optional body class for some initial padding . We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.

Offcanvas

Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
// import node module libraries
import { Offcanvas } from "react-bootstrap";

const Offcanvas = () => {
  return (
    <div
      className="offcanvas border show"
      id="offcanvas"
      aria-labelledby="offcanvasLabel"
      style={{
        height: "200px",
        display: "block",
        position: "static",
      }}
    >
      <Offcanvas.Header closeButton>
        <Offcanvas.Title as="h2" id="offcanvasLabel">
          Offcanvas
        </Offcanvas.Title>
      </Offcanvas.Header>
      <Offcanvas.Body>
        Content for the offcanvas goes here. You can place just about any
        Bootstrap component or custom elements here.
      </Offcanvas.Body>
    </div>
  );
};

Live demo

Use the buttons below to show and hide an offcanvas element via JavaScript that toggles the .show class on an element with the .offcanvas class.

Link with href 
import { Offcanvas, Button } from "react-bootstrap";

const Offcanvas = () => {
  return (
    <Fragment>
      <Button
        href=""
        variant="primary"
        onClick={(e) => {
          e.preventDefault();
          setIsOpen(true);
        }}
      >
        Link with href
      </Button>{" "}
      <Button
        variant="primary"
        onClick={() => {
          setIsOpen(true);
        }}
      >
        Button with data-bs-target
      </Button>
      <Offcanvas
        placement="start"
        id="offcanvasExample"
        show={isOpen}
        onHide={() => setIsOpen(false)}
      >
        <Offcanvas.Header closeButton>
          <Offcanvas.Title id="offcanvasExampleLabel">
            Offcanvas
          </Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
          <div>
            Some text as placeholder. In real life you can have the elements you
            have chosen. Like, text, images, lists, etc.
          </div>

          <Dropdown className="mt-3">
            <Dropdown.Toggle variant="secondary">
              Dropdown button
            </Dropdown.Toggle>
            <Dropdown.Menu as="ul">
              <Dropdown.Item as="li">Action</Dropdown.Item>
              <Dropdown.Item as="li">Another action</Dropdown.Item>
              <Dropdown.Item as="li">Something else here</Dropdown.Item>
            </Dropdown.Menu>
          </Dropdown>
        </Offcanvas.Body>
      </Offcanvas>
    </Fragment>
  );
};

Placement

There’s no default placement for offcanvas components, so you must add one of the modifier classes below;

  • .offcanvas-start places offcanvas on the left of the viewport (shown above)
  • .offcanvas-end places offcanvas on the right of the viewport
  • .offcanvas-top places offcanvas on the top of the viewport
  • .offcanvas-bottom places offcanvas on the bottom of the viewport

Try the top, right, and bottom examples out below.

// import node module libraries
import { Offcanvas } from "react-bootstrap";

const Offcanvas = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Fragment>
      <Button variant="primary" onClick={() => setIsOpen(true)}>
        Toggle top offcanvas
      </Button>
      <Offcanvas
        show={isOpen}
        onHide={() => setIsOpen(false)}
        placement="top"
        id="offcanvasTop"
      >
        <Offcanvas.Header closeButton>
          <h5 id="offcanvasTopLabel">Offcanvas top</h5>
        </Offcanvas.Header>
        <Offcanvas.Body>...</Offcanvas.Body>
      </Offcanvas>
    </Fragment>
  );
};
// import node module libraries
import { Offcanvas } from "react-bootstrap";

const Offcanvas = () => {
  const [isOpen2, setIsOpen2] = useState(false);

  return (
    <Fragment>
      <Button variant="primary" onClick={() => setIsOpen2(true)}>
        Toggle right offcanvas
      </Button>

      <Offcanvas
        placement="end"
        show={isOpen2}
        onHide={() => setIsOpen2(false)}
        id="offcanvasRight"
      >
        <Offcanvas.Header closeButton>
          <h5 id="offcanvasRightLabel">Offcanvas right</h5>
        </Offcanvas.Header>
        <Offcanvas.Body>...</Offcanvas.Body>
      </Offcanvas>
    </Fragment>
  );
};
// import node module libraries
import { Offcanvas } from "react-bootstrap";

const Offcanvas = () => {
  const [isOpen3, setIsOpen3] = useState(false);

  return (
    <Fragment>
      <Button variant="primary" onClick={() => setIsOpen3(true)}>
        Toggle bottom offcanvas
      </Button>

      <Offcanvas
        show={isOpen3}
        onHide={() => setIsOpen3(false)}
        placement="bottom"
        id="offcanvasBottom"
      >
        <Offcanvas.Header closeButton>
          <Offcanvas.Title>Offcanvas bottom</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body className="small">...</Offcanvas.Body>
      </Offcanvas>
    </Fragment>
  );
};

Backdrop

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

// import node module libraries
import { useState } from "react";
import { Offcanvas } from "react-bootstrap";

const Offcanvas = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [isOpen2, setIsOpen2] = useState(false);
  const [isOpen3, setIsOpen3] = useState(false);
  return (
    <Fragment>
      <Button
        variant="primary"
        className="mb-1 me-1"
        onClick={() => setIsOpen(true)}
      >
        Enable body scrolling
      </Button>
      <Button
        variant="primary"
        onClick={() => setIsOpen2(true)}
        className="mb-1 me-1"
      >
        Enable backdrop (default)
      </Button>
      <Button
        variant="primary"
        onClick={() => setIsOpen3(true)}
        className="mb-1"
      >
        Enable both scrolling & backdrop
      </Button>

      {/* Enable Body Scrolling */}
      <Offcanvas
        show={isOpen}
        onHide={() => setIsOpen(false)}
        backdrop={false}
        scroll
        placement="start"
        id="offcanvasScrolling"
      >
        <Offcanvas.Header closeButton>
          <Offcanvas.Title id="offcanvasScrollingLabel">
            Colored with scrolling
          </Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
          <p>
            Try scrolling the rest of the page to see this option in action.
          </p>
        </Offcanvas.Body>
      </Offcanvas>
      {/* Enable Backdrop */}
      <Offcanvas
        show={isOpen2}
        onHide={() => setIsOpen2(false)}
        backdrop
        placement="start"
        id="offcanvasScrolling"
      >
        <Offcanvas.Header closeButton>
          <Offcanvas.Title id="offcanvasWithBothOptionsLabel">
            Backdroped with scrolling
          </Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>...</Offcanvas.Body>
      </Offcanvas>
      {/* Offcanvas with backdrop */}
      <Offcanvas
        show={isOpen3}
        onHide={() => setIsOpen3(false)}
        backdrop
        scroll
        placement="start"
        id="offcanvasScrolling"
      >
        <Offcanvas.Header closeButton>
          <Offcanvas.Title id="offcanvasWithBackdropLabel">
            Offcanvas with backdrop
          </Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
          <p>
            Try scrolling the rest of the page to see this option in action.
          </p>
        </Offcanvas.Body>
      </Offcanvas>
    </Fragment>
  );
};
Contents