Bootstrap - Offcanvas

Quiz

This chapter discusses about the component offcanvas. The offcanvas component in Bootstrap is a feature that allows you to create a sliding panel or sidebar that can be revealed or hidden on the side of the viewport.

It is typically used for creating navigation menus, content panels, or additional information that can be temporarily displayed without taking up the full screen space.

Overview

Listed below are key features of Bootstrap offcanvas component:

Activation: The offcanvas component is typically activated by a toggle button or a link that triggers the opening and closing of the offcanvas panel. This can be achieved using JavaScript or data attributes.
Placement: The offcanvas panel can be positioned on the left, right, top or bottom of the viewport, based on your design requirements.
Content: You can place any HTML content inside the offcanvas panel, including navigation menus, text, images, forms, or other components.
Accessibility: Bootstrap ensures that the offcanvas component is accessible to screen readers and keyboard navigation, making it compliant with accessibility standards.
Responsive behavior: The offcanvas component is responsive by default, adapting to different screen sizes. On smaller screens, it can be made full-screen or allow scrolling within the offcanvas panel.
Events: Bootstrap provides JavaScript events that can be used to customize the behavior of the offcanvas component, such as executing code when the panel opens or closes.

It simplifies the creation of sliding panels and helps improve the user experience on mobile devices, providing a clean and efficient way to present additional content or navigation options without cluttering the main screen.

Note: Only one offcanvas can be shown at a time, like modals.

Offcanvas components

The following components work together to create the offcanvas functionality in Bootstrap, allowing you to create sliding panels that reveal additional content or navigation options when triggered by a toggle button or link:

Toggle button or trigger element
Offcanvas panel container
Offcanvas panel
Offcanvas placement
Close button
Javascript and data attributes

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Offcanvas</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
		<h4 class="text-success text-start">Offcanvas component</h4>
		<div class="container">
		<button class="btn btn-success" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas">
            Open offcanvas
        </button>
    	</div>
      <div class="offcanvas offcanvas-end" id="offcanvas">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">
                Offcanvas title
            </h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <p>This is an offcanvas component of Bootstrap, which is similar to a modal in functionality.</p>
        </div>
	    </div>
    </div>
  </body>
</html>

Live demo

An offcanvas component can be shown or hidden based on:

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

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Offcanvas</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
		<h4 class="text-success text-start">Offcanvas component live demo</h4>
		  <button class="btn btn-primary" type="button" id="trigger-btn" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
			Button click
		  </button>

		  <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
			<div class="offcanvas-header">
			  <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas Title</h5>
			  <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
			</div>
			<div class="offcanvas-body">
			  <div>
				The Offcanvas component provides a convenient way to create responsive and mobile-friendly layouts. When triggered, the offcanvas panel slides into view from either the left or right side of the screen, depending on the placement chosen. It overlays the main content, pushing it aside, and provides a smooth transition effect.
			  </div>
			</div>
		  </div>
    </div>
	  <script>
		  //New instance of the collapse element is created
	  	  var offcanvasElement = document.getElementById("offcanvasExample");
	  	  var offcanvas = new bootstrap.Offcanvas(offcanvasElement);

		    let button = document.getElementById("trigger-btn");
	  	  button.addEventListener("click", () => {
		    return offcanvas.show();
		    ;
	 	  });
    </script>
  </body>
</html>

Body scrolling

When an offcanvas and its backdrop are visible, the scrolling of the <body> element is prohibited. To enable scrolling for the <body> element, you can utilize the data-bs-scroll attribute.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Offcanvas</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="sidebar" aria-labelledby="offcanvasStartLabel">
        <div class="offcanvas-header">
            <h1 id="offcanvasStartLabel">Offcanvas</h1>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <hr>
        <div class="offcanvas-body">
            <h5>Enable body Scrolling</h5>
            <h5><p>Bootstrap provides features to scroll the page when offcanvas and the backdrop are visible.</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 Scrolling Enable</button>
        <center>
          <img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="400">
            <h3>Example for body scrolling in offcanvas component</h3>
            <h4>
              A website for all the tech-savvy people.
             </h4>
            <h3>
              Welcome to tutorials point
              Welcome to tutorials point
            </h3>
            <h4>
			        A website for all the tech-savvy people.
            </h4>
            <h3>
			        Welcome to tutorials point
			        Welcome to tutorials point
            </h3>
			    <img src="/bootstrap/images/profile.jpg" alt="GFG" width="600" height="400">
        </center>
    </div>
</body>
</html>

Body scrolling and backdrop

You can enable <body> scrolling with visible backdrop.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Offcanvas</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Enable backdrop with scrolling</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
		<hr>
        <div class="offcanvas-body">
            <h5><p>Bootstrap provides features to scroll the page  and the backdrop are visible.</p></h5>
			<img src="/bootstrap/images/profile.jpg" alt="GFG" width="200" height="200">
            <h3>Example for body scrolling in offcanvas component</h3>
            <h4>
              A website for all the tech-savvy people.
             </h4>
            <h3>
              Welcome to tutorials point
              Welcome to tutorials point
            </h3>
            <h4>
			  A website for all the tech-savvy people.
            </h4>
            <h3>
			  Welcome to tutorials point
			  Welcome to tutorials point
            </h3>
			<img src="/bootstrap/images/profile.jpg" alt="GFG" width="200" height="200">
        </div>
    </div>
    <div class="container mt-3">
        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasStart">Enabled scrolling with backdrop</button>
        <center>
          <img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="400">
            <h3>Example for body scrolling in offcanvas component</h3>
            <h4>
              A website for all the tech-savvy people.
             </h4>
            <h3>
              Welcome to tutorials point
              Welcome to tutorials point
            </h3>
            <h4>
			        A website for all the tech-savvy people.
            </h4>
            <h3>
			        Welcome to tutorials point
			        Welcome to tutorials point
            </h3>
			    <img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="400">
            </center>
    </div>
