Open In App

Bootstrap 5 Offcanvas

Last Updated : 31 Mar, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating responsive & dynamic websites layout and web applications. Offcanvas is one of the features of Bootstrap to make web pages more attractive, along with enhancing the user experience.

Offcanvas is a sidebar component that helps to toggle the view using Javascript, to appear from the left, right or bottom edge of the viewport. In order to toggle the view, the button can be used as the trigger, which is declared with the specific element, along with using the data attribute to utilize it for invoking the JavaScript. It is similar to the Bootstrap Modal, where only single offcanvas can be displayed at a time. Navigation throughout the page can be done using offcanvas functionality.

Offcanvas Component: Offcanvas contain a header with a close button and the body part. It’s good to include a close button or you can provide an explicit source to close it.

 Syntax:

<div class="offcanvas offcanvas-start" 
     id="sidebar">
    <div class="offcanvas-header">
         <h1 class="offcanvas-title">
             Heading
         </h1>
        <button type="button" 
                class="btn-close">
        </button>
    </div>
    <div class="offcanvas-body">
        <p>Content Body</p>
    </div>
</div>

Offcanvas Component Class:

  • offcanvas: This class is used to create offcanvas but it hides the content.
  • offcanvas show: This class is used to show the offcanvas content in the viewport.
  • offcanvas-header: This class is used for the head section of offcanvas.
  • offcanvas-body: This class is used to add content to the offcanvas body parts.

Example: This example describes the use of the Basic Offcanvas in Bootstrap.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Bootstrap Offcanvas</title>
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
    </script>
</head>
  
<body>
    <div class="container mt-3">
        <button class="btn btn-primary" 
                type="button" 
                data-bs-toggle="offcanvas" 
                data-bs-target="#offcanvasStart" 
                aria-controls="offcanvasStart">
          Toggle offcanvas
        </button>
        <div class="offcanvas offcanvas-start" 
             tabindex="-1" 
             id="offcanvasStart" 
             aria-labelledby="offcanvasStartLabel">
            <div class="offcanvas-header">
                <h3 id="offcanvasStartLabel">
                  Offcanvas
                 </h3>
                <button type="button" 
                        class="btn-close text-reset" 
                        data-bs-dismiss="offcanvas" 
                        aria-label="Close">
                </button>
            </div>
            <div class="offcanvas-body">
                <h5>
                    Bootstrap is the most popular CSS 
                    Framework for developing responsive
                    and mobile-first websites.
                </h5> 
            </div>
        </div>
        <center>
            <h3>
              Welcome to GeeksforGeeks
              Welcome to GeeksforGeeks
             </h3>
            <h4>
              A computer science portal for geeks.
             </h4>
            <h3>
              Welcome to GeeksforGeeks 
              Welcome to GeeksforGeeks
              </h3>
            <h4>
              A computer science portal for geeks.
              </h4>
            <h3>
              Welcome to GeeksforGeeks 
              Welcome to GeeksforGeeks
              </h3>
        </center>
    </div>
</body>
  
</html>
 






                        










Output:




Offcanvas Placement: The Offcanvas placement can be used to position the offcanvas in various ways, such as top, bottom, right, & start of the viewport. There is no default placement for offcanvas components.


Syntax:


<div class="offcanvas offcanvas-start" 
     id="offcanvasStart" >
</div>
<div class="offcanvas offcanvas-top"  
     id="offcanvasTop" >
</div>
<div class="offcanvas offcanvas-end"      
     id="offcanvasRight" >
</div>
<div class="offcanvas offcanvas-bottom"
     id="offcanvasBottom">
</div>


Offcanvas Placement Class:


    

  • offcanvas-start: This class is used to place offcanvas on the left side of the viewport.
    • 

  • offcanvas-end: This class is used to place offcanvas on the right side of the viewport.
    • 

  • offcanvas-top: This class is used to place offcanvas on the top side of the viewport.
    • 

  • offcanvas-bottom: This class is used to place offcanvas on the bottom side of the viewport.
    • 



Example: In this example, we will demonstrate offcanvas placement in the viewport.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html lang="en"> 


  


