Bootstrap 5 Offcanvas

Offcanvas

Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.

🤖 Looking for the LLM-optimized version?View llm.md

Other frameworks

CoreUI components are available as native Angular, React, and Vue components. To learn more please visit the following pages.

On this page

How it works

The Bootstrap Offcanvas component serves as a sidebar element that can be activated through JavaScript, allowing it to slide in from the left, right, top, or bottom of the viewport. Triggers, like buttons or anchors, are linked to the elements you want to toggle, and data attributes facilitate their activation in JavaScript.

Offcanvas shares some JavaScript code with modals. Conceptually, they are quite similar, but they remain separate plugins.
Likewise, somesource Sass variables for offcanvas styles and dimensions are derived from the modal variables.
When displayed, offcanvas features a default backdrop that can be clicked to hide it.
As with modals, only one offcanvas can be displayed at a time.

Attention! Due to CSS animation handling,margin ortranslate cannot be applied to an.offcanvas element. Instead, utilize the class as a separate wrapping element.

This component's animation effect relies on theprefers-reduced-motion media query. For more information, refer to thereduced motion section of our accessibility documentation.

Examples

Offcanvas components

Below is a default offcanvas example (via.show on.offcanvas). Offcanvas supports a header with a close button and an optional body class for initialpadding. We recommend including offcanvas headers with dismiss actions whenever possible, or providing an explicit dismiss action.

Offcanvas

The content for the Bootstrap offcanvas goes here. You can place nearly any Bootstrap component or custom element here.

html

<divclass="offcanvas offcanvas-start show"tabindex="-1"id="offcanvas"aria-labelledby="offcanvasLabel"><divclass="offcanvas-header"><h5class="offcanvas-title"id="offcanvasLabel">Offcanvas</h5><buttontype="button"class="btn-close"data-coreui-dismiss="offcanvas"aria-label="Close"></button></div><divclass="offcanvas-body">    The content for the Bootstrap offcanvas goes here. You can place nearly any Bootstrap component or custom element here.</div></div>

Live demo

Utilize the buttons below to toggle the visibility of an offcanvas element using JavaScript, which adds or removes the.show class from an element with the.offcanvas class.

.offcanvas hides content.
.offcanvas.show shows content.

You can employ a link with thehref attribute or a button featuring thedata-coreui-target attribute. In both instances, includingdata-coreui-toggle="offcanvas" is necessary.

Link with href

Offcanvas

Some text as a placeholder. In real life, you can have the elements you have chosen, like text, images, lists, etc.

html

<aclass="btn btn-primary"data-coreui-toggle="offcanvas"href="#offcanvasExample"role="button"aria-controls="offcanvasExample">  Link with href</a><buttonclass="btn btn-primary"type="button"data-coreui-toggle="offcanvas"data-coreui-target="#offcanvasExample"aria-controls="offcanvasExample">  Button with data-coreui-target</button><divclass="offcanvas offcanvas-start"tabindex="-1"id="offcanvasExample"aria-labelledby="offcanvasExampleLabel"><divclass="offcanvas-header"><h5class="offcanvas-title"id="offcanvasExampleLabel">Offcanvas</h5><buttontype="button"class="btn-close text-reset"data-coreui-dismiss="offcanvas"aria-label="Close"></button></div><divclass="offcanvas-body"><div>      Some text as a placeholder. In real life, you can have the elements you have chosen, like text, images, lists, etc.</div><divclass="dropdown mt-3"><buttonclass="btn btn-secondary dropdown-toggle"type="button"id="dropdownMenuButton"data-coreui-toggle="dropdown">        Dropdown button</button><ulclass="dropdown-menu"><li><aclass="dropdown-item"href="#">Action</a></li><li><aclass="dropdown-item"href="#">Another action</a></li><li><aclass="dropdown-item"href="#">Something else here</a></li></ul></div></div></div>

Body scrolling

The<body> element’s scrolling is disabled when the Bootstrap offcanvas and its backdrop are visible. Utilize thedata-coreui-scroll attribute to allow scrolling on the<body>.

Offcanvas with body scrolling

Scroll further down the page to see this option in action.

html

