Documentation
Offcanvas
Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.
Offcanvas components
Offcanvas includes support for a header with a close button and an optional body class for some initial padding.
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 />);
Live demo
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.
<br/>
<Dropdown>
<Dropdown.Toggle variant="secondary" id="dropdown-basic">
Dropdown Button
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Offcanvas.Body>
</Offcanvas>
</>
);
}
render(<Example />);
Placement
Offcanvas supports a few different placements:
startplaces offcanvas on the left of the viewportendplaces offcanvas on the right of the viewporttopplaces offcanvas on the top of the viewportbottomplaces 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', 'top', '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 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 OffCanvasExample({ 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">
{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 />);