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;

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
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.

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;