Home Metronic Hire Us Buy Now
The World’s #1 Bootstrap 4 & 5 HTML, Angular 11, React, VueJS & Laravel
Admin Dashboard Theme

## Offcanvas

### Overview

`KTOffcanvas` is a Metronic's custom plugin defined in `[metronic]/theme/html/[demo]/src/js/components/base/offcanvas.js`.

### Initialization

First parameter is the id, class, or tag of the HTML element. The second parameter is for the options.

    _offcanvasObject = new KTOffcanvas(_element, {
      baseClass: offcanvasClass,
      overlay: true,
      closeBy: 'kt_aside_close_btn',
      toggleBy: {
    	target: 'kt_aside_mobile_toggle',
    	state: 'mobile-toggle-active'
      }
    });

### Options

    var options = {
      baseClass: offcanvasClass,
      overlay: true,
      closeBy: 'kt_aside_close_btn',
      toggleBy: {
    	target: 'kt_aside_mobile_toggle',
    	state: 'mobile-toggle-active'
      }
    }

Field | Type | Description
--- | --- | ---
`overlay` | `boolean` | Enable/disable offcanvas overlay

Sample
    overlay: true

`baseClass` | `string` | Set the base class for the offcanvas

Sample
    baseClass: 'kt-header-menu-wrapper'

`closeBy` | `string` | Define the element for the off canvas to be closed when this element is clicked

Sample
    closeBy: 'kt_header_menu_mobile_close_btn'

`toggleBy` | `object` | Define which element for the toggle and set the active state class name

Sample
    toggleBy: {
      target: 'kt_aside_mobile_toggle',
      state: 'mobile-toggle-active'
    }

### API Methods

Method | Description
--- | ---
`setDefaults(options)` | Set default options @param options
`isShown()` | Check if canvas is shown @returns {boolean}
`hide()` | Set to hide the canvas
`show()` | Set to show the canvas
`on(name, handler)` | Attach event @param name @param handler
`one(name, handler)` | Attach event that will be fired once @param name @param handler