Bootstrap 5 Offcanvas Usage
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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" > <!-- Bootstrap JavaScript --> < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" > </ script > </ head > < body class = "text-center m-3" > < h1 class = "text-success" >w3wiki</ 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" > w3wiki</ h1 > < button type = "button" class = "text-reset btn-close" data-bs-dismiss = "offcanvas" > </ button > </ div > < div class = "offcanvas-body" > w3wiki is a Computer Science portal for Beginner. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. </ div > </ div > </ body > </ html > |
Output:
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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" > <!-- Bootstrap JavaScript --> < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" > </ script > </ head > < body class = "text-center m-3" > < h1 class = "text-success" >w3wiki</ 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" >w3wiki</ h1 > < button type = "button" class = "text-reset btn-close" data-bs-dismiss = "offcanvas" > </ button > </ div > < div class = "offcanvas-body" > w3wiki is a Computer Science portal for Beginner. 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 " >w3wiki</ h1 > < button type = "button" class = "text-reset btn-close" data-bs-dismiss = "offcanvas" > </ button > </ div > < div class = "offcanvas-body" > w3wiki is a Computer Science portal for Beginner. It contains well written, well thought and well explained computer science and programming articles, quizzes etc. </ div > </ div > </ body > </ html > |
Output :
Reference: https://getbootstrap.com/docs/5.0/components/offcanvas/#usage
Contact Us