<buttonclass="btn btn-primary"type="button"data-coreui-toggle="offcanvas"data-coreui-target="#offcanvasScrolling"aria-controls="offcanvasScrolling">Enable body scrolling</button><divclass="offcanvas offcanvas-start"data-coreui-scroll="true"data-coreui-backdrop="false"tabindex="-1"id="offcanvasScrolling"aria-labelledby="offcanvasScrollingLabel"><divclass="offcanvas-header"><h5class="offcanvas-title"id="offcanvasScrollingLabel">Offcanvas with body scrolling</h5><buttontype="button"class="btn-close"data-coreui-dismiss="offcanvas"aria-label="Close"></button></div><divclass="offcanvas-body"><p>Scroll further down the page to see this option in action.</p></div></div>

Body scrolling and backdrop

You can also enable<body> scrolling with a visible backdrop.

Backdrop with scrolling

Try scrolling the rest of the page to see this option in action.

html

<buttonclass="btn btn-primary"type="button"data-coreui-toggle="offcanvas"data-coreui-target="#offcanvasWithBothOptions"aria-controls="offcanvasWithBothOptions">Enable both scrolling& backdrop</button><divclass="offcanvas offcanvas-start"data-coreui-scroll="true"tabindex="-1"id="offcanvasWithBothOptions"aria-labelledby="offcanvasWithBothOptionsLabel"><divclass="offcanvas-header"><h5class="offcanvas-title"id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5><buttontype="button"class="btn-close"data-coreui-dismiss="offcanvas"aria-label="Close"></button></div><divclass="offcanvas-body"><p>Try scrolling the rest of the page to see this option in action.</p></div></div>

Static backdrop

When the backdrop is set to static, the Bootstrap offcanvas will remain open when clicking outside of it.

Offcanvas

I won’t close if you click outside of me.

html

<buttonclass="btn btn-primary"type="button"data-coreui-toggle="offcanvas"data-coreui-target="#staticBackdrop"aria-controls="staticBackdrop">  Toggle static offcanvas</button><divclass="offcanvas offcanvas-start"data-coreui-backdrop="static"tabindex="-1"id="staticBackdrop"aria-labelledby="staticBackdropLabel"><divclass="offcanvas-header"><h5class="offcanvas-title"id="staticBackdropLabel">Offcanvas</h5><buttontype="button"class="btn-close"data-coreui-dismiss="offcanvas"aria-label="Close"></button></div><divclass="offcanvas-body"><div>      I won’t close if you click outside of me.</div></div></div>

Dark offcanvas

Deprecated in v5.0.0Added in v4.2.6

Change the appearance of offcanvas elements using utilities to better match various contexts, such as dark navbars. Here, we add.text-bg-dark to the.offcanvas and.btn-close-white to.btn-close for proper styling with a dark offcanvas. If there are dropdowns inside, consider also adding.dropdown-menu-dark to.dropdown-menu.

Attention! Dark variants for components are no longer supported as of v5.3.0 due to the introduction of color modes. Instead of manually adding the classes mentioned earlier, simply setdata-coreui-theme="dark" on the root element, a parent wrapper, or the component itself.

Offcanvas

Place offcanvas content here.

html

<divclass="offcanvas offcanvas-start show text-bg-dark"tabindex="-1"id="offcanvasDark"aria-labelledby="offcanvasDarkLabel"><divclass="offcanvas-header"><h5class="offcanvas-title"id="offcanvasDarkLabel">Offcanvas</h5><buttontype="button"class="btn-close btn-close-white"data-coreui-dismiss="offcanvasDark"aria-label="Close"></button></div><divclass="offcanvas-body"><p>Place offcanvas content here.</p></div></div>

Responsive

Added in v4.2.6

Responsive offcanvas classes hide content that is outside the viewport from a specified breakpoint and lower. Above that breakpoint, the content will behave normally. For example,.offcanvas-lg hides content in an offcanvas below thelg breakpoint, but displays the content above thelg breakpoint.

Resize your browser to show the responsive offcanvas toggle.

Responsive offcanvas

This is content within an.offcanvas-lg.

html

