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 youhave 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 viewportend
places offcanvas on the right of the viewporttop
places offcanvas on the top of the viewportbottom
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 youhave 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 youhave chosen. Like, text, images, lists, etc.</Offcanvas.Body></Offcanvas></>);}return (<Fragment>{options.map((props, idx) => (<OffCanvasBackdrop key={idx} {...props} />))}</Fragment>);}export default BSOffCanvas;