{"id":376382,"date":"2026-05-13T13:26:46","date_gmt":"2026-05-13T13:26:46","guid":{"rendered":"https:\/\/colorlib.com\/wp\/?p=376382"},"modified":"2026-05-13T13:26:46","modified_gmt":"2026-05-13T13:26:46","slug":"bootstrap-offcanvas","status":"publish","type":"post","link":"https:\/\/colorlib.com\/wp\/bootstrap-offcanvas\/","title":{"rendered":"25 Free Bootstrap Offcanvas Examples (2026)"},"content":{"rendered":"<p><em>By <a href=\"https:\/\/colorlib.com\/wp\/aigars-silkalns\/\" rel=\"author\">Aigars Silkalns<\/a> \u00b7 Last updated May 13, 2026 \u00b7 17-min read<\/em><\/p>\n\n<p>Mobile navigation drawers, e-commerce cart panels, filter sidebars, notification trays, admin sidebars that flip to drawers on mobile \u2014 Bootstrap&#8217;s offcanvas component (introduced in BS 5.0 and absent from Bootstrap 4) is the foundation behind every modern web app&#8217;s slide-in chrome. This collection gathers 25 free Bootstrap 5\u2013compatible offcanvas examples covering the patterns developers actually ship: mobile menus with multi-level navigation, cart drawers with line items, faceted filter panels, notification panels, admin sidebars with avatars, settings drawers with toggle switches, and Bootstrap 5.3&#8217;s native dark-mode treatment. Every screenshot is a working BS 5.3 implementation; each example links to its original inspiration on CodePen, GitHub, or the Bootstrap docs for those who want to fork or compare. If you&#8217;re migrating from Bootstrap 4 custom drawers, rebuilding a mobile menu, or hunting for a specific offcanvas pattern, start here.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"what-is\">What is a Bootstrap offcanvas?<\/h2>\n\n<p>A Bootstrap offcanvas is a hidden sidebar that slides into view when triggered \u2014 used for mobile navigation drawers, ecommerce cart panels, filter sidebars, and notification trays. Bootstrap 5 introduced offcanvas as a native component (it was not available in Bootstrap 4), making slide-in UI patterns possible without custom JavaScript.<\/p>\n\n<p><strong>When to use offcanvas:<\/strong><\/p>\n\n<ul><li>Mobile navigation menus that need more space than a hamburger dropdown allows<\/li><li>Shopping cart drawers in ecommerce flows<\/li><li>Filter and faceted-search panels on catalog pages<\/li><li>Secondary navigation in admin dashboards<\/li><\/ul>\n\n<p><strong>Bootstrap 5 offcanvas vs Bootstrap 4:<\/strong> Bootstrap 4 had no offcanvas component, so developers built custom solutions using <code>position: fixed<\/code>, <code>transform<\/code>, and jQuery. Bootstrap 5 ships the component natively at <code>bootstrap.Offcanvas<\/code> with built-in placement options (start, end, top, bottom), backdrop behavior, body-scroll lock, and ARIA-compliant focus management. Migrations from Bootstrap 4 to 5 should replace custom slide-out menus with the native component.<\/p>\n\n<p><strong>Browser support:<\/strong> All modern browsers (Chrome, Safari, Firefox, Edge) since 2021. All 25 examples below were tested in Chrome 124, Safari 17, and Firefox 125 on May 2026.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"how-to-use\">How to use Bootstrap offcanvas (basic markup)<\/h2>\n\n<pre class=\"wp-block-code\"><code class=\"language-html\">&lt;!-- Trigger --&gt;\n&lt;button class=\"btn btn-primary\"\n        data-bs-toggle=\"offcanvas\"\n        data-bs-target=\"#mobileMenu\"\n        aria-controls=\"mobileMenu\"&gt;\n  Open menu\n&lt;\/button&gt;\n\n&lt;!-- Offcanvas --&gt;\n&lt;div class=\"offcanvas offcanvas-start\" tabindex=\"-1\" id=\"mobileMenu\" aria-labelledby=\"mobileMenuLabel\"&gt;\n  &lt;div class=\"offcanvas-header\"&gt;\n    &lt;h5 class=\"offcanvas-title\" id=\"mobileMenuLabel\"&gt;Menu&lt;\/h5&gt;\n    &lt;button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\"&gt;&lt;\/button&gt;\n  &lt;\/div&gt;\n  &lt;div class=\"offcanvas-body\"&gt;\n    &lt;!-- nav links go here --&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n<p><strong>Placement modifiers:<\/strong> Swap <code>offcanvas-start<\/code> for <code>offcanvas-end<\/code>, <code>offcanvas-top<\/code>, or <code>offcanvas-bottom<\/code>.<\/p>\n\n<p><strong>Common gotcha:<\/strong> Without <code>tabindex=\"-1\"<\/code>, focus management breaks for keyboard users. Don&#8217;t omit it.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"examples\">Best free Bootstrap offcanvas examples<\/h2>\n\n<p>We grouped the 25 picks by use case rather than ranking them \u2014 every example below is a viable production starting point. Each screenshot shows our Bootstrap 5.3 implementation of the pattern, inspired by the original designer credited beneath. The &#8220;Original demo&#8221; link goes to the source pen or repository for those who want to fork, compare implementations, or see the author&#8217;s specific code style.<\/p>\n\n<p><strong>Showcase \u2014 visually distinctive offcanvas designs<\/strong><\/p>\n\n<h3 class=\"wp-block-heading\">1. Bootstrap 5 Live Offcanvas Demo<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-live-demo-by-bootstrap.jpg\" alt=\"Bootstrap 5 live offcanvas \u2014 left drawer with header, close button, body text, and dropdown placeholder\" \/><\/figure>\n<p>The canonical Bootstrap 5 offcanvas \u2014 left-sliding drawer with header (title + close button), body content, and a nested dropdown placeholder. Best fit as the baseline for any project: this is the markup every other offcanvas pattern in this collection builds on. Pure Bootstrap 5.3 with the JavaScript bundle for the offcanvas controller. Initialize via <code>new bootstrap.Offcanvas(el)<\/code> or use the data-attribute trigger (<code>data-bs-toggle=\"offcanvas\"<\/code> + <code>data-bs-target=\"#id\"<\/code>). Include <code>tabindex=\"-1\"<\/code> on the offcanvas element so keyboard focus management works correctly.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/github.com\/twbs\" rel=\"nofollow noopener\" target=\"_blank\">Bootstrap (twbs)<\/a> \u00b7 License: MIT<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/offcanvas\/#live-demo\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/offcanvas\/#live-demo\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">2. Mega Menu Offcanvas<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-mega-menu-by-ktmthemes.jpg\" alt=\"Mega menu offcanvas \u2014 multi-column layout with Men, Women, Sale categories and a Spring 2026 promo card\" \/><\/figure>\n<p>Mega-menu dropdowns inside an offcanvas drawer \u2014 multi-column layout (Men, Women, Sale) plus a promo card in the fourth column, the layout most e-commerce sites use for primary navigation. Best fit for retail, marketplaces, and any catalog site whose top-level taxonomy has many sub-categories. Pure Bootstrap 5.3 utility classes (<code>row<\/code>, <code>col-md-3<\/code>) inside <code>.offcanvas-top<\/code> for a full-width slide-down panel. The promo card is a gradient background with white text \u2014 swap for a category hero image in production. Position the offcanvas below a fixed navbar via <code>top: 60px<\/code> custom inline style.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/ktmthemes\" rel=\"nofollow noopener\" target=\"_blank\">ktmthemes<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/ktmthemes\/pen\/YzrqPmY\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/ktmthemes\/pen\/YzrqPmY\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">3. Chat Layout with Persistent Drawer<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-chat-by-ahmetmtl.jpg\" alt=\"Chat layout with persistent left offcanvas \u2014 Messages header, search input, four conversation rows with avatars and timestamps\" \/><\/figure>\n<p>Full chat UI with a persistent left offcanvas conversation list \u2014 Messages header, search input, and four conversation rows showing avatars, names, message previews, and timestamps. Best fit for messaging apps, support tools, and any product where the conversation list is a permanent fixture rather than a temporary drawer. Pure Bootstrap 5 markup with a custom <code>data-bs-scroll=\"true\"<\/code> attribute so the main content area scrolls independently. The active conversation row uses <code>.active<\/code> with a light blue background for clear selection state.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/Ahmetmtl\" rel=\"nofollow noopener\" target=\"_blank\">Ahmetmtl<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/Ahmetmtl\/pen\/wvpOxEX\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/Ahmetmtl\/pen\/wvpOxEX\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">4. Push Effect Offcanvas<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-push-effect-by-yohn.jpg\" alt=\"Push effect offcanvas \u2014 dark sidebar with Dashboard, Overview, Analytics, Team, Settings; content pushes aside instead of overlay\" \/><\/figure>\n<p>Push effect offcanvas \u2014 page content shifts right rather than being overlaid by a backdrop, mimicking the Material Design &#8220;permanent drawer&#8221; pattern. Best fit for productivity tools (Linear, Notion, Slack) where the sidebar IS the navigation rather than a temporary overlay. Custom CSS layered on top of Bootstrap&#8217;s collapse API; uses <code>data-bs-theme=\"dark\"<\/code> for the dark sidebar variant. The push effect requires the main content area to be a flex sibling of the offcanvas \u2014 wrap both in <code>display: flex<\/code> and the offcanvas&#8217;s width pushes the content rather than overlapping it.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/Yohn\" rel=\"nofollow noopener\" target=\"_blank\">Yohn<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/Yohn\/pen\/GRbZWvm\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/Yohn\/pen\/GRbZWvm\">Original demo<\/a><\/p>\n\n<p><strong>Mobile navigation drawers<\/strong><\/p>\n\n<h3 class=\"wp-block-heading\">5. Mobile Drawer Navigation<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-mobile-drawer-by-bootstrap.jpg\" alt=\"Mobile drawer navigation \u2014 left-side menu with Home, Shop, About, Contact links plus Sign in and Sign up buttons\" \/><\/figure>\n<p>Mobile drawer navigation triggered by a hamburger button \u2014 primary nav links with Bootstrap Icons, a theme switcher, and Sign in \/ Sign up CTAs in the footer. Best fit for content sites, marketing pages, and any site whose mobile menu needs more space than a dropdown allows. Pure Bootstrap 5 markup with <code>.offcanvas-start<\/code> for left placement. The active nav item uses a light blue background (<code>#e7f5ff<\/code>) \u2014 adjust to match your brand. Pair with a fixed-top navbar via <code>position: fixed; top: 0<\/code> on the navbar so the hamburger stays accessible during scroll.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/github.com\/twbs\" rel=\"nofollow noopener\" target=\"_blank\">Bootstrap (twbs)<\/a> \u00b7 License: MIT<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/examples\/offcanvas-navbar\/\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/examples\/offcanvas-navbar\/\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">6. Multi-Level Slide Stack<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-slide-stack-by-codersdesign.jpg\" alt=\"Multi-level slide-stack offcanvas \u2014 three panels showing Categories \u2192 Electronics \u2192 Laptops drill-down navigation\" \/><\/figure>\n<p>Multi-level slide-stack \u2014 three side-by-side panels showing Categories \u2192 Electronics \u2192 Laptops drill-down navigation with a Back link in each child. Best fit for e-commerce sites with deep category hierarchies (Amazon, eBay, IKEA style). Each panel is a separate offcanvas instance triggered from the previous panel&#8217;s links. JavaScript handler listens for <code>show.bs.offcanvas<\/code> on the child panel to prevent the parent from auto-closing. Add <code>aria-expanded<\/code> on the active row so screen readers track the drill-down state.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/codersdesign\" rel=\"nofollow noopener\" target=\"_blank\">codersdesign<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/codersdesign\/pen\/yLXBQqz\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/codersdesign\/pen\/yLXBQqz\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">7. Nested Accordion Drawer<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-accordion-by-devanand-ale.jpg\" alt=\"Nested accordion drawer \u2014 Browse menu with Products, Services (open showing 4 items), Resources, Company sections\" \/><\/figure>\n<p>Nested accordion drawer \u2014 Browse menu with Products, Services (open showing four items), Resources, and Company sections that expand inline using native <code>&lt;details&gt;<\/code>\/<code>&lt;summary&gt;<\/code>. Best fit for deep hierarchies that fit within scroll height \u2014 documentation sites, B2B SaaS, and any product where the user needs the full taxonomy in one view. Pure HTML; no JavaScript required. The <code>&lt;details&gt;<\/code> element handles open\/close natively with keyboard support out of the box. Custom CSS overrides the default disclosure triangle with a Bootstrap-friendly + \/ \u2212 chevron.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/devanand-ale\" rel=\"nofollow noopener\" target=\"_blank\">devanand-ale<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/devanand-ale\/pen\/BdbbPL\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/devanand-ale\/pen\/BdbbPL\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">8. Right-Side End Drawer<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-right-end-by-rayvillalobos.jpg\" alt=\"Right-side end drawer \u2014 dark top navbar with hamburger trigger, drawer showing Search, Wishlist, Cart, Account quick actions\" \/><\/figure>\n<p>Right-side end drawer with quick actions \u2014 Search, Wishlist, Cart, Account \u2014 triggered from a dark navbar&#8217;s right-side hamburger. Best fit for SaaS dashboards where the user account chrome belongs on the right (Stripe, Shopify, GitHub style). Pure Bootstrap 5 with <code>.offcanvas-end<\/code> for right placement. The drawer&#8217;s nav links use the standard Bootstrap <code>.nav-link<\/code> class with Bootstrap Icons. For RTL languages, swap <code>.offcanvas-end<\/code> for <code>.offcanvas-start<\/code> \u2014 Bootstrap respects RTL automatically when <code>dir=\"rtl\"<\/code> is set on <code>&lt;html&gt;<\/code>.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/planetoftheweb\" rel=\"nofollow noopener\" target=\"_blank\">Ray Villalobos<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/planetoftheweb\/pen\/JjNmzee\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/planetoftheweb\/pen\/JjNmzee\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">9. Top Search Overlay<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-top-search-by-bootstrap.jpg\" alt=\"Top search overlay \u2014 full-width search input with five suggestion chips sliding down from viewport top\" \/><\/figure>\n<p>Top search overlay \u2014 full-width input plus five suggestion chips slides down from the viewport top via <code>.offcanvas-top<\/code>. Best fit for search-heavy sites (e-commerce, documentation, marketplaces) where Cmd+K or click-on-search-icon expands a focused search experience. Pure Bootstrap 5 with the <code>.offcanvas-top<\/code> placement. The chip suggestions use <code>.form-control-lg<\/code> for the input plus custom pill styles. For instant search, wire the input&#8217;s <code>input<\/code> event to your search-suggestions API (Algolia, Typesense) and update the chips dynamically.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/github.com\/twbs\" rel=\"nofollow noopener\" target=\"_blank\">Bootstrap (twbs)<\/a> \u00b7 License: MIT<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/offcanvas\/#placement\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/offcanvas\/#placement\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">10. Bottom Action Sheet<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-bottom-sheet-by-bootstrap.jpg\" alt=\"Bottom action sheet \u2014 share menu with Copy link, Email, X, LinkedIn options sliding up from bottom with drag handle\" \/><\/figure>\n<p>Bottom action sheet \u2014 share menu with Copy link, Email, X, LinkedIn options rises from the bottom edge via <code>.offcanvas-bottom<\/code>, mirroring native mobile share sheets. Best fit for mobile-first apps and any product where share or quick-action menus follow Material Design \/ iOS conventions. Pure Bootstrap 5 with a custom drag handle (the small pill at top center) for visual cue. Each action row uses <code>border-bottom<\/code> for separation. On native mobile, integrate with the Web Share API (<code>navigator.share()<\/code>) for system-level share, falling back to the offcanvas if unsupported.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/github.com\/twbs\" rel=\"nofollow noopener\" target=\"_blank\">Bootstrap (twbs)<\/a> \u00b7 License: MIT<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/offcanvas\/#placement\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/offcanvas\/#placement\">Original demo<\/a><\/p>\n\n<p><strong>E-commerce cart &amp; filter drawers<\/strong><\/p>\n\n<h3 class=\"wp-block-heading\">11. Cart Drawer with Line Items<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-cart-by-hamrotemplates.jpg\" alt=\"Cart drawer with three line items \u2014 Premium Theme, Component Pack Pro, Icon Library \u2014 qty steppers and $176 Checkout footer\" \/><\/figure>\n<p>Cart drawer with three line items \u2014 Premium Theme License, Component Pack Pro, Icon Library \u2014 each with thumbnail, name, qty stepper, and remove control, plus a $176 subtotal and Checkout footer button. Best fit for e-commerce sites where users add items frequently and need to verify cart contents without leaving the current page. Pure Bootstrap 5 markup with <code>.offcanvas-end<\/code> for right placement. Wire the qty steppers to your cart-update API and re-render the subtotal on each change. Persist cart state via <code>localStorage<\/code> or your backend so dismissed drawers reopen with the correct items.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/hamrotemplates\" rel=\"nofollow noopener\" target=\"_blank\">hamrotemplates<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/hamrotemplates\/pen\/KKyggpJ\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/hamrotemplates\/pen\/KKyggpJ\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">12. Filter Panel with Checkboxes<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-filter-by-iworb.jpg\" alt=\"Filter panel with checkboxes \u2014 Category, Price Range slider, and Rating filter sections with Apply and Reset buttons\" \/><\/figure>\n<p>Filter panel with checkboxes \u2014 Category, Price Range slider, Rating filter sections with Apply and Reset buttons. Best fit for e-commerce catalogs, search-result pages, and any list interface that needs faceted filtering. Pure Bootstrap 5 form classes (<code>.form-check<\/code>, <code>.form-range<\/code> coming in 5.3+) with <code>data-bs-scroll=\"true\"<\/code> so the filter panel can grow taller than the viewport without locking the page. For SPA implementations, debounce the Apply button or apply filters live as users toggle checkboxes for better UX.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/Iworb\" rel=\"nofollow noopener\" target=\"_blank\">inspired-by-iworb<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/Iworb\/pen\/YxpZma\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/Iworb\/pen\/YxpZma\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">13. Mini-Cart Preview<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-mini-cart-by-mdb.jpg\" alt=\"Mini-cart preview \u2014 three product line items with prices, quantity, remove buttons, $113 total, View cart and Continue shopping buttons\" \/><\/figure>\n<p>Mini-cart preview with three product line items \u2014 iPhone Case, USB-C Cable, Wireless Charger \u2014 each with quantity, color\/spec subtitle, price, and remove button, plus a $113 total and View cart \/ Continue shopping buttons. Best fit for compact cart previews triggered after &#8220;Add to cart&#8221; actions, where users want immediate confirmation without going to the full cart page. Pure Bootstrap 5 markup, MDBootstrap-inspired design. The &#8220;Continue shopping&#8221; button dismisses the offcanvas; &#8220;View cart&#8221; navigates to the cart page \u2014 clear two-path decision for the user.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/mdbootstrap.com\" rel=\"nofollow noopener\" target=\"_blank\">MDBootstrap<\/a> \u00b7 License: MIT<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/github.com\/mdbootstrap\/bootstrap-shopping-carts\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/mdbootstrap.com\/docs\/standard\/extended\/shopping-carts\/\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">14. Faceted Search with Range<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-faceted-by-bootscore.jpg\" alt=\"Faceted search offcanvas \u2014 color swatches, size pills (XS-XXL), price range inputs, brand checkboxes, Show 247 results button\" \/><\/figure>\n<p>Faceted search with color swatches, size pills, price range inputs, and brand checkboxes \u2014 the production e-commerce filter pattern with explicit Show 247 results button. Best fit for fashion, apparel, and any catalog with rich attribute filtering. Pure Bootstrap 5 markup with custom swatch and pill styles. Color swatches use <code>border-radius: 50%<\/code> with active state via <code>box-shadow<\/code> ring (avoids the harsh black border most implementations use). Size pills toggle between selected\/unselected via active class. Update result count as filters change for tight user feedback.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/github.com\/bootscore\" rel=\"nofollow noopener\" target=\"_blank\">bootscore<\/a> \u00b7 License: MIT<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/github.com\/bootscore\/bootscore\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/github.com\/bootscore\/bootscore\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">15. Wishlist Drawer<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-wishlist-by-bootscore-pattern.jpg\" alt=\"Wishlist drawer with four saved items \u2014 Nordic Lamp, Cotton Throw, Espresso Maker, Wool Slippers with Add-to-cart buttons\" \/><\/figure>\n<p>Wishlist drawer with four saved items \u2014 heart-toggled product cards showing name, price, and Add-to-cart button for each. Best fit for e-commerce with save-for-later functionality, especially products with longer consideration cycles (furniture, electronics, fashion). Pure Bootstrap 5 markup with custom item layout. Each item&#8217;s heart icon uses <code>.text-danger<\/code> for the saved state; clicking it removes the item from wishlist. For logged-out users, persist via <code>localStorage<\/code> and sync to account on sign-in.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/github.com\/bootscore\" rel=\"nofollow noopener\" target=\"_blank\">inspired-by-bootscore<\/a> \u00b7 License: MIT<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/github.com\/bootscore\/bootscore\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/github.com\/bootscore\/bootscore\">Original demo<\/a><\/p>\n\n<p><strong>Admin &amp; dashboard panels<\/strong><\/p>\n\n<h3 class=\"wp-block-heading\">16. Admin Sidebar with Avatar<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-admin-sidebar-by-chandrashekhar.jpg\" alt=\"Admin sidebar with avatar \u2014 dark drawer with Aigars Silkalns profile, Main section (Dashboard active, Analytics, Customers, Orders), Settings section\" \/><\/figure>\n<p>Admin sidebar with avatar \u2014 dark drawer with user profile block (avatar, name, email), grouped nav items under Main and Settings section headers, and an active-state highlight on Dashboard. Best fit for admin dashboards, SaaS control panels, and any logged-in product where the sidebar is the navigation backbone. Custom dark theme (<code>#1e293b<\/code>) layered on Bootstrap&#8217;s offcanvas \u2014 the active item uses Bootstrap&#8217;s primary blue. Section dividers use small uppercase labels for grouping. Pair with a top navbar for breadcrumbs \/ search \/ user menu on the right.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/chandrashekhar\" rel=\"nofollow noopener\" target=\"_blank\">chandrashekhar<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/chandrashekhar\/pen\/yLgggmX\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/chandrashekhar\/pen\/yLgggmX\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">17. Notifications Panel<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-notifications-by-jappercat.jpg\" alt=\"Notifications panel \u2014 list of 5 notifications with avatars, timestamps, unread highlighting, and Mark all read footer\" \/><\/figure>\n<p>Notifications panel with five recent items \u2014 avatars, message previews, timestamps, and an unread highlight for the most recent three. Linear\/Twitter-style notification drawer with a Mark all read footer link. Best fit for any logged-in product with async events (comments, PR reviews, build status, mentions). Pure Bootstrap 5 with custom unread-row styling (light blue background) for visual differentiation. Reset the unread count badge on the trigger when the drawer opens (not on individual item clicks) \u2014 most products handle this via a single API call to avoid race conditions.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/JapperCat\" rel=\"nofollow noopener\" target=\"_blank\">JapperCat<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/JapperCat\/pen\/LYZoXxN\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/JapperCat\/pen\/LYZoXxN\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">18. Settings Drawer with Toggles<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-settings-by-connorabbas.jpg\" alt=\"Settings drawer with toggle switches \u2014 Appearance theme picker (Dark active), Notifications, Privacy form-switch controls\" \/><\/figure>\n<p>Settings drawer with toggle switches \u2014 Appearance theme picker (Light\/Dark\/Auto), Notifications switches (Email, Push, Marketing), Privacy controls, and a Save changes button. Best fit for any product with user preferences that don&#8217;t warrant a dedicated settings page. Pure Bootstrap 5 form classes (<code>.form-check.form-switch<\/code>) with custom section dividers. The theme picker uses pill buttons rather than radios for a more tactile feel. Each toggle has both a label and a description \u2014 the description explains what the toggle actually does, reducing support tickets.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/connorabbas\" rel=\"nofollow noopener\" target=\"_blank\">connorabbas<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/connorabbas\/pen\/gOZOogO\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/connorabbas\/pen\/gOZOogO\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">19. Responsive Sidebar offcanvas-lg<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-responsive-lg-by-cengizilhan.jpg\" alt=\"Responsive sidebar offcanvas-lg \u2014 desktop sidebar inline (Overview, Reports, Users, Settings) becomes drawer below lg breakpoint\" \/><\/figure>\n<p>Responsive sidebar via <code>.offcanvas-lg<\/code> \u2014 collapses into a drawer below the lg breakpoint (992px) but renders inline as a static sidebar on larger screens. Best fit for admin dashboards, documentation sites, and any layout where desktop users want a permanent sidebar while mobile users get a hamburger-triggered drawer. Pure Bootstrap 5.3 \u2014 the responsive class does the work automatically. No JavaScript media queries required. Pair with <code>display: flex<\/code> on the body for the desktop layout so the sidebar and main content render side-by-side without overlap.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/cengizilhan\" rel=\"nofollow noopener\" target=\"_blank\">cengizilhan<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/cengizilhan\/pen\/poxmVPr\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/cengizilhan\/pen\/poxmVPr\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">20. Dark Admin Drawer<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-dark-admin-by-bootstrap.jpg\" alt=\"Dark admin drawer with data-bs-theme=dark \u2014 Admin Console with Dashboard, Analytics, Users (2.4k badge), Orders (12 badge), Billing\" \/><\/figure>\n<p>Dark admin drawer with <code>data-bs-theme=\"dark\"<\/code> \u2014 Admin Console with Dashboard (active), Analytics, Users (2.4k badge), Orders (12 badge), Billing, plus Settings and Help. Best fit for products that ship a dark-mode option or admin tools that default to dark themes. Pure Bootstrap 5.3 \u2014 the dark theme cascade re-tints every element automatically (background, text, borders, badges). Custom CSS for the navbar hover\/active states. Pair the dark drawer with a dark navbar via <code>data-bs-theme=\"dark\"<\/code> on the body or specific containers.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/github.com\/twbs\" rel=\"nofollow noopener\" target=\"_blank\">Bootstrap (twbs)<\/a> \u00b7 License: MIT<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/offcanvas\/#dark-offcanvas\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/offcanvas\/#dark-offcanvas\">Original demo<\/a><\/p>\n\n<p><strong>Simple drop-in patterns<\/strong><\/p>\n\n<h3 class=\"wp-block-heading\">21. Basic Live Reference<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-basic-by-bootstrap.jpg\" alt=\"Basic live reference \u2014 minimal left-placement offcanvas with title and one-line body content, the smallest viable example\" \/><\/figure>\n<p>The smallest viable offcanvas \u2014 single button trigger, left-placement drawer with title and one-line body content. Best fit as a starting point: copy this markup, change the placement and content, ship it. Pure Bootstrap 5; no custom CSS or extended JavaScript. Initialize via the data-attribute API (<code>data-bs-toggle=\"offcanvas\"<\/code> + <code>data-bs-target=\"#id\"<\/code>) \u2014 no JavaScript required for basic open\/close. For programmatic control (open from a different page section, close after form submit), use the JavaScript API: <code>bootstrap.Offcanvas.getOrCreateInstance(el).toggle()<\/code>.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/github.com\/twbs\" rel=\"nofollow noopener\" target=\"_blank\">Bootstrap (twbs)<\/a> \u00b7 License: MIT<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/offcanvas\/#live-demo\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/offcanvas\/#live-demo\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">22. Static Backdrop<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-static-backdrop-by-bootstrap.jpg\" alt=\"Static backdrop offcanvas \u2014 confirmation dialog with Yes\/Cancel buttons; clicking outside the panel does not dismiss it\" \/><\/figure>\n<p>Static backdrop offcanvas \u2014 <code>data-bs-backdrop=\"static\"<\/code> blocks click-outside dismissal, forcing the user to use the close button (or your provided Cancel link). Best fit for confirmation flows, destructive-action prompts, and any drawer where accidental dismissal would cause data loss. Pure Bootstrap 5 with one extra data attribute. The backdrop is still visible but doesn&#8217;t respond to clicks. Pair with a clear Cancel action inside the drawer so users always have a non-button escape route.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/github.com\/twbs\" rel=\"nofollow noopener\" target=\"_blank\">Bootstrap (twbs)<\/a> \u00b7 License: MIT<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/offcanvas\/#static-backdrop\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/offcanvas\/#static-backdrop\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">23. Body Scroll Preserved<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-body-scroll-by-bootstrap.jpg\" alt=\"Body scroll preserved offcanvas \u2014 Help &amp;amp; tips drawer on right side while main page scrollable content remains accessible\" \/><\/figure>\n<p>Body scroll preserved via <code>data-bs-scroll=\"true\"<\/code> \u2014 the page remains scrollable while the offcanvas stays open. Best fit for help panels, table of contents, and any drawer that should accompany rather than replace the main reading flow. Pure Bootstrap 5; the data attribute opts out of the default scroll-lock behavior. Pair with <code>data-bs-backdrop=\"false\"<\/code> for fully non-blocking interaction (see #24). For long content inside the offcanvas, the offcanvas itself scrolls independently \u2014 no extra config needed.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/github.com\/twbs\" rel=\"nofollow noopener\" target=\"_blank\">Bootstrap (twbs)<\/a> \u00b7 License: MIT<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/offcanvas\/#body-scrolling\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/offcanvas\/#body-scrolling\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">24. Backdrop Disabled (non-blocking)<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-no-backdrop-by-bootstrap.jpg\" alt=\"Backdrop disabled non-blocking offcanvas \u2014 mini-cart on right side; Buy now and Save for later buttons remain interactive\" \/><\/figure>\n<p>Backdrop disabled (<code>data-bs-backdrop=\"false\"<\/code>) combined with <code>data-bs-scroll=\"true\"<\/code> makes the offcanvas fully non-blocking \u2014 no overlay covers the page, all buttons remain interactive. Best fit for mini-cart previews after &#8220;Add to cart&#8221;, help tips that point at specific UI elements, and any drawer that should accompany the user&#8217;s primary task rather than interrupt it. Pure Bootstrap 5 with two data attributes. The drawer feels more like a side panel than a modal \u2014 users naturally dismiss it by clicking elsewhere or pressing the close button without feeling blocked.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/github.com\/twbs\" rel=\"nofollow noopener\" target=\"_blank\">Bootstrap (twbs)<\/a> \u00b7 License: MIT<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/offcanvas\/#body-scrolling\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/getbootstrap.com\/docs\/5.3\/components\/offcanvas\/#body-scrolling\">Original demo<\/a><\/p>\n\n<h3 class=\"wp-block-heading\">25. Animated Transitions<\/h3>\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-animated-by-ervinstyle.jpg\" alt=\"Animated transitions showcase \u2014 right-side drawer with smooth motion and box-shadow lift, custom 400ms cubic-bezier easing\" \/><\/figure>\n<p>Custom CSS <code>transform<\/code> + 0.4s cubic-bezier easing applied to all four placements for smoother slide-in motion than Bootstrap&#8217;s default 0.3s ease. Best fit for premium product UIs (Linear, Vercel, Stripe) where motion polish signals quality. Pure CSS layered on top of Bootstrap&#8217;s offcanvas \u2014 override the <code>.offcanvas<\/code> transition rule with your own easing curve. Respect <code>prefers-reduced-motion: reduce<\/code> by adding a media query that disables custom transitions for accessibility \u2014 vestibular sensitivities can be triggered by sliding motion.<\/p>\n<p><em>Inspired by: <a href=\"https:\/\/codepen.io\/ervinstyle\" rel=\"nofollow noopener\" target=\"_blank\">ervinstyle<\/a> \u00b7 License: CodePen default (attribution required)<\/em><\/p>\n<p><a class=\"nectar-button medium accent-color\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/ervinstyle\/pen\/gOmEjMa\">Source &amp; details<\/a> <a class=\"nectar-button medium extra-color-3\" target=\"_blank\" rel=\"nofollow noopener\" href=\"https:\/\/codepen.io\/ervinstyle\/pen\/gOmEjMa\">Original demo<\/a><\/p>\n\n<h2 class=\"wp-block-heading\" id=\"advanced-patterns\">Advanced Bootstrap offcanvas patterns<\/h2>\n\n<p>Three patterns the listicle items above hint at but rarely demo in isolation. Each solves a specific production problem.<\/p>\n\n<p><strong>Pattern 1 \u2014 Multi-level slide-stack.<\/strong> When the menu has deep hierarchy (ecommerce categories, multi-tenant admin), don&#8217;t squash everything into one panel. Stack offcanvas panels that slide further as the user drills down. Each level is a separate offcanvas instance triggered from the previous one&#8217;s links:<\/p>\n\n<pre class=\"wp-block-code\"><code class=\"language-javascript\">const parent = bootstrap.Offcanvas.getInstance(document.getElementById('parent'));\ndocument.getElementById('child').addEventListener('show.bs.offcanvas', () =&gt; {\n  document.getElementById('parent').classList.add('offcanvas-stacked');\n});<\/code><\/pre>\n\n<p><strong>Pattern 2 \u2014 Offcanvas with body scroll preserved.<\/strong> Default offcanvas locks page scroll while open. For long content (cart with many items, filter panel on catalog), preserve body scroll so users can reference the underlying page:<\/p>\n\n<pre class=\"wp-block-code\"><code class=\"language-html\">&lt;div class=\"offcanvas offcanvas-end\"\n     data-bs-scroll=\"true\"\n     data-bs-backdrop=\"false\"\n     tabindex=\"-1\"\n     id=\"filterPanel\"&gt;\n  &lt;!-- ... --&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n<p><strong>Pattern 3 \u2014 Offcanvas \u2192 modal escalation.<\/strong> Pattern for cart drawers: offcanvas for the summary, modal for full checkout. Hide the offcanvas programmatically when the modal opens, then re-show on modal close:<\/p>\n\n<pre class=\"wp-block-code\"><code class=\"language-javascript\">const cartOC = bootstrap.Offcanvas.getInstance(document.getElementById('cartDrawer'));\nconst checkoutModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('checkoutModal'));\n\ndocument.getElementById('startCheckoutBtn').addEventListener('click', () =&gt; {\n  cartOC.hide();\n  checkoutModal.show();\n});\n\ndocument.getElementById('checkoutModal').addEventListener('hide.bs.modal', () =&gt; {\n  cartOC.show();\n});<\/code><\/pre>\n\n<h2 class=\"wp-block-heading\" id=\"comparison\">Offcanvas vs Modal vs Sidebar \u2014 when to use which<\/h2>\n\n<figure class=\"wp-block-table\"><table><thead><tr><th><\/th><th>Offcanvas<\/th><th>Modal<\/th><th>Sidebar (layout)<\/th><\/tr><\/thead><tbody>\n<tr><th>Component type<\/th><td>BS5 native component<\/td><td>BS4\/BS5 native component<\/td><td>Layout pattern (custom CSS)<\/td><\/tr>\n<tr><th>Default state<\/th><td>Hidden until triggered<\/td><td>Hidden until triggered<\/td><td>Always visible<\/td><\/tr>\n<tr><th>Position<\/th><td>Slides from edge (start\/end\/top\/bottom)<\/td><td>Centered overlay<\/td><td>Fixed left\/right column<\/td><\/tr>\n<tr><th>Blocks page interaction<\/th><td>Yes (default) \u2014 configurable<\/td><td>Yes \u2014 always<\/td><td>No<\/td><\/tr>\n<tr><th>Best for<\/th><td>Mobile menus, filters, cart drawers<\/td><td>Confirmations, forms, focused tasks<\/td><td>Persistent navigation, admin UIs<\/td><\/tr>\n<tr><th>Mobile-friendly<\/th><td>Yes \u2014 primary use case<\/td><td>Yes \u2014 but cramped on small screens<\/td><td>Usually collapses into hamburger<\/td><\/tr>\n<\/tbody><\/table><\/figure>\n\n<p><strong>When to choose what:<\/strong> Reach for <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-modals\/\"><strong>modal<\/strong><\/a> when you need user attention focused on a single short task. Reach for <strong>offcanvas<\/strong> when you need supplementary navigation or filtering that maintains the page context underneath. Reach for <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-sidebar\/\"><strong>sidebar layout<\/strong><\/a> when navigation is the primary spatial structure (admin dashboards, docs sites).<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"faq\">Frequently asked questions<\/h2>\n\n\n<style>\n.faq-accordion{margin:28px 0 36px}\n.faq-accordion details{background:#fff;border:1px solid #e6e9ec;border-radius:10px;margin-bottom:12px;transition:box-shadow .18s ease,border-color .18s ease;overflow:hidden}\n.faq-accordion details:hover{border-color:#cfd6dc;box-shadow:0 4px 14px rgba(15,23,42,.05)}\n.faq-accordion details[open]{border-color:#cfd6dc;box-shadow:0 6px 20px rgba(15,23,42,.06)}\n.faq-accordion summary{cursor:pointer;padding:18px 56px 18px 22px;font-weight:600;font-size:1.02rem;line-height:1.45;position:relative;list-style:none;color:#0f172a;transition:color .15s ease}\n.faq-accordion summary::-webkit-details-marker{display:none}\n.faq-accordion summary::marker{display:none}\n.faq-accordion summary::after{content:\"\";position:absolute;right:22px;top:50%;width:14px;height:14px;border-right:2px solid #64748b;border-bottom:2px solid #64748b;transform:translateY(-70%) rotate(45deg);transition:transform .2s ease,border-color .15s ease}\n.faq-accordion details[open] summary::after{transform:translateY(-30%) rotate(-135deg);border-color:#2563eb}\n.faq-accordion summary:hover{color:#2563eb}\n.faq-accordion summary:focus-visible{outline:2px solid #2563eb;outline-offset:-2px;border-radius:8px}\n.faq-accordion details>*:not(summary){padding:0 22px 18px 22px;margin-top:0}\n.faq-accordion details>p,.faq-accordion details>div{padding:14px 22px 18px 22px;border-top:1px solid #f1f5f9;margin:0;line-height:1.65;color:#475569}\n.faq-accordion details code{background:#f1f5f9;padding:2px 7px;border-radius:4px;font-size:.9em;color:#be185d;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}\n.faq-accordion details a{color:#2563eb;text-decoration:underline;text-underline-offset:2px}\n<\/style>\n<div class=\"faq-accordion\">\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\" open><summary>Is Bootstrap offcanvas available in Bootstrap 4?<\/summary><p>No \u2014 offcanvas is a Bootstrap 5 native component, introduced in version 5.0 (October 2021). Bootstrap 4 has no equivalent built-in component. Developers using Bootstrap 4 typically built custom slide-out menus with <code>position: fixed<\/code>, <code>transform: translateX()<\/code>, and jQuery. If you&#8217;re migrating from Bootstrap 4 to 5, replacing those custom solutions with the native offcanvas component is recommended.<\/p><\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>How do I open a Bootstrap offcanvas with JavaScript?<\/summary><p>Use the JavaScript API: <code>const oc = new bootstrap.Offcanvas(document.getElementById('myOffcanvas'))<\/code>, then call <code>oc.show()<\/code>. You can also use <code>bootstrap.Offcanvas.getOrCreateInstance(element).toggle()<\/code> to toggle visibility. The data-attribute API (<code>data-bs-toggle=\"offcanvas\"<\/code>) works for most cases and requires no JavaScript.<\/p><\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Can I have multiple offcanvas panels open at once?<\/summary><p>By default, no \u2014 Bootstrap closes any open offcanvas when a new one opens. You can override this by listening to the <code>show.bs.offcanvas<\/code> event and preventing the default close behavior on the parent panel. This is useful for multi-level navigation drawers. See the &#8220;Multi-level slide-stack&#8221; advanced pattern above for the full code.<\/p><\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>How do I make the offcanvas slide from the right instead of the left?<\/summary><p>Use the <code>offcanvas-end<\/code> modifier class instead of <code>offcanvas-start<\/code>. Bootstrap 5 also supports <code>offcanvas-top<\/code> (slides down from the top) and <code>offcanvas-bottom<\/code> (slides up from the bottom). The default direction is <code>offcanvas-start<\/code>, which respects RTL layouts automatically.<\/p><\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Is Bootstrap offcanvas accessible (WCAG compliant)?<\/summary><p>Yes \u2014 when implemented with the documented markup, Bootstrap offcanvas includes ARIA labels, focus trapping while open, focus return on close, and keyboard Escape-to-close. You must include <code>tabindex=\"-1\"<\/code> on the offcanvas element and <code>aria-labelledby<\/code> pointing to the offcanvas title for screen readers to announce it correctly.<\/p><\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Why does my page still scroll when the offcanvas is open?<\/summary><p>Bootstrap 5 locks body scroll by default when an offcanvas opens. If your page is still scrolling, check whether you&#8217;ve set <code>data-bs-scroll=\"true\"<\/code> on the offcanvas element \u2014 that attribute explicitly enables body scroll. Also check that no parent element has <code>overflow: hidden<\/code> that would interfere with Bootstrap&#8217;s scroll-lock logic.<\/p><\/details>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Are these Bootstrap offcanvas examples free for commercial use?<\/summary><p>Yes \u2014 every example in this collection uses an MIT, Apache 2.0, or MDB-free license, which permits commercial use including in client projects and SaaS products. Our Bootstrap 5.3 implementations are released under MIT; the original inspirations are linked for those who want to verify the source pen&#8217;s license terms.<\/p><\/details>\n\n\n\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"final-thoughts\">Final thoughts<\/h2>\n\n<p>Bootstrap 5&#8217;s offcanvas component fills the gap that Bootstrap 4 left for slide-in panels. The patterns above show the spectrum: from canonical docs references to feature-rich cart drawers, from chat layouts to faceted search panels. The picks worth committing to memory: the official live demo (#1) as your baseline, the cart drawer with line items (#11) for any e-commerce flow, the admin sidebar with avatar (#16) for logged-in dashboards, the responsive <code>offcanvas-lg<\/code> pattern (#19) for dashboards that need a permanent desktop sidebar, and Bootstrap 5.3&#8217;s dark-mode cascade (#20) for any product that supports theme switching.<\/p>\n\n<p>If you&#8217;re building a complete admin UI, pair offcanvas with our <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-sidebar\/\">Bootstrap sidebar templates<\/a> for the permanent-sidebar half. For mobile menus and hamburger triggers, see our <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-navbar\/\">Bootstrap navbar examples<\/a>.<\/p>\n\n<p><strong>Related collections:<\/strong> <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-navbar\/\">Bootstrap navbar examples<\/a> \u00b7 <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-sidebar\/\">Bootstrap sidebar templates<\/a> \u00b7 <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-modals\/\">Bootstrap modal templates<\/a> \u00b7 <a href=\"https:\/\/colorlib.com\/wp\/bootstrap-dropdowns\/\">Bootstrap dropdown menus<\/a> \u00b7 <a href=\"https:\/\/colorlib.com\/wp\/free-website-menu-templates\/\">Free website menu templates<\/a> \u00b7 <a href=\"https:\/\/colorlib.com\/wp\/category\/snippets\/\">Bootstrap snippet library<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>25 hand-picked Bootstrap 5 offcanvas examples \u2014 slide-in menus, mobile drawers, filter panels, cart UIs. Free, responsive, copy-paste ready. (2026)<\/p>\n","protected":false},"author":697,"featured_media":376349,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_focuskw":"bootstrap offcanvas","_yoast_wpseo_title":"25 Free Bootstrap Offcanvas Examples (2026)","_yoast_wpseo_metadesc":"25 hand-picked Bootstrap 5 offcanvas examples \u2014 slide-in menus, mobile drawers, filter panels, cart UIs. Free, responsive, copy-paste ready. (2026)","footnotes":""},"categories":[27213],"tags":[],"post_series":[],"class_list":{"2":"type-post","3":"status-publish","6":"hentry","7":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>25 Free Bootstrap Offcanvas Examples (2026)<\/title>\n<meta name=\"description\" content=\"25 hand-picked Bootstrap 5 offcanvas examples \u2014 slide-in menus, mobile drawers, filter panels, cart UIs. Free, responsive, copy-paste ready. (2026)\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/colorlib.com\/wp\/bootstrap-offcanvas\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"25 Free Bootstrap Offcanvas Examples (2026)\" \/>\n<meta property=\"og:description\" content=\"25 hand-picked Bootstrap 5 offcanvas examples \u2014 slide-in menus, mobile drawers, filter panels, cart UIs. Free, responsive, copy-paste ready. (2026)\" \/>\n<meta property=\"og:url\" content=\"https:\/\/colorlib.com\/wp\/bootstrap-offcanvas\/\" \/>\n<meta property=\"og:site_name\" content=\"Colorlib\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/colorlib\" \/>\n<meta property=\"article:author\" content=\"https:\/\/facebook.com\/silkalns\" \/>\n<meta property=\"article:published_time\" content=\"2026-05-13T13:26:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-examples-featured.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Aigars Silkalns\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ASilkalns\" \/>\n<meta name=\"twitter:site\" content=\"@colorlib\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aigars Silkalns\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-offcanvas\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-offcanvas\\\/\"},\"author\":{\"name\":\"Aigars Silkalns\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#\\\/schema\\\/person\\\/0f34837e738805c94d594780f27e3c7a\"},\"headline\":\"25 Free Bootstrap Offcanvas Examples (2026)\",\"datePublished\":\"2026-05-13T13:26:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-offcanvas\\\/\"},\"wordCount\":3475,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-offcanvas\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/bootstrap-offcanvas-examples-featured.jpg\",\"articleSection\":[\"Snippets\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-offcanvas\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-offcanvas\\\/\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-offcanvas\\\/\",\"name\":\"25 Free Bootstrap Offcanvas Examples (2026)\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-offcanvas\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-offcanvas\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/bootstrap-offcanvas-examples-featured.jpg\",\"datePublished\":\"2026-05-13T13:26:46+00:00\",\"description\":\"25 hand-picked Bootstrap 5 offcanvas examples \u2014 slide-in menus, mobile drawers, filter panels, cart UIs. Free, responsive, copy-paste ready. (2026)\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-offcanvas\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-offcanvas\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-offcanvas\\\/#primaryimage\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/bootstrap-offcanvas-examples-featured.jpg\",\"contentUrl\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/bootstrap-offcanvas-examples-featured.jpg\",\"width\":1200,\"height\":630,\"caption\":\"Grid of four free Bootstrap offcanvas examples \u2014 mobile drawer navigation, e-commerce cart drawer, dark admin sidebar with profile, and notifications panel\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/bootstrap-offcanvas\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Snippets\",\"item\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/category\\\/snippets\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"25 Free Bootstrap Offcanvas Examples (2026)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#website\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/\",\"name\":\"Colorlib\",\"description\":\"WordPress tutorials, theme reviews, and web design inspiration. Free themes and 1,000+ HTML templates from Colorlib.\",\"publisher\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#organization\",\"name\":\"Colorlib\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/colorlib-logo-top-1.png\",\"contentUrl\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/colorlib-logo-top-1.png\",\"width\":800,\"height\":400,\"caption\":\"Colorlib\"},\"image\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/colorlib\",\"https:\\\/\\\/x.com\\\/colorlib\",\"https:\\\/\\\/www.instagram.com\\\/colorlib\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/colorlib\",\"https:\\\/\\\/youtube.com\\\/c\\\/Colorlib\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#\\\/schema\\\/person\\\/0f34837e738805c94d594780f27e3c7a\",\"name\":\"Aigars Silkalns\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g\",\"caption\":\"Aigars Silkalns\"},\"description\":\"Frontend web developer and web designer specializing in WordPress theme development. After graduating with BA he self-taught frontend web development. Currently has over 10 years of experience in mainly CSS, HTML (TailwindCSS, Bootstrap), JavaScript(React, Vue, Angular), and PHP. Obsessed with application performance, user experience, and simplicity.\",\"sameAs\":[\"https:\\\/\\\/colorlib.com\\\/\",\"https:\\\/\\\/facebook.com\\\/silkalns\",\"https:\\\/\\\/x.com\\\/ASilkalns\"],\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/author\\\/aigars-silkalns\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"25 Free Bootstrap Offcanvas Examples (2026)","description":"25 hand-picked Bootstrap 5 offcanvas examples \u2014 slide-in menus, mobile drawers, filter panels, cart UIs. Free, responsive, copy-paste ready. (2026)","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/colorlib.com\/wp\/bootstrap-offcanvas\/","og_locale":"en_US","og_type":"article","og_title":"25 Free Bootstrap Offcanvas Examples (2026)","og_description":"25 hand-picked Bootstrap 5 offcanvas examples \u2014 slide-in menus, mobile drawers, filter panels, cart UIs. Free, responsive, copy-paste ready. (2026)","og_url":"https:\/\/colorlib.com\/wp\/bootstrap-offcanvas\/","og_site_name":"Colorlib","article_publisher":"https:\/\/www.facebook.com\/colorlib","article_author":"https:\/\/facebook.com\/silkalns","article_published_time":"2026-05-13T13:26:46+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-examples-featured.jpg","type":"image\/jpeg"}],"author":"Aigars Silkalns","twitter_card":"summary_large_image","twitter_creator":"@ASilkalns","twitter_site":"@colorlib","twitter_misc":{"Written by":"Aigars Silkalns","Est. reading time":"19 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/colorlib.com\/wp\/bootstrap-offcanvas\/#article","isPartOf":{"@id":"https:\/\/colorlib.com\/wp\/bootstrap-offcanvas\/"},"author":{"name":"Aigars Silkalns","@id":"https:\/\/colorlib.com\/wp\/#\/schema\/person\/0f34837e738805c94d594780f27e3c7a"},"headline":"25 Free Bootstrap Offcanvas Examples (2026)","datePublished":"2026-05-13T13:26:46+00:00","mainEntityOfPage":{"@id":"https:\/\/colorlib.com\/wp\/bootstrap-offcanvas\/"},"wordCount":3475,"commentCount":0,"publisher":{"@id":"https:\/\/colorlib.com\/wp\/#organization"},"image":{"@id":"https:\/\/colorlib.com\/wp\/bootstrap-offcanvas\/#primaryimage"},"thumbnailUrl":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-examples-featured.jpg","articleSection":["Snippets"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/colorlib.com\/wp\/bootstrap-offcanvas\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/colorlib.com\/wp\/bootstrap-offcanvas\/","url":"https:\/\/colorlib.com\/wp\/bootstrap-offcanvas\/","name":"25 Free Bootstrap Offcanvas Examples (2026)","isPartOf":{"@id":"https:\/\/colorlib.com\/wp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/colorlib.com\/wp\/bootstrap-offcanvas\/#primaryimage"},"image":{"@id":"https:\/\/colorlib.com\/wp\/bootstrap-offcanvas\/#primaryimage"},"thumbnailUrl":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-examples-featured.jpg","datePublished":"2026-05-13T13:26:46+00:00","description":"25 hand-picked Bootstrap 5 offcanvas examples \u2014 slide-in menus, mobile drawers, filter panels, cart UIs. Free, responsive, copy-paste ready. (2026)","breadcrumb":{"@id":"https:\/\/colorlib.com\/wp\/bootstrap-offcanvas\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/colorlib.com\/wp\/bootstrap-offcanvas\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/colorlib.com\/wp\/bootstrap-offcanvas\/#primaryimage","url":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-examples-featured.jpg","contentUrl":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bootstrap-offcanvas-examples-featured.jpg","width":1200,"height":630,"caption":"Grid of four free Bootstrap offcanvas examples \u2014 mobile drawer navigation, e-commerce cart drawer, dark admin sidebar with profile, and notifications panel"},{"@type":"BreadcrumbList","@id":"https:\/\/colorlib.com\/wp\/bootstrap-offcanvas\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/colorlib.com\/wp\/"},{"@type":"ListItem","position":2,"name":"Snippets","item":"https:\/\/colorlib.com\/wp\/category\/snippets\/"},{"@type":"ListItem","position":3,"name":"25 Free Bootstrap Offcanvas Examples (2026)"}]},{"@type":"WebSite","@id":"https:\/\/colorlib.com\/wp\/#website","url":"https:\/\/colorlib.com\/wp\/","name":"Colorlib","description":"WordPress tutorials, theme reviews, and web design inspiration. Free themes and 1,000+ HTML templates from Colorlib.","publisher":{"@id":"https:\/\/colorlib.com\/wp\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/colorlib.com\/wp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/colorlib.com\/wp\/#organization","name":"Colorlib","url":"https:\/\/colorlib.com\/wp\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/colorlib.com\/wp\/#\/schema\/logo\/image\/","url":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/colorlib-logo-top-1.png","contentUrl":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/colorlib-logo-top-1.png","width":800,"height":400,"caption":"Colorlib"},"image":{"@id":"https:\/\/colorlib.com\/wp\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/colorlib","https:\/\/x.com\/colorlib","https:\/\/www.instagram.com\/colorlib\/","https:\/\/www.linkedin.com\/company\/colorlib","https:\/\/youtube.com\/c\/Colorlib"]},{"@type":"Person","@id":"https:\/\/colorlib.com\/wp\/#\/schema\/person\/0f34837e738805c94d594780f27e3c7a","name":"Aigars Silkalns","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ba8ffcefbaaec481373d85072fdfdae628449bf1ebae707ca57aa3b69dbbf350?s=96&d=mm&r=g","caption":"Aigars Silkalns"},"description":"Frontend web developer and web designer specializing in WordPress theme development. After graduating with BA he self-taught frontend web development. Currently has over 10 years of experience in mainly CSS, HTML (TailwindCSS, Bootstrap), JavaScript(React, Vue, Angular), and PHP. Obsessed with application performance, user experience, and simplicity.","sameAs":["https:\/\/colorlib.com\/","https:\/\/facebook.com\/silkalns","https:\/\/x.com\/ASilkalns"],"url":"https:\/\/colorlib.com\/wp\/author\/aigars-silkalns\/"}]}},"_links":{"self":[{"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/posts\/376382","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/users\/697"}],"replies":[{"embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/comments?post=376382"}],"version-history":[{"count":1,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/posts\/376382\/revisions"}],"predecessor-version":[{"id":376383,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/posts\/376382\/revisions\/376383"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/media\/376349"}],"wp:attachment":[{"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/media?parent=376382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/categories?post=376382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/tags?post=376382"},{"taxonomy":"post_series","embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/post_series?post=376382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}