<buttonclass="btn btn-primary d-lg-none"type="button"data-coreui-toggle="offcanvas"data-coreui-target="#offcanvasResponsive"aria-controls="offcanvasResponsive">Toggle offcanvas</button><divclass="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div><divclass="offcanvas-lg offcanvas-end"tabindex="-1"id="offcanvasResponsive"aria-labelledby="offcanvasResponsiveLabel"><divclass="offcanvas-header"><h5class="offcanvas-title"id="offcanvasResponsiveLabel">Responsive offcanvas</h5><buttontype="button"class="btn-close"data-coreui-dismiss="offcanvas"data-coreui-target="#offcanvasResponsive"aria-label="Close"></button></div><divclass="offcanvas-body"><pclass="mb-0">This is content within an<code>.offcanvas-lg</code>.</p></div></div>

Responsive offcanvas classes are available for each breakpoint.

.offcanvas
.offcanvas-sm
.offcanvas-md
.offcanvas-lg
.offcanvas-xl
.offcanvas-xxl

Placement

Offcanvas components do not have a default position; therefore, you need to apply one of the modifier classes listed below.

.offcanvas-start places the offcanvas on the left side of the viewport (as shown above)
.offcanvas-end places the offcanvas on the right side of the viewport
.offcanvas-top places offcanvas at the top of the viewport
.offcanvas-bottom places offcanvas at the bottom of the viewport

Feel free to experiment with the top, right, and bottom examples below.

Offcanvas top

...

html

<buttonclass="btn btn-primary"type="button"data-coreui-toggle="offcanvas"data-coreui-target="#offcanvasTop"aria-controls="offcanvasTop">Toggle top offcanvas</button><divclass="offcanvas offcanvas-top"tabindex="-1"id="offcanvasTop"aria-labelledby="offcanvasTopLabel"><divclass="offcanvas-header"><h5class="offcanvas-title"id="offcanvasTopLabel">Offcanvas top</h5><buttontype="button"class="btn-close"data-coreui-dismiss="offcanvas"aria-label="Close"></button></div><divclass="offcanvas-body">    ...</div></div>

Offcanvas right

...

html

<buttonclass="btn btn-primary"type="button"data-coreui-toggle="offcanvas"data-coreui-target="#offcanvasRight"aria-controls="offcanvasRight">Toggle right offcanvas</button><divclass="offcanvas offcanvas-end"tabindex="-1"id="offcanvasRight"aria-labelledby="offcanvasRightLabel"><divclass="offcanvas-header"><h5class="offcanvas-title"id="offcanvasRightLabel">Offcanvas right</h5><buttontype="button"class="btn-close"data-coreui-dismiss="offcanvas"aria-label="Close"></button></div><divclass="offcanvas-body">    ...</div></div>

Offcanvas bottom

...

html

<buttonclass="btn btn-primary"type="button"data-coreui-toggle="offcanvas"data-coreui-target="#offcanvasBottom"aria-controls="offcanvasBottom">Toggle bottom offcanvas</button><divclass="offcanvas offcanvas-bottom"tabindex="-1"id="offcanvasBottom"aria-labelledby="offcanvasBottomLabel"><divclass="offcanvas-header"><h5class="offcanvas-title"id="offcanvasBottomLabel">Offcanvas bottom</h5><buttontype="button"class="btn-close"data-coreui-dismiss="offcanvas"aria-label="Close"></button></div><divclass="offcanvas-body small">    ...</div></div>

Accessibility

Since the offcanvas panel is conceptually a modal dialog, be sure to addaria-labelledby="..."—referencing the offcanvas title—to.offcanvas. Note that you don’t need to addrole="dialog" since we already add it via JavaScript.

Usage

Heads up! In our documentation, all examples showstandard CoreUI implementation. If you are using aBootstrap-compatible version of CoreUI, remember to use the following changes:

In the constructor, please usebootstrap instead ofcoreui. For example,new bootstrap.Alert(...) instead ofnew coreui.Alert(...)
In events, please usebs instead ofcoreui, for exampleclose.bs.alert instead ofclose.coreui.alert
In data attributes, please usebs instead ofcoreui. For example,data-bs-toggle="..." instead ofdata-coreui-toggle="..."

The offcanvas plugin leverages several classes and attributes to perform its functions:

.offcanvas hides the content
.offcanvas.show shows the content
.offcanvas-start hides the offcanvas on the left
.offcanvas-end hides the offcanvas on the right
.offcanvas-top hides the offcanvas at the top
.offcanvas-bottom hides the offcanvas at the bottom

Include a dismiss button using thedata-coreui-dismiss="offcanvas" attribute to activate the JavaScript functionality. Ensure you use the<button> element for consistent behavior across all devices.

