Metronic Documentation

This is Metronic 7 documentation!

Upon purchase you can get Metronic 7 version from our Github Repository.

The new Metronic 8 is now available with the most advanced Bootstrap 5, VueJS, React and Laravel foundation with a solid light and dark mode design system, extensive utility classes and custom made in-house components.

View Metronic 8 documentation

To use most of the Metronic build tools, Node.js LTS version is required. Version 14.x LTS is recommended. Some of the plugins and framework in Metronic v7 does not support the latest Node.js version. https://nodejs.org/en/

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/

VERSIONS

GENERAL