Bootstrap Offcanvas
An offcanvas is a hidden sidebar panel that slides into view when you need it and slides back out when you are done. Bootstrap 5 ships offcanvas as a built-in component, so you can build mobile menus, filter panels, and shopping carts without writing any custom JavaScript.
What is an Offcanvas?
An offcanvas is a panel that lives off the edge of the screen until it is triggered. When a user clicks a button, the panel slides in from the left, right, top, or bottom, and a dark backdrop usually dims the rest of the page. It is perfect for content you want available but not always visible, such as a navigation drawer on small screens.
Every offcanvas is built from three simple pieces: a container with the class .offcanvas, a header (.offcanvas-header) that usually holds a title and a close button, and a body (.offcanvas-body) for your content.
A Basic Offcanvas
To open an offcanvas you need a trigger element and the panel itself. The trigger uses data-bs-toggle="offcanvas" and data-bs-target to point at the panel's id. The panel uses a placement class such as .offcanvas-start to decide which edge it slides from.
Offcanvas triggered by a button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demoPanel">
Open menu
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="demoPanel">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Menu</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Put your links or content here.</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Placement: Where It Slides From
Bootstrap gives you four placement classes so you can slide the panel from any edge of the viewport. Choose the one that fits your layout.
An offcanvas that slides from the right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#cartPanel">
View cart
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="cartPanel">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Your Cart</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>Your cart is empty.</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Handy Options
- data-bs-backdrop="false" removes the dark overlay so the page behind stays fully visible.
- data-bs-scroll="true" lets the body of the page keep scrolling while the panel is open.
- Responsive classes like .offcanvas-lg keep content inline on large screens and only turn it into an offcanvas on smaller ones.
- Always add tabindex="-1" and an aria-label on the close button so keyboard and screen reader users can use the panel.
Exercise: Bootstrap Offcanvas
What determines which side of the screen an offcanvas panel slides in from?
