Offcanvas component makes this straightforward to implement, but there are real nuances around placement, accessibility, responsive behaviour, and styling that developers routinely overlook. This guide walks through everything you need to build a polished bootstrap offcanvas sidebar from scratch, including keyboard focus management, custom CSS variables, and how it fits inside a template like the Canvas HTML Template.
Key Takeaways
- Bootstrap 5’s Offcanvas component requires no additional JavaScript libraries — it ships with Bootstrap’s JS bundle.
- Placement options (
offcanvas-start,offcanvas-end,offcanvas-top,offcanvas-bottom) control which edge the panel slides from. - The
data-bs-scrollanddata-bs-backdropattributes control body scrolling and overlay behaviour independently. - Accessible sidebar navigation requires a matching
aria-controls/idpair and a visible close button. - CSS custom properties make it trivial to theme the sidebar to match your brand without touching Bootstrap’s source.
- Responsive breakpoint logic lets you show the sidebar permanently on desktop and toggle it on mobile.
How Bootstrap 5 Offcanvas Works
Bootstrap’s Offcanvas component is a panel that slides in from any edge of the viewport. Unlike a modal, it does not centre itself — it anchors to a screen edge and pushes (or overlays) the page content. It is driven entirely by data attributes and a small JavaScript initialisation, which means zero custom JS is required for basic use.
The core markup pattern is a trigger element and a target panel:
- A trigger button with
data-bs-toggle="offcanvas"anddata-bs-target="#sidebarNav". - A panel
<div>withclass="offcanvas offcanvas-start"and the matchingid. - A close button inside the panel using
data-bs-dismiss="offcanvas".
Bootstrap handles the show / hide class toggling, the backdrop insertion into the DOM, and ARIA attribute updates automatically. For a broader look at when this component is the right choice, see our post on Bootstrap 5 Offcanvas Menu: When and How to Use It.
Basic Sidebar Navigation HTML Structure
Below is a minimal but complete sidebar navigation HTML implementation. The sidebar slides in from the left (offcanvas-start) and contains a logo area, a nav list, and a close button.
<!-- Trigger button (e.g. in your header) -->
<button class="btn btn-primary"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#sidebarNav"
aria-controls="sidebarNav">
☰ Menu
</button>
<!-- Offcanvas sidebar panel -->
<div class="offcanvas offcanvas-start"
tabindex="-1"
id="sidebarNav"
aria-labelledby="sidebarNavLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="sidebarNavLabel">Navigation</h5>
<button type="button"
class="btn-close"
data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<nav>
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link active" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/about">About</a></li>
<li class="nav-item"><a class="nav-link" href="/services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
</ul>
</nav>
</div>
</div>
Key structural points:
tabindex="-1"on the panel ensures screen readers treat it as a focus target when opened.aria-labelledbylinks the panel to its visible title for assistive technologies..nav.flex-columnstacks links vertically using Bootstrap utility classes.
Controlling Backdrop and Body Scroll
Two data attributes give you precise control over the user experience when the sidebar is open:
data-bs-backdrop="true"(default) — renders a semi-transparent overlay behind the panel. Set to"false"to remove it, useful for persistent sidebars in app layouts.data-bs-scroll="false"(default) — locks the<body>scroll when the panel is open. Set to"true"to allow the page to scroll behind the sidebar.
For a dashboard-style layout where the sidebar sits permanently beside the content on desktop, you typically want data-bs-backdrop="false" and data-bs-scroll="true":
<div class="offcanvas offcanvas-start"
data-bs-backdrop="false"
data-bs-scroll="true"
tabindex="-1"
id="sidebarNav"
aria-labelledby="sidebarNavLabel">
<!-- panel content -->
</div>
Making the Sidebar Permanent on Desktop, Toggle on Mobile
A common pattern is to show the sidebar permanently at the lg breakpoint and above, using the offcanvas toggle only on smaller screens. Bootstrap does not provide a built-in responsive offcanvas class (unlike the Navbar collapse), but you can achieve this with a small amount of CSS:
<!-- Only show trigger on mobile -->
<button class="btn btn-primary d-lg-none"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#sidebarNav"
aria-controls="sidebarNav">
☰ Menu
</button>
<div class="offcanvas offcanvas-start d-lg-block"
tabindex="-1"
id="sidebarNav"
aria-labelledby="sidebarNavLabel">
<!-- panel content -->
</div>
<!-- In your stylesheet -->
<style>
@media (min-width: 992px) {
#sidebarNav {
position: relative;
transform: none !important;
visibility: visible !important;
width: 260px;
border-right: 1px solid var(--bs-border-color);
}
.offcanvas-backdrop {
display: none !important;
}
}
</style>
By overriding transform and visibility at the large breakpoint, the panel becomes a static sidebar column while retaining full offcanvas behaviour on mobile. This mirrors common patterns in app dashboards and admin templates. For layout composition tips, the post on Bootstrap 5 Columns and Gutters: Advanced Layout Techniques covers complementary grid strategies.
Custom Styling with CSS Variables
Bootstrap 5’s Offcanvas component exposes several CSS custom properties you can override locally without touching _variables.scss:
<style>
#sidebarNav {
--bs-offcanvas-width: 280px;
--bs-offcanvas-bg: #1a1a2e;
--bs-offcanvas-color: #e0e0e0;
--bs-offcanvas-border-color: transparent;
--bs-offcanvas-padding-x: 1.5rem;
--bs-offcanvas-padding-y: 1.5rem;
}
#sidebarNav .nav-link {
color: var(--bs-offcanvas-color);
padding: 0.6rem 0;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
#sidebarNav .nav-link:hover,
#sidebarNav .nav-link.active {
color: #ffffff;
background: rgba(255,255,255,0.08);
border-radius: 4px;
padding-left: 0.5rem;
}
</style>
When working inside a premium template like Canvas, you can align the sidebar to your brand palette using the --cnvs-themecolor variable rather than hardcoding hex values. For a full walkthrough of Canvas’s theming system, see Customising Canvas Template Colours and Fonts in Canvas Builder.
JavaScript API and Programmatic Control
For more advanced interactions — opening the sidebar on route change in a single-page app, or closing it after a nav link is clicked — you can use Bootstrap’s JavaScript API directly:
<script>
// Get the offcanvas instance
const sidebarEl = document.getElementById('sidebarNav');
const sidebar = bootstrap.Offcanvas.getOrCreateInstance(sidebarEl);
// Open programmatically
sidebar.show();
// Close when a nav link is clicked (useful in SPAs)
document.querySelectorAll('#sidebarNav .nav-link').forEach(link => {
link.addEventListener('click', () => sidebar.hide());
});
// Listen for fully-hidden event
sidebarEl.addEventListener('hidden.bs.offcanvas', () => {
console.log('Sidebar closed');
});
</script>
Available events include show.bs.offcanvas, shown.bs.offcanvas, hide.bs.offcanvas, and hidden.bs.offcanvas — useful for analytics tracking or animating page content in response to the sidebar state.
Accessibility Checklist for Sidebar Navigation
An offcanvas sidebar that fails accessibility checks will harm both users and SEO. Before shipping, verify the following:
- Focus trap: Bootstrap automatically traps keyboard focus inside the panel when open. Do not disable this.
- Escape key: Bootstrap closes the panel on Esc by default. Preserve this behaviour.
- ARIA roles: The panel’s
aria-labelledbymust reference a visible heading inside the panel. - Trigger label: The toggle button must have a descriptive label — avoid icon-only buttons without
aria-label. - Colour contrast: Navigation links inside a dark sidebar must meet WCAG AA contrast ratios (4.5:1 minimum for normal text).
- Active state: Use
aria-current="page"on the active link, not just the.activeCSS class.
Frequently Asked Questions
Yes. Each offcanvas panel needs a unique id, and each trigger button must reference its panel’s id via data-bs-target. Bootstrap initialises each instance independently, so multiple sidebars on the same page work without any additional configuration.
Set data-bs-backdrop="static" on the offcanvas panel element. This disables backdrop click-to-close while keeping the close button and Escape key functional. If you also want to disable Escape key closing, pass keyboard: false via the JavaScript API: new bootstrap.Offcanvas(el, { keyboard: false, backdrop: 'static' }).
offcanvas-start positions the panel on the left edge of the viewport and slides it in from the left. offcanvas-end positions it on the right edge. For RTL (right-to-left) language sites, Bootstrap automatically mirrors these placements when you set dir="rtl" on the <html> element.
Yes. Bootstrap 5 dropped jQuery as a dependency entirely. The Offcanvas component uses vanilla JavaScript and is included in bootstrap.bundle.min.js (which also bundles Popper). No third-party libraries are required.
Override the CSS transition on the .offcanvas element. For example, to slow down the slide animation: #sidebarNav { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }. Avoid setting transition: none unless the user has requested reduced motion, which you should honour via the prefers-reduced-motion media query.
Looking for a production-ready Bootstrap 5 HTML template? Browse Canvas Template demos and find the perfect starting point for your next project.
If you’re building with the Canvas HTML Template and want to ship production-ready Bootstrap 5 layouts faster, try Canvas Builder free — the visual builder that exports clean Canvas-ready markup in minutes.
Skip the setup — build it free
Spin up a complete Bootstrap 5 site, blog included, with Canvas Builder. No coding, no cost.
Canvas Team
Tutorials and tips for building beautiful Bootstrap 5 websites with the Canvas HTML Template and Canvas Builder.
More from the Canvas Blog