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

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

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

Asked on Apr 30, 2025

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.

Ask any question about Bootstrap here... and get an instant response.

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

Asked on Apr 30, 2025

Answer

The Q&A Network