Premium Bootstrap Admin Templates

Keen - The Ultimate Multi-Demo Bootstrap Admin Theme

The most complete UI/UX template solution for today's web projects of any size

Keen Offcanvas

Overview

KTOffcanvas is a Keen's custom plugin defined in [root]/theme/default/src/theme/framework/components/base/offcanvas/offcanvas.js.

Initialization

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

var headerMenuOffcanvas = new KTOffcanvas(id, options)

var headerMenuOffcanvas = new KTOffcanvas('kt_header_menu_wrapper', {
    overlay: true,
    baseClass: 'kt-header-menu-wrapper',
    closeBy: 'kt_header_menu_mobile_close_btn',
    toggleBy: {
        target: 'kt_header_mobile_toggler',
        state: 'kt-header-mobile__toolbar-toggler--active'
    }
});

Options

var options = {
    overlay: true,
    baseClass: 'kt-header-menu-wrapper',
    closeBy: 'kt_header_menu_mobile_close_btn',
    toggleBy: {
        target: 'kt_header_mobile_toggler',
        state: 'kt-header-mobile__toolbar-toggler--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_header_mobile_toggler', state: 'kt-header-mobile__toolbar-toggler--active' }`

API Methods

Method Description

setDefaults(options)

Set default options

Input Parameters
Name	Type	Description
`options`	`object`	A new options object for the menu

show()

Set show dropdown

hide()

Set hide dropdown

on(name, handler)

Register event

Input Parameters
Name	Type	Description
`name`	`string`	Unique event name
`handler`	`function`	Callback function handler for the event

one(name, handler)

Register event to be run once

Input Parameters
Name	Type	Description
`name`	`string`	Unique event name
`handler`	`function`	Callback function handler for the event

Keen’s Key Features

Keen empowers your project with virtually limitless array of options
to create endless unique projects.

Based On Bootstrap 4.x
Multi-Demo Concept
Enterprise Ready Architect
Integrated Build Tools: Gulp, NPM, Yarn, SASS
Full RTL Support
Included Classic(without build tool) Version
Enterprise Ready Core Framework
Full SASS Support
Re-Usable Component System
And many more...