<head> 


    <title> 


      Bootstrap Offcanvas 


      </title> 


    <meta name="viewport" 


          content="width=device-width,  


                   initial-scale=1"> 


    <link href= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 


          rel="stylesheet"> 


    <script src= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"> 


    </script> 


</head> 


  


<body> 


    <div class="container mt-3"> 


        <button class="btn btn-primary" 


                type="button" 


                data-bs-toggle="offcanvas" 


                data-bs-target="#offcanvasStart" 


                aria-controls="offcanvasStart"> 


          Toggle left offcanvas 


        </button> 


        <div class="offcanvas offcanvas-start" 


             tabindex="-1" 


             id="offcanvasStart" 


             aria-labelledby="offcanvasStartLabel"> 


            <div class="offcanvas-header"> 


                <h3 id="offcanvasStartLabel"> 


                  Offcanvas left 


                  </h3> 


                <button type="button" 


                         class="btn-close text-reset" 


                         data-bs-dismiss="offcanvas" 


                         aria-label="Close"> 


                </button> 


            </div> 


            <div class="offcanvas-body"> 


                <h5> 


                    Bootstrap is the most popular CSS  


                    Framework for developing responsive  


                    and mobile-first websites. 


                </h5> 


            </div> 


        </div> 


        <button class="btn btn-primary" 


                type="button" 


                data-bs-toggle="offcanvas" 


                data-bs-target="#offcanvasRight" 


                aria-controls="offcanvasRight"> 


          Toggle right offcanvas 


        </button> 


        <div class="offcanvas offcanvas-end" 


             tabindex="-1" 


             id="offcanvasRight" 


             aria-labelledby="offcanvasRightLabel"> 


            <div class="offcanvas-header"> 


                <h3 id="offcanvasRightLabel"> 


                  Offcanvas right 


                  </h3> 


                <button type="button" 


                        class="btn-close text-reset" 


                        data-bs-dismiss="offcanvas" 


                        aria-label="Close"> 


                </button> 


            </div> 


            <div class="offcanvas-body"> 


                <h5> 


                    Bootstrap is the most popular CSS  


                    Framework for developing responsive  


                    and mobile-first websites. 


                </h5> 


            </div> 


        </div> 


        <button class="btn btn-primary" 


                type="button" 


                data-bs-toggle="offcanvas"


                data-bs-target="#offcanvasTop" 


                aria-controls="offcanvasTop"> 


          Toggle top offcanvas 


        </button> 


        <div class="offcanvas offcanvas-top" 


             tabindex="-1" 


             id="offcanvasTop" 


             aria-labelledby="offcanvasTopLabel"> 


            <div class="offcanvas-header"> 


                <h3 id="offcanvasTopLabel"> 


                  Offcanvas top 


                 </h3> 


                <button type="button" 


                        class="btn-close text-reset" 


                        data-bs-dismiss="offcanvas" 


                        aria-label="Close"> 


                </button> 


            </div> 


            <div class="offcanvas-body"> 


                <h5> 


                    Bootstrap is the most popular CSS  


                    Framework for developing responsive  


                    and mobile-first websites. 


                </h5> 


            </div> 


        </div> 


        <button class="btn btn-primary" 


                type="button" 


                data-bs-toggle="offcanvas"


                data-bs-target="#offcanvasBottom" 


                aria-controls="offcanvasBottom"> 


          Toggle bottom offcanvas 


        </button> 


        <div class="offcanvas offcanvas-bottom"


             tabindex="-1" 


             id="offcanvasBottom" 


             aria-labelledby="offcanvasBottomLabel"> 


            <div class="offcanvas-header"> 


                <h3 class="offcanvas-title" 


                    id="offcanvasBottomLabel"> 


                  Offcanvas bottom 


                </h3> 


                <button type="button" 


                        class="btn-close text-reset" 


                        data-bs-dismiss="offcanvas" 


                        aria-label="Close"> 


                </button> 


            </div> 


            <div class="offcanvas-body small"> 


                <h5> 


                    Bootstrap is the most popular CSS  


                    Framework for developing responsive  


                    and mobile-first websites. 


                </h5>  


            </div> 


        </div> 


        <br> 


        <center> 


            <h3> 


              Welcome to GeeksforGeeks 


              Welcome to GeeksforGeeks 


             </h3> 


            <h4> 


              A computer science portal for geeks. 


             </h4> 


            <h3> 


              Welcome to GeeksforGeeks  


              Welcome to GeeksforGeeks 


              </h3> 


            <h4> 


              A computer science portal for geeks. 


              </h4> 


            <h3> 


              Welcome to GeeksforGeeks  


              Welcome to GeeksforGeeks 


              </h3> 


        </center> 


    </div> 