</body>
</html>

Static backdrop

The offcanvas component will not close on clicking out of it, when the backdrop is set to static.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Offcanvas</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/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="#staticBackdrop" aria-controls="staticBackdrop">
			Static Offcanvas
		  </button>
		  <div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
			<div class="offcanvas-header">
			  <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
			  <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
			</div>
			<div class="offcanvas-body">
			  <div>
				The offcanvas component will not get closed when you click outside it.
			  </div>
			</div>
		  </div>
          <center>
          <img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="400">
            <h3>Example for body scrolling in offcanvas component</h3>
            <h4>
              A website for all the tech-savvy people.
            </h4>
            <h3>
              Welcome to tutorials point
              Welcome to tutorials point
            </h3>
            <h4>
      				A website for all the tech-savvy people.
            </h4>
            <h3>
			        Welcome to tutorials point
			        Welcome to tutorials point
            </h3>
            <img src="/bootstrap/images/tutimg.png" alt="GFG" width="600" height="400">
          </center>
    </div>
</body>
</html>

Dark offcanvas

The use of dark variants for components has been deprecated in v5.3.0 due to the implementation of color modes. Rather than manually including the aforementioned classes, it is recommended to apply the data-bs-theme="dark" attribute to either the root element, a parent wrapper, or the component itself.

Responsive

Offcanvas classes that are responsive, conceal content beyond the viewport starting from a designated breakpoint and downwards. On the other hand, the content behaves normally above that breakpoint. For instance, with the .offcanvas-lg class, the content situated below the lg breakpoint is hidden in an offcanvas, whereas it is visible above that breakpoint.

Note:You need to resize your browser to see the responsive behavior of offcanvas.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Offcanvas</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
		<h4 class="text-success text-start">Responsive offcanvas</h4>
		<div class="container">
			<button class="btn btn-success d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Show offcanvas</button>
			<div class="alert alert-warning d-none d-lg-block">Resize your screen / viewport to show the responsive offcanvas.</div>
			<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
			  <div class="offcanvas-header">
				<h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
				<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
			  </div>
			  <div class="offcanvas-body">
				<p class="mb-0">This content can be verified when the screen size is below the breakpoint lg (.offcanvas-lg).</p>
			  </div>
			</div>
		</div>
    </div>
  </body>
</html>

Classes for responsive offcanvas are accessible at every breakpoint.

.offcanvas
.offcanvas-sm
.offcanvas-md
.offcanvas-lg
.offcanvas-xl
.offcanvas-xxl

Placement

You must add one of the modifier classes, to add a placement to the offcanvas component, as there is no default placement for it.

Following are the placement options available:

.offcanvas-start - It places offcanvas on the left of the viewport.
.offcanvas-end - It places offcanvas on the right of the viewport.
.offcanvas-top - It places offcanvas at the top of the viewport.
.offcanvas-bottom - It places offcanvas at the bottom of the viewport.

Let us see an example for placement - top::

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Offcanvas</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
		<h4 class="text-success text-start">Offcanvas placement - Top</h4>
    <p>Resize the viewport size to see the offcanvas</p>
		<div class="container">
			<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Top offcanvas</button>
			<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  			<div class="offcanvas-header text-bg-primary">
    		<h5 class="offcanvas-title" id="offcanvasTopLabel">Top offcanvas</h5>
    		<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  			</div>
  			<div class="offcanvas-body bg-primary-subtle">
				<p>This is an example for an offcanvas whose placement is at the top of the viewport.</p>
  			</div>
			</div>
		</div>
    </div>
  </body>
</html>

Let us see an example for placement - right:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Offcanvas</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
		<h4 class="text-success text-start">Offcanvas placement - Right</h4>
		<div class="container">
			<button class="btn btn-success" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Right offcanvas</button>
			<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  			<div class="offcanvas-header text-bg-success">
    		<h5 class="offcanvas-title" id="offcanvasRightLabel">Right offcanvas</h5>
    		<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  			</div>
  			<div class="offcanvas-body bg-success-subtle">
				<p>This is an example for an offcanvas whose placement is at the right of the viewport.</p>
  			</div>
			</div>
		</div>
    </div>
  </body>
</html>

Let us see an example for placement - bottom:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Offcanvas</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container mt-3">
		<h5 class="text-dark text-start">Offcanvas placement - Bottom</h5>
    <p>Resize the viewport size to see the offcanvas</p>
		<div class="container">
			<button class="btn btn-danger" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Bottom offcanvas</button>
			<div class="offcanvas offcanvas-bottom" data-bs-scroll="true" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  			<div class="offcanvas-header text-bg-danger">
    		<h5 class="offcanvas-title" id="offcanvasBottomLabel">Bottom offcanvas</h5>
    		<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  			</div>
  			<div class="offcanvas-body bg-danger-subtle">
				<p>This is an example for an offcanvas whose placement is at the bottom of the viewport.</p>
  			</div>
			</div>
		</div>
    </div>
  </body>
</html>

Accessibility

Make sure to include aria-labelledby="..." in .offcanvas, referring to the offcanvas title, since the offcanvas panel is similar to a modal dialog in concept. It's worth noting that you don't have to add role="dialog" as it is automatically added through JavaScript.

Print Page