#### Keen - The Ultimate Multi-Demo Bootstrap Admin Theme

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

## Keen Menu

### Overview

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

The Keen Menu components allows to manage both horizontal and vertical multi level menus for both desktop and mobile modes.

### Initialization

The below code shows the basic `vertical menu` initialization with `accordion` submenu mode:

    var asideMenu = new KTMenu(id, options);

    var asideMenu = new KTMenu('kt_aside_menu', {
        // vertical scroll
        scroll: {
            height: function() {}
        },

        // submenu setup
        submenu: {
            desktop: {
                // by default the menu mode set to accordion in desktop mode
                default: 'accordion',
                // whenever body has this class switch the menu mode to dropdown
                state: {
                    body: 'kt-aside--minimize',
                    mode: 'dropdown'
                }
            },
            tablet: 'accordion', // menu set to accordion in tablet mode
            mobile: 'accordion' // menu set to accordion in mobile mode
        },

        //accordion setup
        accordion: {
            expandAll: false // allow having multiple expanded accordions in the menu
        }
    });

The below code shows the basic `horizontal menu` initialization:

    var headerMenu = new KTMenu('kt_header_menu', {
        submenu: {
            desktop: 'dropdown',
            tablet: 'accordion',
            mobile: 'accordion'
        },
        accordion: {
            slideSpeed: 200, // accordion toggle slide speed in milliseconds
            expandAll: false // allow having multiple expanded accordions in the menu
        }
    });

### Options

Field | Type | Description
--- | --- | ---
`accordion.slideSpeed` | `number` | Accordion toggle slide speed in milliseconds
Sample
    accordion: {
        slideSpeed: 200
    },
`accordion.autoScroll` | `boolean` | Enable auto scrolling(focus) to the clicked menu item
Sample
    accordion: {
        autoScroll: true
    },
`accordion.autoScrollSpeed` | `number` | Enable auto scrolling(focus) to the clicked menu item
Sample
    accordion: {
        autoScrollSpeed: 1200
    },
`accordion.expandAll` | `boolean` | Allow having multiple expanded accordions in the menu
Sample
    accordion: {
        expandAll: true
    },
`dropdown.timeout` | `number` | Timeout in milliseconds to show and hide the hoverable submenu dropdown
Sample
    dropdown: {
        timeout: 500
    },
`submenu.desktop` | `object|string` | Submenu setup for desktop. Set default for the menu mode in desktop mode. Whenever any element in HTML has `desktop.state.body` class switch the menu mode to `desktop.state.mode` In the sample below scenario. By default the menu mode set to accordion in desktop mode. Whenever body tag has this class switch the menu mode to dropdown
Sample
    submenu: {
        desktop: {
            default: 'accordion',
            state: {
                body: 'kt-aside--minimize',
                mode: 'dropdown'
            }
        },
    },

### API Methods

Method | Description
--- | ---
`setDefaults(options)` | Set default options
Input Parameters
Name | Type | Description
--- | --- | ---
`options` | `object` | A new options object for the menu
`setActiveItem(item)` | Set active menu item
Input Parameters
Name | Type | Description
--- | --- | ---
`item` | `HTML object` | Menu item HTML element object
`getBreadcrumbs(item)` | Get breadcrumb for menu item
Input Parameters
Name | Type | Description
--- | --- | ---
`item` | `HTML object` | Menu item HTML element object
`getPageTitle(item)` | Get page title for menu item
Input Parameters
Name | Type | Description
--- | --- | ---
`item` | `HTML object` | Menu item HTML element object
`hideDropdown(item)` | Hide dropdown submenu item
Input Parameters
Name | Type | Description
--- | --- | ---
`item` | `HTML object` | Menu item HTML element object
`pauseDropdownHover(item)` | Disable menu for given time
Input Parameters
Name | Type | Description
--- | --- | ---
`item` | `HTML object` | Menu item HTML element object
`resumeDropdownHover(item)` | Enable menu item back after being paused
Input Parameters
Name | Type | Description
--- | --- | ---
`item` | `HTML object` | Menu item HTML element object
`getSubmenuMode()` | Get submenu mode
`reload()` | Reload the menu
`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...

> We truly hope that our love and dedication to produce an incredibly powerful high level solution suits all your project needs. We will continue to deliver incredible enterprise ready solutions for Angular, React and VueJS to serve you better. We sincerely hope you enjoyed using Keen as much as we enjoyed building it.

> Sean, Keenthemes Co-Author