</body> 


</html>



















                        







                        










Output:




Offcanvas Backdrop: The backdrop option specifies that the offcanvas have a dark overlay (the background color of the current page). By default the backdrop is active. Use the data-bs-backdrop attribute and set its value to false to inactive the backdrop.


Syntax:


<div class="offcanvas offcanvas-start"
     data-bs-scroll="true" 
     data-bs-backdrop="false"> 
        Content 
</div>


Example 1: In this example, we will demonstrate offcanvas with the default option. By default backdrop option is active and scrolling is inactive.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html lang="en"> 


  


<head> 


    <title>Bootstrap Sidebar</title> 


    <meta charset="utf-8"> 


    <meta name="viewport" 


         content="width=device-width, 


                  initial-scale=1"> 


    <link href= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 


         rel="stylesheet"> 


    <script src= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"> 


    </script> 


</head> 


  


<body> 


    <div class="offcanvas offcanvas-start" 


         tabindex="-1" 


         id="sidebar" 


         aria-labelledby="offcanvasStartLabel"> 


        <div class="offcanvas-header"> 


            <h1 id="offcanvasStartLabel"> 


                GeeksforGeeks 


            </h1> 


            <button type="button" 


                    class="btn-close text-reset"


                    data-bs-dismiss="offcanvas" 


                    aria-label="Close"> 


            </button> 


        </div> 


        <div class="offcanvas-body"> 


            <h5> 


                Scrolling is inactive (default) 


            </h5> 


            <h5> 


                backdrop is active (default) 


            </h5> 


            <br> 


            <h5> 


                <p> 


                    Bootstrap is the most popular CSS  


                    Framework for developing responsive  


                    and mobile-first websites. 


                </p> 


            </h5>  


        </div> 


    </div> 


    <div class="container mt-3"> 


        <button class="btn btn-primary" 


                type="button" 


                data-bs-toggle="offcanvas" 


                data-bs-target="#sidebar" 


                aria-controls="offcanvasStart"> 


            Offcanvas Sidebar 


        </button> 


          


        <center> 


            <img src= 


"https://media.geeksforgeeks.org/wp-content/uploads/20220129032254/geeks.png" 


                 alt="GFG" 


                 width="600" 


                 height="400"> 


            <br> 


            <h3> 


              Welcome to GeeksforGeeks 


              Welcome to GeeksforGeeks 


             </h3> 


            <h4> 


              A computer science portal for geeks. 


             </h4> 


            <h3> 


              Welcome to GeeksforGeeks  


              Welcome to GeeksforGeeks 


              </h3> 


            <h4> 


              A computer science portal for geeks. 


              </h4> 


            <h3> 


              Welcome to GeeksforGeeks  


              Welcome to GeeksforGeeks 


              </h3> 


            <br>  


            <img src= 


"https://media.geeksforgeeks.org/wp-content/uploads/20220129032254/geeks.png" 


                 alt="GFG" 


                 width="600" 


                 height="400"> 


            <br>  


        </center> 


    </div> 


</body> 


</html>



















                        







                        










Output:


 


Example 2: In this example, we will demonstrate offcanvas with an inactive backdrop. Use the data-bs-backdrop attribute and set its value to false to inactive the backdrop.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html lang="en"> 


  


<head> 


    <title>Bootstrap Offcanvas</title> 


    <meta name="viewport" 


          content="width=device-width,  


                   initial-scale=1"> 


    <link href= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 


          rel="stylesheet"> 


    <script src= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"> 


    </script> 


</head> 


  


