How do I implement an offcanvas sidebar navigation in Bootstrap 5?

Asked on Jun 01, 2025

1 Answer

To implement an offcanvas sidebar navigation in Bootstrap 5, you can use the `offcanvas` component which allows you to create a hidden sidebar that can be toggled on and off.

<!-- BEGIN COPY / PASTE -->
        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSidebar" aria-controls="offcanvasSidebar">
            Toggle Sidebar
        </button>

        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasSidebar" aria-labelledby="offcanvasSidebarLabel">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="offcanvasSidebarLabel">Sidebar</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <ul class="list-unstyled">
                    <li><a href="#" class="nav-link">Home</a></li>
                    <li><a href="#" class="nav-link">About</a></li>
                    <li><a href="#" class="nav-link">Services</a></li>
                    <li><a href="#" class="nav-link">Contact</a></li>
                </ul>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `button` element with `data-bs-toggle="offcanvas"` is used to trigger the sidebar.
The `offcanvas` component is defined with `offcanvas-start` to make it appear from the left.
Ensure that Bootstrap's JavaScript is included in your project for the offcanvas functionality to work.
Customize the sidebar content by modifying the list items or adding additional HTML elements as needed.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions