Explore Our Templates 🚀
Offcanvas
Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.
Demo
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.
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Button with data-bs-target
</button>
<!--Offcanvas Wrapper-->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
<!--/ Offcanvas Wrapper-->import React from 'react';
import { Button, Dropdown, Offcanvas } from 'react-bootstrap';
const BasicExample = () => {
const [show, setShow] = useState(false);
return (
<>
<Button variant="primary" onClick={() => setShow(!show)}>
Launch
</Button>
<Offcanvas show={show} onHide={() => setShow(!show)}>
<Offcanvas.Header closeButton>
<Offcanvas.Title>Offcanvas</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<div className="mb-3">
Some text as placeholder. In real life you can have the elements you
have chosen. Like, text, images, lists, etc.
</div>
<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>
</>
);
}
export default BasicExample;import React from 'react';
import { Button, Dropdown, Offcanvas } from 'react-bootstrap';
const BasicExample = () => {
const [show, setShow] = useState(false);
return (
<>
<Button variant="primary" onClick={() => setShow(!show)}>
Launch
</Button>
<Offcanvas show={show} onHide={() => setShow(!show)}>
<Offcanvas.Header closeButton>
<Offcanvas.Title>Offcanvas</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<div className="mb-3">
Some text as placeholder. In real life you can have the elements you
have chosen. Like, text, images, lists, etc.
</div>
<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>
</>
);
}
export default BasicExample;<template>
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Button with data-bs-target
</button>
<!--Offcanvas Wrapper-->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
<!--/ Offcanvas Wrapper-->
</template><a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Button with data-bs-target
</button>
<!--Offcanvas Wrapper-->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
<!--/ Offcanvas Wrapper--><a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Button with data-bs-target
</button>
<!--Offcanvas Wrapper-->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
<!--/ Offcanvas Wrapper-->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
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasExample">
Toggle top offcanvas
</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasExample">
Toggle right offcanvas
</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasExample">
Toggle bottom offcanvas
</button>
<!--Offcanvas Wrapper-->
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasTopLabel">Offcanvas top</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
<!--/ Offcanvas Wrapper-->
<!--Offcanvas Wrapper-->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">Offcanvas right</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
<!--/ Offcanvas Wrapper-->
<!--Offcanvas Wrapper-->
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasBottomLabel">Offcanvas bottom</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
<!--/ Offcanvas Wrapper-->import React from 'react';
import { Button, Dropdown, Offcanvas } from 'react-bootstrap';
const OffcanvasPlacements = () => {
const [showStart, setShowStart] = useState(false);
const [showEnd, setShowEnd] = useState(false);
const [showTop, setShowTop] = useState(false);
const [showBottom, setShowBottom] = useState(false);
return (
<>
<Button variant="primary" onClick={() => setShowStart(!showStart)} className="me-2">
Start
</Button>
<Button variant="primary" onClick={() => setShowEnd(!showEnd)} className="me-2">
End
</Button>
<Button variant="primary" onClick={() => setShowTop(!showTop)} className="me-2">
Top
</Button>
<Button variant="primary" onClick={() => setShowBottom(!showBottom)} className="me-2">
Bottom
</Button>
// Offcanvas Start
<Offcanvas placement="start" show={showStart} onHide={() => setShowStart(!showStart)}>
<Offcanvas.Header closeButton>
<Offcanvas.Title>Offcanvas Start</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
...
</Offcanvas.Body>
</Offcanvas>
// Offcanvas End
<Offcanvas placement="end" show={showEnd} onHide={() => setShowEnd(!showEnd)}>
<Offcanvas.Header closeButton>
<Offcanvas.Title>Offcanvas End</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
...
</Offcanvas.Body>
</Offcanvas>
// Offcanvas Top
<Offcanvas placement="top" show={showTop} onHide={() => setShowTop(!showTop)}>
<Offcanvas.Header closeButton>
<Offcanvas.Title>Offcanvas Top</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
...
</Offcanvas.Body>
</Offcanvas>
// / Offcanvas Bottom
<Offcanvas placement="bottom" show={showBottom} onHide={() => setShowBottom(!showBottom)}>
<Offcanvas.Header closeButton>
<Offcanvas.Title>Offcanvas Bottom</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
...
</Offcanvas.Body>
</Offcanvas>
</>
);
}
export default OffcanvasPlacements;import React from 'react';
import { Button, Dropdown, Offcanvas } from 'react-bootstrap';
const OffcanvasPlacements = () => {
const [showStart, setShowStart] = useState(false);
const [showEnd, setShowEnd] = useState(false);
const [showTop, setShowTop] = useState(false);
const [showBottom, setShowBottom] = useState(false);
return (
<>
<Button variant="primary" onClick={() => setShowStart(!showStart)} className="me-2">
Start
</Button>
<Button variant="primary" onClick={() => setShowEnd(!showEnd)} className="me-2">
End
</Button>
<Button variant="primary" onClick={() => setShowTop(!showTop)} className="me-2">
Top
</Button>
<Button variant="primary" onClick={() => setShowBottom(!showBottom)} className="me-2">
Bottom
</Button>
// Offcanvas Start
<Offcanvas placement="start" show={showStart} onHide={() => setShowStart(!showStart)}>
<Offcanvas.Header closeButton>
<Offcanvas.Title>Offcanvas Start</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
...
</Offcanvas.Body>
</Offcanvas>
// Offcanvas End
<Offcanvas placement="end" show={showEnd} onHide={() => setShowEnd(!showEnd)}>
<Offcanvas.Header closeButton>
<Offcanvas.Title>Offcanvas End</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
...
</Offcanvas.Body>
</Offcanvas>
// Offcanvas Top
<Offcanvas placement="top" show={showTop} onHide={() => setShowTop(!showTop)}>
<Offcanvas.Header closeButton>
<Offcanvas.Title>Offcanvas Top</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
...
</Offcanvas.Body>
</Offcanvas>
// / Offcanvas Bottom
<Offcanvas placement="bottom" show={showBottom} onHide={() => setShowBottom(!showBottom)}>
<Offcanvas.Header closeButton>
<Offcanvas.Title>Offcanvas Bottom</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
...
</Offcanvas.Body>
</Offcanvas>
</>
);
}
export default OffcanvasPlacements;<template>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop"
aria-controls="offcanvasExample">
Toggle top offcanvas
</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas"
data-bs-target="#offcanvasRight" aria-controls="offcanvasExample">
Toggle right offcanvas
</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas"
data-bs-target="#offcanvasLeft" aria-controls="offcanvasExample">
Toggle left offcanvas
</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas"
data-bs-target="#offcanvasBottom" aria-controls="offcanvasExample">
Toggle bottom offcanvas
</button>
<!--Offcanvas top-->
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop"
aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasTopLabel">Offcanvas top</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
<!--/ Offcanvas top-->
<!--Offcanvas right-->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight"
aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">Offcanvas right</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
<!--/ Offcanvas right-->
<!--Offcanvas left-->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasLeft"
aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">Offcanvas right</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
<!--/ Offcanvas left-->
<!--Offcanvas bottom-->
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom"
aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasBottomLabel">Offcanvas bottom</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
<!--/ Offcanvas bottom-->
</template><template>
<div>
<BButton @click="openOffcanvas('start')" class="m-2">Show start</BButton>
<BButton @click="openOffcanvas('end')" class="m-2">Show end</BButton>
<BButton @click="openOffcanvas('bottom')" class="m-2">Show bottom</BButton>
<BButton @click="openOffcanvas('top')" class="m-2">Show top</BButton>
<!-- offcanvas -->
<BOffcanvas
v-model="show"
:placement="placement"
:title="'Offcanvas ' + placement"
>
<template>
<div>...</div>
</template>
</BOffcanvas>
</div>
</template>
<script setup>
const show = ref(false)
const placement = ref('start')
const openOffcanvas = (place = 'start') => {
placement.value = place
show.value = !show.value
}
</script><button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasExample">
Toggle top offcanvas
</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasExample">
Toggle right offcanvas
</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasExample">
Toggle bottom offcanvas
</button>
<!--Offcanvas Wrapper-->
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasTopLabel">Offcanvas top</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
<!--/ Offcanvas Wrapper-->
<!--Offcanvas Wrapper-->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">Offcanvas right</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
<!--/ Offcanvas Wrapper-->
<!--Offcanvas Wrapper-->
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasBottomLabel">Offcanvas bottom</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
<!--/ Offcanvas Wrapper-->