<body> 


    <div class="offcanvas offcanvas-start" 


         data-bs-backdrop="false" 


         tabindex="-1" 


         id="sidebar" 


         aria-labelledby="offcanvasStartLabel"> 


        <div class="offcanvas-header"> 


            <h1 id="offcanvasStartLabel"> 


              GeeksforGeeks 


              </h1> 


            <button type="button" 


                    class="btn-close text-reset" 


                    data-bs-dismiss="offcanvas" 


                    aria-label="Close"> 


            </button> 


        </div> 


        <div class="offcanvas-body"> 


            <h5> 


              Scrolling is inactive (default) 


              </h5> 


            <h5> 


              backdrop is inactive 


              </h5> 


            <br> 


            <h5> 


                <p> 


                    Bootstrap is the most popular CSS  


                    Framework for developing responsive  


                    and mobile-first websites. 


                </p> 


            </h5>  


        </div> 


    </div> 


    <div class="container mt-3"> 


        <button class="btn btn-primary" 


                type="button" 


                data-bs-toggle="offcanvas" 


                data-bs-target="#sidebar" 


                aria-controls="offcanvasStart"> 


          Offcanvas Sidebar 


        </button> 


        <center>  


            <img src= 


"https://media.geeksforgeeks.org/wp-content/uploads/20220129032254/geeks.png" 


                 alt="GFG"


                 width="600" 


                 height="400"> 


            <br> 


            <h3> 


              Welcome to GeeksforGeeks 


              Welcome to GeeksforGeeks 


             </h3> 


            <h4> 


              A computer science portal for geeks. 


             </h4> 


            <h3> 


              Welcome to GeeksforGeeks  


              Welcome to GeeksforGeeks 


              </h3> 


            <h4> 


              A computer science portal for geeks. 


              </h4> 


            <h3> 


              Welcome to GeeksforGeeks  


              Welcome to GeeksforGeeks 


              </h3> 


            <br>  


            <img src= 


"https://media.geeksforgeeks.org/wp-content/uploads/20220129032254/geeks.png" 


                 alt="GFG"


                 width="600" 


                 height="400"> 


            <br>  


        </center> 


    </div> 


</body> 


</html>



















                        







                        










Output:


 


Background scrolling: It is by default inactive means background content is not scrollable. Use the data-bs-scroll attribute and set its value to true to activate the background scrolling.


Example 3: In this example, we will demonstrate offcanvas with scrolling and backdrop.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html lang="en"> 


  


<head> 


    <title>Bootstrap Offcanvas</title> 


    <meta name="viewport" 


          content="width=device-width,  


                   initial-scale=1"> 


    <link href= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 


          rel="stylesheet"> 


    <script src= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"> 


    </script> 


</head> 


  


<body> 


    <div class="offcanvas offcanvas-start" 


         data-bs-scroll="true" 


         tabindex="-1" 


         id="sidebar" 


         aria-labelledby="offcanvasStartLabel"> 


        <div class="offcanvas-header"> 


            <h1 id="offcanvasStartLabel"> 


                  GeeksforGeeks 


             </h1> 


            <button type="button" 


                    class="btn-close text-reset" 


                    data-bs-dismiss="offcanvas" 


                    aria-label="Close"> 


            </button> 


        </div> 


        <div class="offcanvas-body"> 


            <h5> 


              Scrolling is active  


              </h5> 


            <h5> 


              backdrop is active  


              </h5> 


            <br> 


            <h5> 


                <p> 


                    Bootstrap is the most popular CSS Framework 


                    for developing responsive and mobile-first  


                    websites. 


                </p> 


            </h5>  


        </div> 


    </div> 


    <div class="container mt-3"> 


        <button class="btn btn-primary"


                type="button" 


                data-bs-toggle="offcanvas"


                data-bs-target="#sidebar" 


                aria-controls="offcanvasStart"> 


          Offcanvas Sidebar 


        </button> 


  


        <center>  


            <img src= 


"https://media.geeksforgeeks.org/wp-content/uploads/20220129032254/geeks.png" 


                 alt="GFG" 


                 width="600" 


                 height="400"> 


            <br> 


            <h3> 


              Welcome to GeeksforGeeks 


              Welcome to GeeksforGeeks 


             </h3> 


            <h4> 


              A computer science portal for geeks. 


             </h4> 


            <h3> 


              Welcome to GeeksforGeeks  


              Welcome to GeeksforGeeks 


              </h3> 


            <h4> 


              A computer science portal for geeks. 


              </h4> 


            <h3> 


              Welcome to GeeksforGeeks  


              Welcome to GeeksforGeeks 


              </h3> 


            <br>  


            <img src= 


