Bootstrap Offcanvas

Offcanvas is a hidden sidebar component that can appear from any side (left, right, or bottom) of the viewport. This offcanvas or hidden side are used for navigation menu, shopping carts, and many other applications. Buttons or anchors are used as triggers that are attached with some elements which are toggled via data attributes.

Offcanvas are quite similar to modal but are used as separate plugins. Only one Offcanvas can be shown at a time.

Creating an Offcanvas

To create an Offcanvas use .offcanvas class. Offcanvas includes a header that is created using the .offcanvas-header class and a body that is created using the .offcanvas-body class. The title is added to headers using the .offcanvas-title class. A close button is included with the header to dismissing the offcanvas.

Example: Creating an Offcanvas using Bootstrap 5

Here, we have used a button to toggle the Offcanvas. Use .data-bs-toggle="offcanvas" within the <a> element to toggle it.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
	<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
	  Link with href
	</a>
	<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
	  <div class="offcanvas-header">
		<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
		<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
	  </div>
	  <div class="offcanvas-body">
		<div>
		  Some text as placeholder. You can add any elements here.
		</div>
	  </div>
	</div>
</body>
</html>

Output:

Here is the output of the above program.

Offcanvas

Offcanvas Placement

We can set the Offcanvas to appear from any side like top, bottom, left, or right of the screen. The offcanvas does not provide any default placement. We need to assign it .offcanvas class.

.offcanvas-start places the canvas to the left side of the screen.
.offcanvas-end places the canvas to the right side of the screen.
.offcanvas-top places the canvas to the top of the screen.
.offcanvas-bottom places the canvas to the bottom of the screen.

Example: Placing the Canvas to the Top of the screen

Here, we have used the button to toggle the Offcanvas. Remember to add the data-bs-target attribute to the <button> element.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
	<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">
		<h5 id="offcanvasTopLabel">Offcanvas top</h5>
		<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
	  </div>
	  <div class="offcanvas-body">
		Remember to add data-bs-target attribute with button element.
	  </div>
	</div>
</body>
</html>

Output:

Here is the output of the above program.

Offcanvas Top

Offcanvas Backdrop

When the offcanvas is shown, it includes the default backdrop. It is a dark background screen with the Offcanvas. The scrolling of background elements is disabled when the Offcanvas is on. Use the data-bs-scroll attribute to scroll the body element and data-bs-backdrop to hide and show the backdrop.

Example: Enabling scroll and toggling backdrop on the offcanvas

Here we have used three buttons for three different classes of offcanvas.
The first button is used to remove the backdrop from the body element by assigning .data-bs-backdrop="false".
Also, scrolling is enabled for the body element by using data-bs-scroll="true".
The second button is used for the default offcanvas with no scrolling of <body> elements.
The third button is used to show offcanvas with backdrop and scrolling is enabled by adding data-bs-scroll="true".

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"> 
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
	
	<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
	<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
	<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>

	<div class="offcanvas offcanvas-end" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
	  <div class="offcanvas-header">
		<h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
		<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
	  </div>
	  <div class="offcanvas-body">
		<p>Try scrolling the rest of the page to see this option in action.</p>
	  </div>
	</div>
	<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
	  <div class="offcanvas-header">
		<h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
		<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
	  </div>
	  <div class="offcanvas-body">
		<p>Cannot scroll the contents</p>
	  </div>
	</div>
	<div class="offcanvas offcanvas-end" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
	  <div class="offcanvas-header">
		<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>
		<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
	  </div>
	  <div class="offcanvas-body">
		<p>Try scrolling the rest of the page to see this option in action.</p>
	  </div>
	</div>
    <div class="container-fluid justify-content-center">

		<h1>Scroll down</h1>
		<br>
		<h1>Scroll down</h1>
		<br>
		<h1>Scroll down</h1>
		<br>
		<h1>Scroll down</h1>
		<br>
		<h1>Scroll down</h1>
		<br>
		<h1>Scroll down</h1>
		<br>
		<h1>Scroll down</h1>
		<br>
		<h1>Scroll down</h1>
		<br>
		<h1>Scroll down</h1>
		<br>
		<h1>Scroll down</h1>
		<br>
		<h1>Scroll down</h1>
		<br>
		<h1>Scroll down</h1>
		<br>
		<h1>Scroll down</h1>
		<br>
		<h1>Scroll down</h1>
		<br>
		<h1>Scroll down</h1>
		<br>
		<h1>Scroll down</h1>
		<br>
		<h1>Scroll down</h1>
		<br>
		<h1>Scroll down</h1>
		<br>
		<h1>Scroll down</h1>
		<br>
		<h1>Scroll down</h1>
		<br>
		<h1>Scroll down</h1>
		<br>
		<h1>Scroll down</h1>
		<br>
		<h1>Scroll down</h1>
		<br>
		<h1>Scroll down</h1>
		<br>
		<br>
	</div>
</body>
</html>

Output:

Scrolling and backdrop

Conclusion

Here we have learned to create a offcanvas using Bootstrap 5. Offcanvas are a very useful component and can be used for the navigation bar. The offcanvas can be placed on any side of the screen. We can also enable the background scrolling of the elements by adding attributes to the default class.

C TUTORIAL

C PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

C++ TUTORIAL

C++ PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

PYTHON TUTORIAL

PYTHON HOW TOS

INTERVIEW TESTS

EXECUTE CODE

JAVA TUTORIAL

JAVA CODE EXAMPLES

SPRING TUTORIAL

MORE IN JAVA

COMPUTER ARCHITECTURE

COMPUTER NETWORK

OPERATING SYSTEM

DBMS & SQL

PL/SQL

MongoDB

EXECUTE SQL

ANDROID DEVELOPMENT

GO LANGUAGE

LINUX

DOCKER

HTML TAGS (A to Z)

CSS REFERENCES

SASS/SCSS

KOTLIN

GAME DEVELOPMENT

PHP

GIT GUIDE

JAVASCRIPT

ADVANCED DSA

Bootstrap Offcanvas

Creating an Offcanvas

Example: Creating an Offcanvas using Bootstrap 5

Output:

Offcanvas Placement

Example: Placing the Canvas to the Top of the screen

Output:

Offcanvas Backdrop

Example: Enabling scroll and toggling backdrop on the offcanvas

Output:

Conclusion