Bootstrap 5 Offcanvas Usage Options

Last Updated : 15 Feb, 2023

Bootstrap 5 Offcanvas Usage Options are employed to manually regulate the off-canvas element’s display. Bootstrap 5 Offcanvas can be triggered using data attributes and JavaScript.

Bootstrap 5 Offcanvas Usage Options Attribute:

data-bs-*: Options should be passed as data attributes in the off-canvas container.

Bootstrap 5 Offcanvas Usage Options: These are the option that is replaceable with * of data-bs-*.

backdrop: This option is used to add a backdrop to the background when the offcanvas is open. The type is boolean and the default value is true.
keyboard: It determines whether the escape key on the keyboard can close the offcanvas. The type is boolean and the default value is true.
scroll: This option determines whether the background can be scrolled or not. The type is boolean and the default value is false.

Syntax:

<div class="offcanvas" data-bs-*=value>
  <!-- Offcanvas Content --!>
</div>

Note: The * in the data-bs-* is replaced by the name of one of the options given above.

Example 1: This code example shows how to implement the backdrop and keyboard usage options:

HTML

<!doctype html>
<html lang="en">
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
        rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
    </script>
</head>
 
<body>
    <h1 class="m-4 text-success">
          GeeksforGeeks
      </h1>
    <h4 class="ms-4">
        Bootstrap 5 Offcanvas Usage Options
    </h4>
    <div class="container mt-4 w-50">
        <button class="btn btn-success mb-3" type="button"
                data-bs-toggle="offcanvas"
                data-bs-target="#offcanvasScrolling"
                aria-controls="offcanvasScrolling">
            Open Offcanvas without Backdrop and Keyboard utility
        </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.
        </p>
    </div>
    <div class="container d-grid mb-4 p-4 w-50">
        <button class="btn btn-success mb-3" type="button"
            data-bs-toggle="offcanvas" .
            data-bs-target="#offcanvasWithBackdrop"
            aria-controls="offcanvasWithBackdrop">
            Open Offcanvas with Backdrop
        </button>
        <p class="font-weight-bold">
            Bootstrap 5 is a free and open-source collection 
            of CSS and JavaScript/jQuery code used for 
            creating dynamic websites layout and web 
              applications. One of the most widely 
            used front-end frameworks, Bootstrap, 
              comes with a good collection of preset CSS codes. 
          </p>
        <br>
    </div>
    <div class="offcanvas offcanvas-start bg-dark text-light"
        data-bs-backdrop="false"
        data-bs-keyboard="false" id="offcanvasScrolling">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title"
                id="offcanvasScrollingLabel">
                This is the offcanvas without 
                Backdrop and Keyboard utility
            </h5>
            <button type="button"
                    class="btn-close text-reset bg-light"
                    data-bs-dismiss="offcanvas"
                    aria-label="Close">
            </button>
        </div>
        <div class="offcanvas-body">
            <p>We can disable the backdrop while the 
                offcanvas is open.</p>
            <br>
            <div class="d-flex flex-column w-75 justify-center">
                <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
                     alt="">
                <button type="button" class="btn-success"
                    data-bs-dismiss="offcanvas"
                    aria-label="Close">
                    Close
                </button>
            </div>
        </div>
    </div>
    <div class="offcanvas offcanvas-end bg-dark 
                text-light" 
        id="offcanvasWithBackdrop">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title"
                id="offcanvasBackdropLabel">
                This is the offcanvas with Backdrop
            </h5>
            <button type="button" class="btn-close text-reset 
                                         bg-light" 
                    data-bs-dismiss="offcanvas"
                    aria-label="Close">
            </button>
        </div>
        <div class="offcanvas-body">
            <p>This Offcanvas does have a Backdrop 
                but no Body-Scrolling.</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>
                <li class="list-group-item">6th item</li>
                <li class="list-group-item">7th item</li>
                <li class="list-group-item">8th item</li>
                <li class="list-group-item">9th item</li>
                <li class="list-group-item">And the 10th item</li>
            </ul>
        </div>
    </div>
</body>
</html>

Output:

Bootstrap 5 Offcanvas Usage Options

Example 2: This code example shows how to implement the backdrop and scroll usage options together:

HTML

<!doctype html>
<html lang="en">
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet">
      <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
      </script>
</head>
 
<body>
    <h1 class="m-4 text-success">
          GeeksforGeeks
      </h1>
    <h4 class="ms-4">
        Bootstrap 5 Offcanvas Usage Options
    </h4>
    <div class="container d-grid mb-4 p-4 w-50">
        <button class="btn btn-success mb-3" type="button"
                data-bs-toggle="offcanvas"
                data-bs-target="#offcanvasWithBothOptions">
            Open Offcanvas with body scrolling and backdrop
        </button>
      <img src=
"https://media.geeksforgeeks.org/img-practice/banner/dsa-self-paced-thumbnail.png?v=19363"
           class="w-100" alt="">
        <p class="font-weight-bold">
            Most popular course on DSA trusted by over 
            75,000 students! Built with years of experience 
            by industry experts the course gives 
            you a complete package of video 
            lectures, practice problems, quizzes, 
            discussion forums, and contests. Start Today!
       </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 
                                         bg-light" 
                    data-bs-dismiss="offcanvas"
                    aria-label="Close">
            </button>
        </div>
        <div class="offcanvas-body">
            <p> 
                  We can enable the background body scrolling
                and the backdrop while the offcanvas is open
                with the scroll usage option.
              </p>
            <br>
            <div class="d-flex flex-column w-75 justify-center">
                <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
                 alt="">
                <button type="button" class="btn-success"
                        data-bs-dismiss="offcanvas"
                        aria-label="Close">
                    Close
                </button>
            </div>
        </div>
    </div>
</body>
</html>

Output:

Bootstrap 5 Offcanvas Usage Options

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

Suggest improvement

Bootstrap 5 Offcanvas Usage Methods

Bootstrap 5 Progress Height

Share your thoughts in the comments

Accordion Component

Badges Component

Breadcrumb Component

Button group Component

Close button Component

Collapse Component

Offcanvas Component

Progress Component

Scrollspy Component

Spinners Component

Bootstrap 5 Offcanvas Usage Options

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?