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

## Javascript

Metronic's JS codes are written in pure (vanila) Javascript (no jquery dependency) in order to make it easier to integrate with `HTML`, `Angular`, `React`, `VueJS` and `Laravel` frameworks. During the build process the JS codes are minified and moved to the assets folder (e.g: dist).

There are 2 types of the JS codes: Custom and Bundlable. The custom JS code is written in a JS file and minified and moved to the assets folder as a single file for each page or element that requires a certain level of customization, while the bundlable JS files are written in separate JS files that are also minified and added bundled into 1 main JS file.

## Components

The components folder in `[metronic]/theme/html/[demo]/src/js/components/` contains custom Metronic Components written in vanially Javascript. All components are used by `HTML`, `Angular`, `React`, `VueJS` and `Laravel` versions and globally available for all demos. For more info please check Components Documentation.

## Layout

The Layout Folder in `[metronic]/theme/html/[demo]/src/js/layout/` contains javascript files that handle the Layout Partials(Aside, Header, Footer, Subheader, etc). The Layout Javascript files are devided into `Base` and `Extended` groups where `Base` Javascript files are mandatory and `Extended` Javascript files are optional.

### Base

The Base Layout Javascript files in `[metronic]/theme/html/[demo]/src/js/layout/base` handle the following Layout Partials:

File | Description
--- | ---
`header.js` | Defines `KTLayoutHeader` class to handle the Header behavior and provide a basic API methods.
`header-topbar.js` | Defines `KTLayoutHeaderTopbar` class to handle the Header Topbar behavior and provide a basic API methods.
`header-menu.js` | Defines `KTLayoutHeaderTopbar` class to handle the Header Menu for desktop, tablet and mobile breakpoints and provide a basic API methods.
`brand.js` | Defines `KTLayoutBrand` class to handle the Brand(logo) Panel behavior and provide a basic API methods.
`aside.js` | Defines `KTLayoutAside` class to handle the Aside behavior and provide a basic API methods.
`aside-toggle.js` | Defines `KTLayoutMenu` class to handle the Aside Toggle behavior and provide a basic API methods.
`aside-menu.js` | Defines `KTLayoutAsideMenu` class to handle the Aside Menu for desktop, tablet and mobile breakpoints and provide a basic API methods.
`subheader.js` | Defines `KTLayoutSubheader` class to handle the Subheader behavior and provide a basic API methods.
`content.js` | Defines `KTLayoutAside` class to handle the Content behavior and provide a basic API methods.
`footer.js` | Defines `KTLayoutFooter` class to handle the Footer behavior and provide a basic API methods.
`sticky-card.js` | Defines `KTLayoutStickyCard` class to handle the Sticky Main Card behavior and provide a basic API methods.
`stretched-card.js` | Defines `KTLayoutStretchedCard` class to handle the Stretched Main Card behavior and provide a basic API methods.

The Base Components Javascript are mandatory and they must be included in the main bundle javascript file `[metronic]/theme/html/[demo]/assets/js/scripts.bundle.js` in order Metronic to perform properly.

### Extended

The Extended Components Javascript are optional to use and if they enabled they will be included in the main bundle javascript file `[metronic]/theme/html/[demo]/assets/js/scripts.bundle.js` and initialized globally in all pages.

File | Description
--- | ---
`scrolltop.js` | Defines `KTLayoutScrolltop` class to handle Scroll To Page Top Button functionality. Scroll the content and refer to the footer.
`chat.js` | Defines `KTLayoutChat` class to handle the Chat Popup behavior.
`demo-panel.js` | Defines `KTLayoutDemoPanel` class to handle the Demo Selection Offcanvas Panel(refer to the right center toolbar).
`examples.js` | Defines `KTLayoutExamples` class to handle the source code preview functionaly accross the demo pages.
`quick-actions.js` | Defines `KTLayoutQuickActions` class to handle the Topbar Quick Actions offcanvas panel.
`quick-cart.js` | Defines `KTLayoutQuickCartPanel` class to handle the Topbar Quick Cart offcanvas panel.
`quick-notifications.js` | Defines `KTLayoutQuickNotifications` class to handle the Topbar Quick Notifications offcanvas panel.
`quick-panel.js` | Defines `KTLayoutQuickPanel` class to handle the Topbar Quick Panel offcanvas panel.
`quick-search.js` | Defines `KTLayoutQuickSearch` class to handle the Topbar Quick Search offcanvas panel.
`quick-user.js` | Defines `KTLayoutQuickUser` class to handle the Topbar Quick User offcanvas panel.
`search.js` | Defines `KTLayoutSearch`, `KTLayoutSearchInline` and `KTLayoutSearchOffcanvas` classes to handle the Ajax Search Results For Topbar Quick Search Dropdown and Inline Panels.

## Vendors

Vendors folder contains 3rd-party plugins global configuration and iinitializion code.

## Pages

Pages folder contains custom Javascript files used to initialize all the theme demo features and examples. This Javascript code should be used as a reference. In your product create your own javascript files according to your requirements.

## Compilation

- Metronic compiles Layout,Components and Vendor Javascript files into the main Javascript bundle file that is included in all pages and initialized globally: `[metronic]/theme/html/[demo]/dist/assets/js/scripts.bundle.js`.
- Pages Javascript files are compiled separately into JS folder and used in pages on demand: `[metronic]/theme/html/[demo]/dist/assets/js/pages/`