Via data attributes

Includedata-coreui-toggle="offcanvas" along with adata-coreui-target orhref in the element to automatically control a single offcanvas component. Thedata-coreui-target attribute allows you to specify a CSS selector for the associated offcanvas. Remember to apply theoffcanvas class to the offcanvas element. To have it open by default, also add theshow class.

Dismiss

Dismissal can be achieved with thedata attribute on a buttonwithin the offcanvas as demonstrated below:

<buttontype="button"class="btn-close"data-coreui-dismiss="offcanvas"aria-label="Close"></button>

or on a buttonoutside the offcanvas using thedata-coreui-target as demonstrated below:

<buttontype="button"class="btn-close"data-coreui-dismiss="offcanvas"data-coreui-target="#my-offcanvas"aria-label="Close"></button>

While both methods for dismissing an offcanvas are supported, remember that dismissing from the outside of an offcanvas does not align with theARIA Authoring Practices Guide dialog (modal) pattern. Proceed with caution.

Via JavaScript

Enable manually with:

constoffcanvasElementList=document.querySelectorAll('.offcanvas')constoffcanvasList=[...offcanvasElementList].map(offcanvasEl=>newcoreui.Offcanvas(offcanvasEl))

Options

Options can be passed using data attributes or JavaScript. To do this, append an option name todata-coreui-, such asdata-coreui-animation="{value}". Remember to convert the case of the option name from “camelCase” to “kebab-case” when using data attributes. For instance, you should writedata-coreui-custom-class="beautifier" rather thandata-coreui-customClass="beautifier".

Starting with CoreUI 4.2.0, all components support anexperimental reserved data attribute nameddata-coreui-config, which can contain simple component configurations as a JSON string. If an element has attributesdata-coreui-config='{"delay":50, "title":689}' anddata-coreui-title="Custom Title", then the final value fortitle will beCustom Title, as the standard data attributes will take precedence over values specified indata-coreui-config. Moreover, existing data attributes can also hold JSON values likedata-coreui-delay='{"show":50, "hide":250}'.

Name	Type	Default	Description
`backdrop`	boolean or the string`static`	`true`	Applies a backdrop to the body while the Bootstrap offcanvas is open. Alternatively, specify`static` for a backdrop that doesn’t close the offcanvas component when clicked.
`keyboard`	boolean	`true`	Closes the offcanvas when the escape key is pressed.
`scroll`	boolean	`false`	Allows body scrolling while the offcanvas is open.

Methods

Asynchronous methods and transitions

All our API methods areasynchronous and initiate atransition. They return to the caller as soon as the transition begins butbefore it concludes. Furthermore, a method call on atransitioning component will be ignored.

Refer to our JavaScript documentation for further details.

Activates your content as an offcanvas element and accepts an optional optionsobject.

You can create an offcanvas instance using the constructor; for example:

constcuiOffcanvas=newcoreui.Offcanvas('#myOffcanvas')

Method	Description
`getInstance`	Static method that allows you to obtain the offcanvas instance associated with a DOM element
`getOrCreateInstance`	Static method that enables you to retrieve the offcanvas instance linked to a DOM element, or create a new one if it hasn’t been initialized
`hide`	Hides an offcanvas element.Returns to the caller before the offcanvas element is actually hidden (i.e. before the`hidden.coreui.offcanvas` event occurs).
`show`	Displays an offcanvas element.Returns to the caller before the offcanvas element is actually shown (i.e. before the`shown.coreui.offcanvas` event occurs).
`toggle`	Switches an offcanvas element between shown and hidden.Returns to the caller before the offcanvas element is actually shown or hidden (i.e. before the`shown.coreui.offcanvas` or`hidden.coreui.offcanvas` event occurs).

Events

CoreUI for Bootstrap’s offcanvas class exposes a few events for hooking into offcanvas functionality.

Event Type	Description
`hide.coreui.offcanvas`	This event is fired immediately after the`hide` method has been called.
`hidden.coreui.offcanvas`	This event is fired when an offcanvas element is hidden from the user (it will wait for CSS transitions to complete).
`hidePrevented.coreui.offcanvas`	This event is triggered when the offcanvas is shown, its backdrop is`static`, and a click outside of the offcanvas occurs. The event is also triggered when the escape key is pressed and the`keyboard` option is set to`false`.
`show.coreui.offcanvas`	This event fires immediately when the`show` instance method is invoked.
`shown.coreui.offcanvas`	This event is fired when an offcanvas element becomes visible to the user (it will wait for CSS transitions to complete).

