Skip to main content

Offcanvas in Bootstrap 5

Bootstrap Offcanvas​

Bootstrap offers an Offcanvas component that allows you to display content in a sidebar that can be toggled on and off.

Here's how you can create an Offcanvas in Bootstrap:

  • Create a button to toggle the Offcanvas:
<button
     class="btn btn-primary"
     type="button"
     data-bs-toggle="offcanvas"
     data-bs-target="#offcanvasExample"
     aria-controls="offcanvasExample"
>
     Toggle Offcanvas
</button>

In this example:

  • The data-bs-toggle attribute tells Bootstrap to toggle an Offcanvas component, and the data-bs-target attribute specifies the ID of the Offcanvas container.
  • Create an Offcanvas container:
<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">
          <p>Some content goes here...</p>
     </div>
</div>

In this example:

  • The offcanvas class specifies that this is an Offcanvas component.
  • The offcanvas-start class specifies that the Offcanvas should be positioned on the left side of the screen.
  • The tabindex="-1" attribute makes the Offcanvas focusable when it is open.
  • The aria-labelledby attribute points to the h5 element that labels the Offcanvas.
  • The btn-close class creates a close button for the Offcanvas.
  • Include the Bootstrap CSS and JavaScript files:
<link
     rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
tip

Make sure to include these files before the code that creates the Offcanvas.

Example​

Editor

Loading...

In this example:

  • We first include the Bootstrap 5 CSS file and set up a basic navbar with a toggle button for the Offcanvas.
  • Then, we create an Offcanvas container with an ID of offcanvasExample and set the offcanvas-start class to position it on the left side of the screen.
  • Inside the Offcanvas, we have an offcanvas-header and an offcanvas-body.
  • The offcanvas-title sets the title of the Offcanvas, and the btn-close class creates a close button.
  • The offcanvas-body is where we can add any HTML content.

Offcanvas Position​

The Bootstrap offcanvas can be positioned on either the left or the right side of the screen, depending on the specific needs of your project.

To position the offcanvas, you can use the offcanvas-start or offcanvas-end classes.

If you want the offcanvas to slide in from the left side of the screen, use the offcanvas-start class:

<div class="offcanvas offcanvas-start">
     <!-- offcanvas content here -->
</div>

If you want the offcanvas to slide in from the right side of the screen, use the offcanvas-end class:

<div class="offcanvas offcanvas-end">
     <!-- offcanvas content here -->
</div>

Offcanvas top and bottom​

The Bootstrap offcanvas component is designed to slide in from either the left or the right side of the screen, and does not include built-in support for top or bottom positions.

However, you can still achieve similar functionality by using custom CSS.

To create an offcanvas that slides in from the top of the screen.

You can use the following code:

<div class="offcanvas offcanvas-top">
     <!-- offcanvas content here -->
</div>

<style>
     .offcanvas-top {
          position: absolute;
          top: 0;
          bottom: auto;
          left: 0;
          right: 0;
          transform: translateY(-100%);
     }
</style>

Similarly, to create an offcanvas that slides in from the bottom of the screen.

You can use the following code:

<div class="offcanvas offcanvas-bottom">
     <!-- offcanvas content here -->
</div>

<style>
     .offcanvas-bottom {
          position: absolute;
          top: auto;
          bottom: 0;
          left: 0;
          right: 0;
          transform: translateY(100%);
     }
</style>
tip

You may need to adjust the transform value to control the direction and speed of the animation.

Dark OffCanvas Menu​

To create a dark-themed offcanvas menu in Bootstrap, you can use the built-in utility classes to apply custom styles to the offcanvas container and its contents.

As an example:

<!-- Button trigger offcanvas -->
<button
     type="button"
     class="btn btn-primary"
     data-bs-toggle="offcanvas"
     data-bs-target="#myOffcanvas"
>
     Open Offcanvas
</button>

<!-- Offcanvas -->
<div
     class="offcanvas offcanvas-start bg-dark text-white"
     tabindex="-1"
     id="myOffcanvas"
     aria-labelledby="myOffcanvasLabel"
>
     <div class="offcanvas-header">
          <h5 class="offcanvas-title text-white" id="myOffcanvasLabel">
               My Offcanvas
          </h5>
          <button
               type="button"
               class="btn-close text-reset"
               data-bs-dismiss="offcanvas"
               aria-label="Close"
          ></button>
     </div>
     <div class="offcanvas-body">
          <ul class="nav flex-column">
               <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#"
                         >Home</a
                    >
               </li>
               <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
               </li>
               <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
               </li>
          </ul>
     </div>
</div>

In this example:

  • We've added the bg-dark and text-white classes to the offcanvas container to apply a dark background and white text.
  • We've also added the text-white class to the offcanvas title to make it visible against the dark background.