"https://media.geeksforgeeks.org/wp-content/uploads/20220129032254/geeks.png" 


                 alt="GFG"


                 width="600" 


                 height="400"> 


            <br>  


            </center> 


    </div> 


</body> 


</html>



















                        







                        










Output:


 


Offcanvas with Dropdown Menu: The Offcanvas facilitates the dropdown menu that contains the list of options that will be only revealed when a user interacts with the menu.


Syntax:


<div class="offcanvas-body>
    <ul class="dropdown-menu">
        <li>
            <a class="dropdown-item" 
               href="#">
               element 1
            </a>
        </li>
        <li>
            <a class="dropdown-item" 
               href="#">element 2
            </a>
        </li>
    </ul>
</div>


Used Classes:


    

  • dropdown-menu: This class is used to create a dropdown menu.
    • 

  • dropdown-item: This class is used to list dropdown items.
    • 



Example: In this example, we will demonstrate offcanvas with the dropdown menu.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html lang="en"> 


  


<head> 


    <title>Bootstrap Sidebar</title> 


    <meta charset="utf-8"> 


    <meta name="viewport" 


          content="width=device-width,  


                   initial-scale=1"> 


    <link href= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"


         rel="stylesheet"> 


    <script src= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"> 


    </script> 


</head> 


  


<body> 


    <div class="container mt-3"> 


        <button class="btn btn-primary" 


                type="button" 


                data-bs-toggle="offcanvas" 


                data-bs-target="#offcanvasExample" 


                aria-controls="offcanvasExample">  


                Offcanvas with dropdown menu  


        </button> 


        <div class="offcanvas offcanvas-start"


             tabindex="-1" 


             id="offcanvasExample" 


             aria-labelledby="offcanvasExampleLabel"> 


            <div class="offcanvas-header"> 


                <h1 class="offcanvas-title" 


                    id="offcanvasExampleLabel"> 


                    GeeksforGeeks 


                </h1> 


                <button type="button" 


                        class="btn-close text-reset" 


                        data-bs-dismiss="offcanvas"


                        aria-label="Close"> 


      


                </button> 


            </div> 


            <div class="offcanvas-body"> 


                <div> 


                    <h5> 


                        Bootstrap is the most popular  


                        CSS Framework for developing 


                        responsive and mobile-first  


                        websites. 


                    </h5>  


                </div> 


                <br> 


                <div class="dropdown mt-3"> 


                    <button class="btn btn-secondary dropdown-toggle"


                            type="button" 


                            id="dropdownMenuButton"


                            data-bs-toggle="dropdown"> 


                        Dropdown Menu  


                    </button> 


                    <ul class="dropdown-menu" 


                        aria-labelledby="dropdownMenuButton"> 


                        <li> 


                            <a class="dropdown-item" 


                               href="#">HTML 


                            </a> 


                        </li> 


                        <li> 


                            <a class="dropdown-item" 


                               href="#">CSS 


                            </a> 


                        </li> 


                        <li> 


                            <a class="dropdown-item" 


                               href="#">JAVASCRIPT 


                            </a> 


                        </li> 


                        <li> 


                            <a class="dropdown-item" 


                               href="#">BOOTSTRAP 


                            </a> 


                        </li> 


                    </ul> 


                </div> 


            </div> 


        </div> 


      


        <br> 


        <center> 


            <h3> 


              Welcome to GeeksforGeeks 


              Welcome to GeeksforGeeks 


             </h3> 


            <h4> 


              A computer science portal for geeks. 


             </h4> 


            <h3> 


              Welcome to GeeksforGeeks  


              Welcome to GeeksforGeeks 


              </h3> 


            <h4> 


              A computer science portal for geeks. 


              </h4> 


            <h3> 


              Welcome to GeeksforGeeks  


              Welcome to GeeksforGeeks 


              </h3> 


        </center> 


    </div> 


</body> 


</html>



















                        







                        










Output:


 


Offcanvas with Vertical Menu: Offcanvas provides a vertical menu to choose from the options, that will be revealed when users interact with the menu.


Syntax:


<ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link" 
           href="#">
           list Item 1
        </a>
    </li>
</ul>



