Bootstrap 5 Offcanvas

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.

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.

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.

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.

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.

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.

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.

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.

Output:

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