Open In App

Bootstrap 5 Offcanvas Live Demo

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Offcanvas live demo of Offcanvas can be implemented using a link with href attribute or button with data-bs-target attribute by applying javascript to the element. JavaScript that toggles the .show class on an element with the .offcanvas class.

  • offcanvas hides the content (default)
  • offcanvas.show shows content

Bootstrap 5 Offcanvas Live Demo Class: There is no specific class for OffCanvas Live demo, there is an attribute that is required.

Bootstrap 5 Offcanvas Live Demo Attribute:

  • data-bs-target: It accepts a CSS selector to apply javascript to hide or show Offcanvas.

Syntax:

<button type="button" data-bs-toggle="offcanvas" data-bs-target="">
      ...
</button>

Example 1: In the code below a Live Demo of a basic Offcanvas is being shown:

HTML




<!doctype html>
<html lang="en">
 
<head>
    <link href=
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <script src=
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
    </script>
</head>
 
<body>
    <h1 class="text-success ms-4 mt-3">
        GeeksforGeeks
    </h1>
    <h4 class="ms-4">Bootstrap 5 Offcanvas Live demo</h4>
    <div class="container d-flex mb-4 p-4">
        <button class="btn btn-success m-3"
                type="button"
                data-bs-toggle="offcanvas"
                data-bs-target="#offcanvas">
            Open left placed offcanvas
        </button>
    </div>
    <div class="offcanvas offcanvas-start"
         id="offcanvas">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">
                This is the Default offcanvas
            </h5>
            <button type="button"
                    class="btn-close text-reset"
                    data-bs-dismiss="offcanvas"
                    aria-label="Close">
            </button>
        </div>
        <div class="offcanvas-body">
            <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 Live Demo

Bootstrap 5 Offcanvas Live Demo

Example 2: The code below demonstrates the Live Demo of an Offcanvas with backdrop and scrolling:

HTML




<!doctype html>
<html lang="en">
<head>
    <link href=
          rel="stylesheet"
          integrity=
 "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <script src=
            integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous">
    </script>
</head>
<body>
    <h1 class="m-4 text-success">GeeksforGeeks</h1>
    <h4 class="ms-4">Bootstrap 5 Offcanvas Live demo</h4>
    <div class="container mt-4">
        <button class="btn btn-success mb-3"
                type="button"
                data-bs-toggle="offcanvas"
                data-bs-target="#offcanvasWithBothOptions">
            Offcanvas with body scrolling and backdrop
            <br>
        </button>
        <p>
            Bootstrap 5 Offcanvas is a sidebar component that enables Javascript to swap
            the view so that it may be seen from the top, bottom, or left edge of the
            viewport. The button, which is declared with the particular element, may be
            used as the trigger to switch the view, and the data attribute can be used
            to use it to call JavaScript. It is comparable to the Bootstrap Modal in that
            only one off-canvas element may be shown at once. Offcanvas functionality
            may be used to navigate the entire page. Offcanvas Backdrop is the greyish
            translucent cover that is all over the background which is shown when the
            offcanvas opens. There are three settings in which we can use an offcanvas,
            the default one is the offcanvas with the backdrop and no body scrolling.
            The two others are the one with the body scrolling and no backdrop and the
            one with both body scrolling and backdrop. For the second version we have
            to add data-bs-scroll="true" data-bs-backdrop="false" attributes in the
            offcanvas and for the last one we have to add the data-bs-scroll="true"
            attribute in the offcanvas.
        </p>
    </div>
    <div class="offcanvas offcanvas-start bg-dark text-light"
           data-bs-scroll="true"
           id="offcanvasWithBothOptions">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title"
                id="offcanvasScrollingLabel">
                This is the offcanvas with body scrolling and backdrop</h5>
            <button type="button"
                    class="btn-close text-reset"
                    data-bs-dismiss="offcanvas"
                    aria-label="Close">
            </button>
        </div>
        <div class="offcanvas-body">
            <img src=
            <button type="button"
                    class="btn-success"
                    data-bs-dismiss="offcanvas"
                    aria-label="Close">
                Close
            </button>
        </div>
    </div>
</body>
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.0/components/offcanvas/#live-demo 



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