Bootstrap 5 Offcanvas Usage

Last Updated : 09 Jan, 2023

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">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= 
"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">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>