Used Classes:


    

  • navbar-nav: This class is used to create a vertical menu.
    • 

  • nav-link: This class is used to add items to the vertical menu.
    • 



Example: In this example, we will demonstrate offcanvas with a vertical menu.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html lang="en"> 


  


<head> 


    <title>Bootstrap Offcanvas</title> 


    <meta name="viewport" 


          content="width=device-width,  


                   initial-scale=1"> 


    <link href= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 


          rel="stylesheet"> 


    <script src= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"> 


    </script> 


</head> 


  


<body> 


    <div class="container mt-3"> 


        <div class="offcanvas offcanvas-start"


             tabindex="-1" 


             id="offcanvasExample" 


             aria-labelledby="offcanvasExampleLabel"> 


            <div class="offcanvas-header"> 


                <h1 class="offcanvas-title" 


                    id="offcanvasExampleLabel"> 


                  GeeksforGeeks 


                </h1> 


                <button type="button"


                        class="btn-close text-reset" 


                        data-bs-dismiss="offcanvas" 


                        aria-label="Close"> 


                </button> 


            </div> 


            <div class="offcanvas-body"> 


                <h5> 


                    Bootstrap is the most popular CSS  


                    Framework for developing responsive  


                    and mobile-first websites. 


                </h5> 


                <br> 


                <nav class="navbar bg-light"> 


                    <div class="container-fluid"> 


                        <ul class="navbar-nav"> 


                            <li class="nav-item">  


                                <a class="nav-link" 


                                   href="#"> 


                                  Link 1 


                                </a>  


                            </li> 


                            <li class="nav-item">  


                                <a class="nav-link" 


                                   href="#"> 


                                  Link 2 


                                </a>  


                            </li> 


                            <li class="nav-item">  


                                <a class="nav-link" 


                                   href="#"> 


                                  Link 3 


                                </a>  


                            </li> 


                            <li class="nav-item">  


                                <a class="nav-link" 


                                   href="#"> 


                                  Link 4 


                                </a>  


                            </li> 


                        </ul> 


                    </div> 


                </nav> 


            </div> 


        </div> 


        <button class="btn btn-primary" 


                type="button" 


                data-bs-toggle="offcanvas" 


                data-bs-target="#offcanvasExample" 


                aria-controls="offcanvasExample">  


          Offcanvas with vertical menu  


        </button> 


        <br> 


        <center> 


            <h3> 


              Welcome to GeeksforGeeks 


              Welcome to GeeksforGeeks 


             </h3> 


            <h4> 


              A computer science portal for geeks. 


             </h4> 


            <h3> 


              Welcome to GeeksforGeeks  


              Welcome to GeeksforGeeks 


              </h3> 


            <h4> 


              A computer science portal for geeks. 


              </h4> 


            <h3> 


              Welcome to GeeksforGeeks  


              Welcome to GeeksforGeeks 


              </h3> 


        </center> 


    </div> 


</body> 


</html>



















                        







                        










Output:


 


Accessibility using Sass Variables:


Sass variables are the variable which are used instead of the attribute value. Here some sass variables are given by bootstrap model. you can use this variable to enhance the styling of offcanvas.


    

  • $offcanvas-padding-y : $modal-inner-padding ;
    • 

  • $offcanvas-padding-x :  $modal-inner-padding ;
    • 

  • $offcanvas-bg-color : $modal-content-bg ;
    • 

  • $offcanvas-color :  $modal-content-color ;
    • 

  • $offcanvas-horizontal-width :  400px ;
    • 

  • $offcanvas-border-color : $modal-content-border-color ;
    • 

  • $offcanvas-border-width :  $modal-content-border-width ;
    • 

  • $offcanvas-box-shadow : $modal-content-box-shadow-xs ;
    • 



Offcanvas Usage:


    

  • Via data attributes
    • 



Syntax:


<a class="btn btn-primary" 
   data-bs-toggle="offcanvas" 
   aria-controls="offcanvasStart">
</a>


Used Classes:


    

  • offcanvas: This class is used to create offcanvas but it hides the content.
    • 



Via JavaScript:


Syntax:


