Bootstrap 5 Offcanvas Usage Methods

Bootstrap 5 Offcanvas methods are used to control the visibility of the offcanvas element, manually. For example, they can be used to show, hide, or toggle the Offcanvas element manually.

Bootstrap 5 Offcanvas Usage Methods:

toggle: It is used to toggle an offcanvas element's visibility.
show: It is used to manually show an offcanvas element.
hide: It is used to manually hide an offcanvas element.
getInstance: It is used to get the instance of an offcanvas element.
getOrCreateInstance: It is used to get the instance of an offcanvas element, if an offcanvas element existed, or create one if it wasn't initialized.

Syntax:

offcanvas.offcanvas_method()

Example 1: In this example, we will use "show" and "hide" offcanvas methods to show and hide the offcanvas element manually, with the click of buttons.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
            crossorigin="anonymous">
    </script>
</head>

<body class="m-2">
    <h1 class="text-success">GeeksforGeeks</h1>
    <strong>Bootstrap 5 Offcanvas Usage Methods</strong>
    <br>
    <button id="show" class="btn btn-success" type="button">
        Show offcanvas
    </button>

    <div class="offcanvas offcanvas-start" 
         tabindex="-1" 
         id="myOffcanvas" 
         aria-labelledby="offcanvasExampleLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title"
                id="offcanvasExampleLabel">
                GFG Offcanvas
            </h5>
            <button id="hide" class="btn btn-success" 
                    type="button">
                Hide offcanvas
            </button>
        </div>
        <div class="offcanvas-body">
            Welcome to offcanvas GFG!!
        </div>

        <script>
            const myOffcanvas = document.getElementById('myOffcanvas')
            const bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
            const showBtn = document.getElementById('show')
            const hideBtn = document.getElementById('hide')
            
            showBtn.addEventListener('click', () => {
                bsOffcanvas.show()
            })
            
            hideBtn.addEventListener('click', () => {
                bsOffcanvas.hide()
            })
        </script>
    </div>
</body>

</html>

Output:

Example 2: In this example, we will use the "toggle" Offcanvas method to toggle (show/hide) the offcanvas element's visibility, manually, with the click of buttons.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
            crossorigin="anonymous">
    </script>
</head>

<body class="m-2">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <br>
    <strong>Bootstrap 5 Offcanvas Usage Methods</strong>
    <button id="toggle1" class="btn btn-success" type="button">
        Toggle offcanvas
    </button>

    <div class="offcanvas offcanvas-start" 
         tabindex="-1" 
         id="myOffcanvas" 
         aria-labelledby="offcanvasExampleLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title"
                id="offcanvasExampleLabel">
                GFG Offcanvas
            </h5>
            <button id="toggle2" class="btn btn-success"
                    type="button">
                Toggle offcanvas
            </button>
        </div>
        <div class="offcanvas-body">
            Welcome to offcanvas GFG!!
        </div>

        <script>
            const myOffcanvas = document.getElementById('myOffcanvas')
            const bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
            const toggleBtn1 = document.getElementById('toggle1')
            const toggleBtn2 = document.getElementById('toggle2')
            
            toggleBtn1.addEventListener('click', () => {
                bsOffcanvas.toggle()
            })
            
            toggleBtn2.addEventListener('click', () => {
                bsOffcanvas.toggle()
            })
        </script>
    </div>
</body>

</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/components/offcanvas/#methods

Bootstrap 5 Offcanvas Usage Methods

Explore