Offcanvas

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

Examples

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.

Basic Example

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

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

  return (
    <>
      <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>
    </>
  );
}

render(<Example />);

function Example() {
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  return (
    <>
      <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>
    </>
  );
}
render(<Example />);

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
bottom places offcanvas on the bottom of the viewport

function OffCanvasExample({ name, ...props }) {
  const [show, setShow] = useState(false);

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

  return (
    <>
      <Button variant="primary" onClick={handleShow} className="me-2">
        {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>
    </>
  );
}

function Example() {
  return (
    <>
      {['start', 'end', 'bottom'].map((placement, idx) => (
        <OffCanvasExample key={idx} placement={placement} name={placement} />
      ))}
    </>
  );
}

render(<Example />);

function OffCanvasExample({ name, ...props }) {
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  return (
    <>
      <Button variant="primary" onClick={handleShow} className="me-2">
        {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>
    </>
  );
}
function Example() {
  return (
    <>
      {['start', 'end', 'bottom'].map((placement, idx) => (
        <OffCanvasExample key={idx} placement={placement} name={placement} />
      ))}
    </>
  );
}
render(<Example />);

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.

const options = [
  {
    name: 'Enable body scrolling',
    scroll: true,
    backdrop: false,
  },
  {
    name: 'Enable backdrop (default)',
    scroll: false,
    backdrop: true,
  },
  {
    name: 'Enable both scrolling & backdrop',
    scroll: true,
    backdrop: true,
  },
];

function OffCanvasExample({ name, ...props }) {
  const [show, setShow] = useState(false);

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

  return (
    <>
      <Button variant="primary" onClick={handleShow} className="me-2">
        {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>
    </>
  );
}

function Example() {
  return (
    <>
      {options.map((props, idx) => (
        <OffCanvasExample key={idx} {...props} />
      ))}
    </>
  );
}

render(<Example />);

const options = [
  {
    name: 'Enable body scrolling',
    scroll: true,
    backdrop: false,
  },
  {
    name: 'Enable backdrop (default)',
    scroll: false,
    backdrop: true,
  },
  {
    name: 'Enable both scrolling & backdrop',
    scroll: true,
    backdrop: true,
  },
];
function OffCanvasExample({ name, ...props }) {
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  return (
    <>
      <Button variant="primary" onClick={handleShow} className="me-2">
        {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>
    </>
  );
}
function Example() {
  return (
    <>
      {options.map((props, idx) => (
        <OffCanvasExample key={idx} {...props} />
      ))}
    </>
  );
}
render(<Example />);

API

Offcanvasview source file

import Offcanvas from 'react-bootstrap/Offcanvas'

Name	Type	Default	Description
aria-labelledby	string
autoFocus	boolean	`true`	When `true` The offcanvas will automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. Generally this should never be set to false as it makes the offcanvas less accessible to assistive technologies, like screen-readers.
backdrop	boolean	`true`	Include a backdrop component.
backdropClassName	string		Add an optional extra class name to .modal-backdrop.
container	any
enforceFocus	boolean	`true`	When `true` The offcanvas will prevent focus from leaving the offcanvas while open. Consider leaving the default value here, as it is necessary to make the offcanvas work well with assistive technologies, such as screen readers.
keyboard	boolean	`true`	Closes the offcanvas when escape key is pressed.
onEnter	function		Callback fired before the offcanvas transitions in
onEntered	function		Callback fired after the offcanvas finishes transitioning in
onEntering	function		Callback fired as the offcanvas begins to transition in
onEscapeKeyDown	function		A callback fired when the escape key, if specified in `keyboard`, is pressed.
onExit	function		Callback fired right before the offcanvas transitions out
onExited	function		Callback fired after the offcanvas finishes transitioning out
onExiting	function		Callback fired as the offcanvas begins to transition out
onHide	function		A callback fired when the header closeButton or backdrop is clicked. Required if either are specified.
onShow	function		A callback fired when the offcanvas is opening.
placement	`'start'` \| `'end'` \| `'bottom'`	`'start'`	Which side of the viewport the offcanvas will appear from.
restoreFocus	boolean	`true`	When `true` The offcanvas will restore focus to previously focused element once offcanvas is hidden
restoreFocusOptions	shape		Options passed to focus function when `restoreFocus` is set to `true`
scroll	boolean	`false`	Allow body scrolling while offcanvas is open.
show	boolean	`false`	When `true` The offcanvas will show itself.
bsPrefix	string	`'offcanvas'`	Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

import OffcanvasHeader from 'react-bootstrap/OffcanvasHeader'

Name	Type	Default	Description
closeButton	boolean	`false`	Specify whether the Component should contain a close button
closeLabel	string	`'Close'`	Provides an accessible label for the close button. It is used for Assistive Technology when the label text is not readable.
closeVariant	`'white'`		Sets the variant for close button.
onHide	function		A Callback fired when the close button is clicked. If used directly inside a Offcanvas component, the onHide will automatically be propagated up to the parent Offcanvas `onHide`.
bsPrefix	string	`'offcanvas-header'`	Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

OffcanvasTitleview source file

import OffcanvasTitle from 'react-bootstrap/OffcanvasTitle'

Name	Type	Default	Description
as	elementType	`<DivStyledAsH5>`	You can use a custom element type for this component.
bsPrefix required	string	`'offcanvas-title'`	Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

OffcanvasBodyview source file

import OffcanvasBody from 'react-bootstrap/OffcanvasBody'

Name	Type	Default	Description
as	elementType	`<div>`	You can use a custom element type for this component.
bsPrefix required	string	`'offcanvas-body'`	Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

;

Offcanvas

Examples#

Basic Example#

Placement#

Backdrop#

API#

Offcanvas#view source file

OffcanvasHeader#view source file

OffcanvasTitle#view source file

OffcanvasBody#view source file