Bootstrap

How to create an Offcanvas Sidebar in Bootstrap 5

Offcanvas is a bootstrap 5 plugin for a sidebar menu that appears on the screen from left, right, or bottom as per user requirements. Offcanvas can be used as a secondary menu or the main menu as well and it can be triggered by a button or a link. When the off-canvas sidebar is triggered it blocks the page from any kind of interaction because when the menu reveals itself the page hides behind it.

This article will provide a detailed guide on:

How to Create Offcanvas Sidebar

To create an offcanvas sidebar, add .offcanvas class in a div tag with its position of revealing .offcanvas-start and a unique id. Afterwards, wrap this div around a div with the class .offcanvas-header which contains the sidebar title with its dismissal button and a div with the class .offcanvas-body which contains the content of the sidebar.

Lastly, to trigger the offcanvas sidebar use data-bs-toggle=”offcanvas” and data-bs-target=”#id” to connect the sidebar with a button or a link which on clicking reveals the offcanvas sidebar:

Code

<div class="offcanvas offcanvas-start" id="oc">
        <div class="offcanvas-header">
          <h1 class="offcanvas-title">Menu</h1>
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body">
          <div class="row">
            <div class="list-group">
                <a class="list-group-item list-group-item-action active" href="#">Home</a>
                <a class="list-group-item list-group-item-action" href="#">About</a>
                <a class="list-group-item list-group-item-action" href="#">Product</a>
                <a class="list-group-item list-group-item-action" href="#">Contact Us</a>
                <a class="list-group-item list-group-item-action" href="#">Settings</a>
              </div>
          </div>
        </div>
      </div>
     
      <div class="container mt-3">
        <h3>Offcanvas Sidebar</h3>
        <p>Button Below Will Open Offcanvas Sidebar.</p>
        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#oc">
            Open
        </button>
      </div>

This is how you create an offcanvas sidebar in bootstrap 5.

Offcanvas Positions

Offcanvas sidebar can be revealed from any edge of the screen as per user requirement. To specify the offcanvas position, just add .offcanvas-start/end/top/bottom class with .offcanvas class.

Start

.offcanvas-start class will reveal the sidebar from the left side of the page.

<div class="offcanvas offcanvas-start" id="start">

End

.offcanvas-end class will reveal the sidebar from the right side of the page.

<div class="offcanvas offcanvas-end" id="end">

Top

.offcanvas-top class will reveal the sidebar from the top side of the page.

<div class="offcanvas offcanvas-top" id="top">

Bottom

.offcanvas-bottom class will reveal the sidebar from the bottom side of the page.

<div class="offcanvas offcanvas-bottom" id="bottom">

Conclusion

Offcanvas sidebar is created by adding .offcanvas class to a div. Then add .offcanvas-start/end/top/bottom to specify the sidebar position and id attribute to give the sidebar a unique id. Afterwards wrap this div around a div with the class .offcanvas-header which contains the sidebar title with its dismissal button and a div with the class .offcanvas-body which contains the content of the sidebar. Now to trigger the offcanvas sidebar use data-bs-toggle=”offcanvas” and data-bs-target=”#id” to connect the sidebar with a button or a link which on clicking reveals the offcanvas sidebar.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.