# Bootstrap 5 Offcanvas with CoreUI Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin. ## Bootstrap 5 Offcanvas – 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, some [source Sass](#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` or `translate` cannot be applied to an `.offcanvas` element. Instead, utilize the class as a separate wrapping element. This component's animation effect relies on the `prefers-reduced-motion` media query. For more information, refer to the [reduced motion section of our accessibility documentation](/getting-started/accessibility/llm.md). ## Bootstrap 5 Offcanvas – Examples ### Bootstrap 5 Offcanvas – 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 initial `padding`. We recommend including offcanvas headers with dismiss actions whenever possible, or providing an explicit dismiss action. ```html
Offcanvas
The content for the Bootstrap offcanvas goes here. You can place nearly any Bootstrap component or custom element here.
``` ### Bootstrap 5 Offcanvas – 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 the `href` attribute or a button featuring the `data-coreui-target` attribute. In both instances, including `data-coreui-toggle="offcanvas"` is necessary. ```html 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.
``` ### Bootstrap 5 Offcanvas – Body scrolling The `` element's scrolling is disabled when the Bootstrap offcanvas and its backdrop are visible. Utilize the `data-coreui-scroll` attribute to allow scrolling on the ``. ```html
Offcanvas with body scrolling

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

``` ### Bootstrap 5 Offcanvas – Body scrolling and backdrop You can also enable `` scrolling with a visible backdrop. ```html
Backdrop with scrolling

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

``` ### Bootstrap 5 Offcanvas – Static backdrop When the backdrop is set to static, the Bootstrap offcanvas will remain open when clicking outside of it. ```html
Offcanvas
I won’t close if you click outside of me.
``` ## Bootstrap 5 Offcanvas – Dark offcanvas Deprecated in v5.0.0 Added 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 set `data-coreui-theme="dark"` on the root element, a parent wrapper, or the component itself. ```html
Offcanvas

Place offcanvas content here.

``` ## Bootstrap 5 Offcanvas – 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 the `lg` breakpoint, but displays the content above the `lg` breakpoint. ```html
Resize your browser to show the responsive offcanvas toggle.
Responsive offcanvas

This is content within an .offcanvas-lg.

``` Responsive offcanvas classes are available for each breakpoint. - `.offcanvas` - `.offcanvas-sm` - `.offcanvas-md` - `.offcanvas-lg` - `.offcanvas-xl` - `.offcanvas-xxl` ## Bootstrap 5 Offcanvas – 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. ```html
Offcanvas top
...
``` ```html
Offcanvas right
...
``` ```html
Offcanvas bottom
...
``` ## Bootstrap 5 Offcanvas – Accessibility Since the offcanvas panel is conceptually a modal dialog, be sure to add `aria-labelledby="..."`—referencing the offcanvas title—to `.offcanvas`. Note that you don’t need to add `role="dialog"` since we already add it via JavaScript. ## Bootstrap 5 Offcanvas – Usage

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

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 the `data-coreui-dismiss="offcanvas"` attribute to activate the JavaScript functionality. Ensure you use the ` ``` or on a button **outside the offcanvas** using the `data-coreui-target` as demonstrated below: ```html ``` While both methods for dismissing an offcanvas are supported, remember that dismissing from the outside of an offcanvas does not align with the [ARIA Authoring Practices Guide dialog (modal) pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/). Proceed with caution. ### Bootstrap 5 Offcanvas – Via JavaScript Enable manually with: ```js const offcanvasElementList = document.querySelectorAll('.offcanvas') const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new coreui.Offcanvas(offcanvasEl)) ``` ### Bootstrap 5 Offcanvas – Options

Options can be passed using data attributes or JavaScript. To do this, append an option name to data-coreui-, such as data-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 write data-coreui-custom-class="beautifier" rather than data-coreui-customClass="beautifier".

Starting with CoreUI 4.2.0, all components support an experimental reserved data attribute named data-coreui-config, which can contain simple component configurations as a JSON string. If an element has attributes data-coreui-config='{"delay":50, "title":689}' and data-coreui-title="Custom Title", then the final value for title will be Custom Title, as the standard data attributes will take precedence over values specified in data-coreui-config. Moreover, existing data attributes can also hold JSON values like data-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. ### Bootstrap 5 Offcanvas – Methods #### Bootstrap 5 Offcanvas – Asynchronous methods and transitions All our API methods are **asynchronous** and initiate a **transition**. They return to the caller as soon as the transition begins but **before it concludes**. Furthermore, a method call on a **transitioning component will be ignored**. [Refer to our JavaScript documentation for further details](/getting-started/javascript/llm.md). Activates your content as an offcanvas element and accepts an optional options `object`. You can create an offcanvas instance using the constructor; for example: ```js const cuiOffcanvas = new coreui.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). ### Bootstrap 5 Offcanvas – 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). ```js const myOffcanvas = document.getElementById('myOffcanvas') myOffcanvas.addEventListener('hidden.coreui.offcanvas', event => { // do something... }) ``` ## Bootstrap 5 Offcanvas – Customization ### Bootstrap 5 Offcanvas – 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 --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-duration ease-in-out}; --cui-offcanvas-title-line-height: #{$offcanvas-title-line-height}; ``` ### Bootstrap 5 Offcanvas – SASS 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?

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