var offcanvasElementList = 
    [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList =
     offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl) })


    

  • Via Option:

      

    • Backdrop: Its default value is true. You can see the effect of the backdrop on the body while offcanvas is open. As it is already shown in the above examples.
      • 

    • Scroll: Its default value is false. You can allow body scrolling while offcanvas is open. As it is already shown in the above examples.
      • 

    

    • 

  • Via Events:

      

    • show.bs.offcanvas: This event fires immediately when the show instance method is called.
      • 

    • shown.bs.offcanvas: This event is fired when an offcanvas element has been made visible to the user.
      • 

    • hide.bs.offcanvas: This event is fired immediately when the hide method has been called.
      • 

    • hidden.bs.offcanvas: This event is fired when an offcanvas element has been hidden from the user.
      • 

    

    • 

  • Via Method:

      

    • toggle(): This method toggles an offcanvas element to be shown or hidden. Returns to the caller before the offcanvas element has actually been shown or hidden.
      • 

    • show(): This method shows an offcanvas element. Returns to the caller before the offcanvas element has actually been shown.
      • 

    • Hide(): Hides an offcanvas element. Returns to the caller before the offcanvas element has actually been hidden.
      • 

    

    • 



Example: In this example, we will demonstrate usage of offcanvas from href attribute and data-bs-target attribute.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html lang="en"> 


  


<head> 


    <title>Bootstrap Offcanvas</title> 


    <meta name="viewport" 


          content="width=device-width,  


                   initial-scale=1"> 


    <link href= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" 


          rel="stylesheet"> 


    <script src= 


"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"> 


    </script> 


</head> 


  


<body> 


    <div class="container mt-3">  


        <a class="btn btn-primary" 


           data-bs-toggle="offcanvas" 


           href="#offcanvasStart" 


           role="button" 


           aria-controls="offcanvasStart"> 


          Link with href 


        </a> 


        <button class="btn btn-primary" 


                type="button" 


                data-bs-toggle="offcanvas" 


                data-bs-target="#offcanvasStart" 


                aria-controls="offcanvasStart"> 


          Button with data-bs-target 


        </button> 


        <div class="offcanvas offcanvas-start" 


             tabindex="-1" 


             id="offcanvasStart" 


             aria-labelledby="offcanvasStartLabel"> 


            <div class="offcanvas-header"> 


                <h1 id="offcanvasStartLabel"> 


                  GeeksforGeeks 


                  </h1> 


                <button type="button" 


                        class="btn-close text-reset" 


                        data-bs-dismiss="offcanvas" 


                        aria-label="Close"> 


      


                </button> 


            </div> 


            <div class="offcanvas-body"> 


                <h5> 


                    Bootstrap is the most popular  


                    CSS Framework for developing  


                    responsive and mobile-first  


                    websites. 


                </h5> 


            </div> 


        </div> 


        <br> 


        <center> 


            <h3> 


              Welcome to GeeksforGeeks 


              Welcome to GeeksforGeeks 


             </h3> 


            <h4> 


              A computer science portal for geeks. 


             </h4> 


            <h3> 


              Welcome to GeeksforGeeks  


              Welcome to GeeksforGeeks 


              </h3> 


            <h4> 


              A computer science portal for geeks. 


              </h4> 


            <h3> 


              Welcome to GeeksforGeeks  


              Welcome to GeeksforGeeks 


              </h3> 


        </center> 


    </div> 


</body> 


</html>



















                        







                        










Output:


 


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


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Bootstrap 5 Navbar Text
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Bootstrap 5 Popovers
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Bootstrap 5 Offcanvas Components
            

        
    
        
            

                Bootstrap 5 Offcanvas Live Demo
            

        
    
        
            

                Bootstrap 5 Offcanvas Usage Via JavaScript
            

        
    
        
            

                Bootstrap 5 Offcanvas Usage Via Data Attributes
            

        
    
        
            

                Bootstrap 5 Offcanvas Usage Events
            

        
    
        
            

                Bootstrap 5 Offcanvas Placement
            

        
    
        
            

                Bootstrap 5 Offcanvas Usage Methods
            

        
    
        
            

                Bootstrap 5 Offcanvas SASS
            

        
    
        
            

                Bootstrap 5 Offcanvas Usage
            

        
    
        
            

                Bootstrap 5 Offcanvas Backdrop
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        sahilsulakhe3                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox