Open In App

Bootstrap 5 Offcanvas Usage Via Data Attributes

Improve
Improve
Like Article
Like
Save
Share
Report

An Offcanvas can be triggered or used using two ways using data attributes and using JavaScript. The data-attributes approach needs two attributes. These data attributes are added to the anchor link or button which is used to trigger the off-canvas. Offcanvas class is added to the div which is the off-canvas. container. 

Bootstrap 5 Offcanvas Usage Data Attributes:

  • data-bs-toggle: we need to add “offcanvas” as a value to this attribute.
  • data-bs-target: We add the id/class(CSS selector) of the off-canvas container as a value to this attribute.

Syntax:

<button class="btn" type="button" 
    data-bs-toggle="offcanvas" 
    data-bs-target="id">...
</button>
<div class="offcanvas" id="...">
 ...
</div>

Example 1: The example below demonstrates how we can trigger the offcanvas using the data-attributes.

HTML




<!doctype html>
<html lang="en">
  
<head>
    <!-- Bootstrap CDN -->
    <link href=
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
            crossorigin="anonymous">
    <script src=
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
            crossorigin="anonymous">
    </script>
</head>
  
<body class="container">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <strong>
        Bootstrap 5 Offcanvas Usage Via data attributes
    </strong>
    <div class="container">
        <button class="btn btn-success" 
                type="button" 
                data-bs-toggle="offcanvas"
                data-bs-target="#offcanvasLeft">
            This button has those Data Attributes to use<br>
            an Offcanvas Which is the default placed offcanvas
        </button>
    </div>
    <div class="offcanvas offcanvas-start" id="offcanvasLeft">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">
                This is the Default offcanvas 
                Triggered with the data attributes.
            </h5>
            <button type="button" 
                    class="btn-close text-reset"
                    data-bs-dismiss="offcanvas" 
                    aria-label="Close">
            </button>
        </div>
        <div class="offcanvas-body">
            <p>
                This Offcanvas has the default
                placement which is left.</p>
            <br>
            <ul class="list-group">
                <li class="list-group-item">An item</li>
                <li class="list-group-item">A second item</li>
                <li class="list-group-item">A third item</li>
                <li class="list-group-item">A fourth item</li>
                <li class="list-group-item">And a fifth one</li>
            </ul>
        </div>
    </div>
</body>
  
</html>


Output:

Bootstrap 5 Offcanvas Usage Via data attributes

Example 2: The example below demonstrates how we can trigger the offcanvas using the data-attributes in the button which triggers a top off-canvas using the offcanvas-top.

HTML




<!doctype html>
<html lang="en">
  
<head>
    <!-- Bootstrap CDN -->
    <link href=
          rel="stylesheet" 
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
            crossorigin="anonymous">
    <script src=
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
            crossorigin="anonymous">
    </script>
</head>
  
<body class="container">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <strong>
        Bootstrap 5 Offcanvas Usage Via data attributes
    </strong>
    <div class="container">
        <button class="btn btn-success"
                type="button"
                data-bs-toggle="offcanvas"
                data-bs-target="#offcanvasTop">
          This button has those Data Attributes to use<br>
          an Offcanvas Which is the top placed offcanvas
      </button>
    </div>
    <div class="offcanvas offcanvas-top" id="offcanvasTop">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title">
          This is the Top offcanvas with Data Attributes</h5>
        <button type="button"
                class="btn-close text-reset"
                data-bs-dismiss="offcanvas"
                aria-label="Close">
        </button>
      </div>
      <div class="offcanvas-body">
        <p>This offcanvas pops from the top when triggered</p>
        <br>
        <img src=
             alt="">
        <button type="button"
                class="btn-success"
                data-bs-dismiss="offcanvas"
                aria-label="Close">Close
        </button>
    </div>
  </div>
</body>
  
</html>


Output:

Bootstrap 5 Offcanvas Usage Via data attributes

Reference: https://getbootstrap.com/docs/5.0/components/offcanvas/#via-data-attributes 



Last Updated : 15 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads