Menu
Bootstrap 5 Offcanvas
Offcanvas
Offcanvas is similar to modals (hidden by default and shown when activated), except that is often used as a sidebar navigation menu.
How To Create an Offcanvas Sidebar
The following example shows how to create an offcanvas sidebar:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div id=”demo”>
<div>
<h1>Heading</h1>
<button type=”button” data-bs-dismiss=”offcanvas”></button>
</div>
<div>
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<button type=”button”>A Button</button>
</div>
</div>
<div>
<h3>Offcanvas Sidebar</h3>
<p>Offcanvas is similar to modals, except that it is often used as a sidebar.</p>
<button type=”button” data-bs-toggle=”offcanvas” data-bs-target=”#demo”>
Open Offcanvas Sidebar
</button>
</div>
</body>
</html>
Example Explained
The .offcanvas class creates the offcanvas sidebar.
The .offcanvas-start class positions the offcanvas, and makes it 400px wide. See examples below for more positioning classes.
The .offcanvas-title class ensures proper margins and line-height.
Then, add your content inside the .offcanvas-body class.
To open the offcanvas sidebar, you must use a <button> or an <a> element that points to the id of the .offcanvas container (#demo in our example).
To open the offcanvas sidebar with an <a> element, you can point to #demo with the href attribute, instead of data-bs-target attribute.
Offcanvas Position
Use the .offcanvas-start|end|top|bottom to position the offcanvas to the left, right, top or bottom:
Right Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div id=”demo”>
<div>
<h1>Heading</h1>
<button type=”button” data-bs-dismiss=”offcanvas”></button>
</div>
<div>
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<button type=”button”>A Button</button>
</div>
</div>
<div>
<h3>Right Offcanvas</h3>
<p>The .offcanvas-end class positions the offcanvas to the right of the page.</p>
<button type=”button” data-bs-toggle=”offcanvas” data-bs-target=”#demo”>
Toggle Right Offcanvas
</button>
</div>
</body>
</html>
Top Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div id=”demo”>
<div>
<h1>Heading</h1>
<button type=”button” data-bs-dismiss=”offcanvas”></button>
</div>
<div>
<p>Some text lorem ipsum.</p>
<button type=”button”>A Button</button>
</div>
</div>
<div>
<h3>Top Offcanvas</h3>
<p>The .offcanvas-top class positions the offcanvas at the top of the page.</p>
<button type=”button” data-bs-toggle=”offcanvas” data-bs-target=”#demo”>
Toggle Top Offcanvas
</button>
</div>
</body>
</html>
Bottom Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div id=”demo”>
<div>
<h1>Heading</h1>
<button type=”button” data-bs-dismiss=”offcanvas”></button>
</div>
<div>
<p>Some text lorem ipsum.</p>
<button type=”button”>A Button</button>
</div>
</div>
<div>
<h3>Bottom Offcanvas</h3>
<p>The .offcanvas-bottom class positions the offcanvas at the bottom of the page.</p>
<button type=”button” data-bs-toggle=”offcanvas” data-bs-target=”#demo”>
Toggle Bottom Offcanvas
</button>
</div>
</body>
</html>
Responsive OffCanvas Menu
You can also control when you want to hide or show the offcanvas menu on different screen widths, with the .offcanvas-sm|md|lg|xl|xxl classes:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div id=”demo”>
<div>
<h1>Heading</h1>
<button type=”button” data-bs-dismiss=”offcanvas”></button>
</div>
<div>
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<button type=”button”>A Button</button>
</div>
</div>
<div>
<h3>Responsive Offcanvas Menu</h3>
<p>You can also hide or show the offcanvas menu on different screen widths, with the .offcanvas-sm|md|lg|xl|xxl classes.</p>
<p>In this example, we hide the offcanvas menu on screens larger than 991px wide. Note that we also hide the button that opens the offcanvas (d-lg-none).</p>
<p>Resize the browser window to see the result.</p>
<button type=”button” data-bs-toggle=”offcanvas” data-bs-target=”#demo”>
Open Offcanvas Sidebar
</button>
</div>
</body>
</html>
Dark OffCanvas Menu
Use the .text-bg-dark class to create a dark offcanvas menu.
Tip: We have also added the .btn-close-white class to .btn-close, to create a white close button that looks nice with the dark background:
Example
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css” rel=”stylesheet”>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<body>
<div id=”demo”>
<div>
<h1>Heading</h1>
<button type=”button” data-bs-dismiss=”offcanvas”></button>
</div>
<div>
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<button type=”button”>A Button</button>
</div>
</div>
<div>
<h3>Dark Offcanvas Sidebar</h3>
<p>Use the .text-bg-dark class to create a dark offcanvas menu.</p>
<p><strong>Tip:</strong> We have also added the .btn-close-white class to .btn-close, to create a white close button that looks nice with the dark background:</p>
<button type=”button” data-bs-toggle=”offcanvas” data-bs-target=”#demo”>
Open Offcanvas Sidebar
</button>
</div>
</body>
</html>