constmyOffcanvas=document.getElementById('myOffcanvas')myOffcanvas.addEventListener('hidden.coreui.offcanvas',event=>{// do something...})

Customization

CSS variables

Offcanvas utilizes local CSS variables on.offcanvas for improved real-time customization. The values for the CSS variables are defined through Sass, ensuring that Sass customization remains supported as well.

scss/_offcanvas.scss

--cui-offcanvas-zindex:#{$zindex-offcanvas};--cui-offcanvas-width:#{$offcanvas-horizontal-width};--cui-offcanvas-height:#{$offcanvas-vertical-height};--cui-offcanvas-padding-x:#{$offcanvas-padding-x};--cui-offcanvas-padding-y:#{$offcanvas-padding-y};--cui-offcanvas-color:#{$offcanvas-color};--cui-offcanvas-bg:#{$offcanvas-bg-color};--cui-offcanvas-border-width:#{$offcanvas-border-width};--cui-offcanvas-border-color:#{$offcanvas-border-color};--cui-offcanvas-box-shadow:#{$offcanvas-box-shadow};--cui-offcanvas-transition:#{transform$offcanvas-transition-durationease-in-out};--cui-offcanvas-title-line-height:#{$offcanvas-title-line-height};

SASS variables

scss/_variables.scss

$offcanvas-padding-y:$modal-inner-padding;$offcanvas-padding-x:$modal-inner-padding;$offcanvas-horizontal-width:400px;$offcanvas-vertical-height:30vh;$offcanvas-transition-duration:.3s;$offcanvas-border-color:$modal-content-border-color;$offcanvas-border-width:$modal-content-border-width;$offcanvas-title-line-height:$modal-title-line-height;$offcanvas-bg-color:var(--#{$prefix}body-bg);$offcanvas-color:var(--#{$prefix}body-color);$offcanvas-box-shadow:$modal-content-box-shadow-xs;$offcanvas-backdrop-bg:$modal-backdrop-bg;$offcanvas-backdrop-opacity:$modal-backdrop-opacity;

CoreUI vs Bootstrap

While this Offcanvas component is fully compatible with Bootstrap and follows its core principles, CoreUI delivers a more complete solution for modern app development.

What sets CoreUI apart from Bootstrap?

✅Fully compatible with Bootstrap – Built directly on Bootstrap, all classes and behaviors work as expected.
🧠Framework-native versions – CoreUI provides dedicated libraries forReact.js,Vue.js, andAngular, unlike Bootstrap which relies on third-party plugins for JavaScript frameworks.
👨‍💻Maintained by a full-time team – CoreUI is developed as a professional product, not a volunteer-driven project.
📦More built-in components – Includes additional ready-to-use components like range sliders, multi-selects, steppers, etc.
🛠️Sass Modules support today – CoreUI already supports Sass Modules, which are planned for Bootstrap 6.
🌍Better LTR/RTL support – Uses modern CSS logical properties for seamless bidirectional layout support.
🔒LTS (Long-Term Support) – Bootstrap now offers LTS only via paid third parties like HeroDevs, while CoreUI continues to offer long-term support natively and for free.

Whether you’re building internal tools, dashboards, or SaaS platforms — CoreUI combines the familiarity of Bootstrap with a more powerful, scalable, and production-ready ecosystem.

👉Explore CoreUI Bootstrap Components
👉Compare CoreUI vs Bootstrap

Movatterモバイル変換

Bootstrap 5 Offcanvas

Offcanvas

Other frameworks

How it works

Examples

Offcanvas components

Offcanvas

Live demo

Offcanvas

Body scrolling

Offcanvas with body scrolling

Body scrolling and backdrop

Backdrop with scrolling

Static backdrop

Offcanvas

Dark offcanvas

Offcanvas

Responsive

Responsive offcanvas

Placement

Offcanvas top

Offcanvas right

Offcanvas bottom

Accessibility

Usage

Via data attributes

Dismiss

Via JavaScript

Options

Methods

Asynchronous methods and transitions

Events

Customization

CSS variables

SASS variables

CoreUI vs Bootstrap