Bootstrap 5 Offcanvas is a sidebar component, which allows you to create a side menu that slides in from the edge of the screen when triggered. To create an off-canvas with Bootstrap 5, you can use the .off-canvas class.
Bootstrap 5 Offcanvas Usage:
- via data attributes: Offcanvas can be enabled by passing the data attributes like data-bs-toggle=”offcanvas” and data-bs-target. We must add .offcanvas class to the element.
- via JavaScript : Offcanvas can also be enabled by using JavaScript in the HTML code.
var example = document.getElementById('...')
var ... = new bootstrap.Tooltip(example, value)- Options: Options can be passed through data-attributes or via JavaScript. To pass the options via data attributes we need to append the option name with data-bs- . For example data-bs-backdrop=”true”. We have some option like backdrop, keyboard, scroll.
- Methods: Methods are used to perform some functionalities to our offcanvas element. There are some methods like toggle(), show(), hide(), getInstance(), getOrCreateInstance().
- Events: Offcanvas functionality may be accessed by hooking into a few events exposed by the Bootstrap Offcanvas class.
Syntax:
<tag class="offcanvas" ..>
....
</tag>Example 1: In this example, we will demonstrate how to pass options through data attributes in bootstrap 5 Offcanvas.
HTML
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
<!-- Bootstrap JavaScript -->
<script src=
</script>
</head>
<body class="text-center m-3">
<h1 class="text-success">GeeksforGeeks</h1>
<h3>Bootstrap 5 Offcanvas usage</h3>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasId">
Click here toggle Offcanvas
</button>
<div class="offcanvas offcanvas-top" id="offcanvasId">
<div class="offcanvas-header">
<h1 class="text-success">
GeeksforGeeks</h1>
<button type="button" class="text-reset btn-close" data-bs-dismiss="offcanvas">
</button>
</div>
<div class="offcanvas-body">
GeeksforGeeks is a Computer Science portal for geeks.
It contains well written, well thought and well explained
computer science and programming articles, quizzes etc.
</div>
</div>
</body>
</html>
|
Output:
Bootstrap 5 Offcanvas Usage
Example 2: In this example, we will demonstrate how we can place the position of offcanvas using class.
HTML
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
<!-- Bootstrap JavaScript -->
<script src=
</script>
</head>
<body class="text-center m-3">
<h1 class="text-success">GeeksforGeeks</h1>
<h3>Bootstrap 5 Offcanvas usage</h3>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasId">
Click here toggle Offcanvas at left
</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasId2">
Click here toggle Offcanvas at right
</button>
<div class="offcanvas offcanvas-start" id="offcanvasId">
<div class="offcanvas-header">
<h1 class="text-success">GeeksforGeeks</h1>
<button type="button" class="text-reset btn-close" data-bs-dismiss="offcanvas">
</button>
</div>
<div class="offcanvas-body">
GeeksforGeeks is a Computer Science portal for geeks.
It contains well written, well thought and well explained
computer science and programming articles, quizzes etc.
</div>
</div>
<div class="offcanvas offcanvas-end" id="offcanvasId2">
<div class="offcanvas-header">
<h1 class="text-success ">GeeksforGeeks</h1>
<button type="button"
class="text-reset btn-close" data-bs-dismiss="offcanvas">
</button>
</div>
<div class="offcanvas-body">
GeeksforGeeks is a Computer Science portal for geeks.
It contains well written, well thought and well explained
computer science and programming articles, quizzes etc.
</div>
</div>
</body>
</html>
|
Output :
Bootstrap 5 Offcanvas Usage
Reference: https://getbootstrap.com/docs/5.0/components/offcanvas/#usage