Support, all rights reserved. 2018 ©
Material Able v1.0 documentation.

Getting started

Material able is fully responsive bootstrap 4 admin template for your complete need.

What's included

  • files/
    • assets/
      • css/
        • style.css
        • pages.css
        • widget.css
        • ...- More
      • icon/
        • feather/css/feather.css
        • icofont/css/icofont.css
        • themify-icons/themify-icons.css
        • ...- More
      • images/
        • logo.png
        • avatar-1.png
        • avatar-2.png
        • avatar-3.png
        • ...-More
      • js/
        • vertical/
          • vertical-layout.js
          • horizontal-layout.js
        • script.js
        • pcoded.js
        • SmoothScroll.js
        • ...- More
      • Pages/
        • dashboard/
          • custom-dashboard.js
          • project-dashboard.js
          • ...-More
        • widget/
          • widget-chart.js
          • widget-chart-advanced.js
        • flag-icon.js
        • form-validation.js
        • ...-More
      • scss/
        • partial/
          • menu/. .
          • pages/. .
          • element/. .
          • _genral.scss
        • style.scss
      • index.html
      • dashboard-project.html
      • dashboard-crm.html
      • widget-statistic.html
      • button.html


How to Use templates?

Here are described various ways of using this sidebar, you can read and adapt them to your website's requirements. Below are described all options with details.

CSS Files to Include


<!-- framework -->
<link rel="stylesheet" type="text/css" href="../files/bower_components/bootstrap/css/bootstrap.min.css">

<!-- waves.css -->
<link rel="stylesheet" href="../files/assets/pages/waves/css/waves.min.css" type="text/css" media="all">

<!-- feather icon -->
<link rel="stylesheet" type="text/css" href="../files/assets/icon/font-awesome/css/font-awesome.min.css">

<!-- main style -->
<link rel="stylesheet" type="text/css" href="../files/assets/css/style.css">

JS Files to Include


<!-- Required Jquery -->
<script type="text/javascript" src="../files/bower_components/jquery/js/jquery.min.js"></script>
<script type="text/javascript" src="../files/bower_components/jquery-ui/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../files/bower_components/popper.js/js/popper.min.js"></script>
<script type="text/javascript" src="../files/bower_components/bootstrap/js/bootstrap.min.js"></script>

<!-- waves js -->
<script src="../files/assets/pages/waves/js/waves.min.js"></script>

<!-- jquery slimscroll js -->
<script type="text/javascript" src="../files/bower_components/jquery-slimscroll/js/jquery.slimscroll.js"></script>

<!-- Custom js -->
<script src="../files/assets/js/pcoded.min.js"></script>
<script src="../files/assets/js/vertical/vertical-layout.min.js"></script>
<script type="text/javascript" src="../files/assets/js/script.min.js"></script>

Simple Use with Default Menu



	<!-- [ Pre-loader ] start -->
	<div class="loader-bg">
		<div class="loader-bar"></div>
	<!-- [ Pre-loader ] end -->

	<div id="pcoded" class="pcoded">
		<div class="pcoded-overlay-box"></div>
		<div class="pcoded-container navbar-wrapper">

    		<!-- [ Header ] start -->
			<nav class="navbar header-navbar pcoded-header">
				<div class="navbar-wrapper">
					<div class="navbar-logo">

                        <a class="mobile-menu waves-effect waves-light" id="mobile-collapse" href="#!">
							<i class="feather icon-toggle-right"></i>

                        <a href="index.html">
							<img class="img-fluid" src="../files/assets/images/logo.png" alt="Theme-Logo" />

                        <a class="mobile-options waves-effect waves-light">
							<i class="feather icon-more-horizontal"></i>
					<div class="navbar-container container-fluid">

                        <ul class="nav-left">
							<!-- . . . header left content hear . . .  -->

                        <ul class="nav-right">
							<!-- . . . header right content hear . . .  -->

			<!-- [ Header ] end -->

			<!-- [ chat user list ] start -->
			<div id="sidebar" class="users p-chat-user showChat">
				<!-- . . . chat user list content hear . . .  -->
			<!-- [ chat user list ] end -->

			<!-- [ chat message ] start -->
			<div class="showChat_inner">
				<!-- . . . chat user message content hear . . .  -->
			<!-- [ chat message ] end -->

            <div class="pcoded-main-container">
				<div class="pcoded-wrapper">

            		<!-- [ navigation menu ] start -->
					<nav class="pcoded-navbar">
						<div class="pcoded-inner-navbar main-menu">
							<!-- . . . Sidebar menu content hear . . .  -->
					<!-- [ navigation menu ] end -->

            		<div class="pcoded-content">

                        <!-- [ breadcrumb ] start -->
						<div class="page-header">
							<!-- . . . breadcrumb content hear . . .  -->
						<!-- [ breadcrumb ] end -->

                        <div class="pcoded-inner-content">
							<div class="main-body">
								<div class="page-wrapper">
									<div class="page-body">

                                        <!-- [ page content ] start -->
										<div class="row">
											<!-- . . . . . . . . . . . . . .  . . .  -->
											<!-- . . . Main body content hear . . .  -->
											<!-- . . . . . . . . . . . . . .  . . .  -->
										<!-- [ page content ] end -->


                    <!-- [ style Customizer ] start -->
					<div id="styleSelector">
						<!-- . . . Live Customizer hear . . .  -->
					<!-- [ style Customizer ] end -->



How to initiate Pcoded plugin with default option


$("#pcoded" ).pcodedmenu();

How to initiate Pcoded plugin with default option


var Navbarbg = "themelight1";           //  navbar color                themelight1 / theme1
var headerbg = "theme1";                //  header color                theme1 / theme2 / theme3 / theme4 / theme5 / theme6
var menucaption = "theme1";             //  menu caption color          theme1 / theme2 / theme3 / theme4 / theme5 / theme6 / theme7 / theme8 / theme9
var bgpattern = "theme1";               //  background color            theme1 / theme2 / theme3 / theme4 / theme5 / theme6
var activeitemtheme = "theme1";         //  menu active color           theme1 / theme2 / theme3 / theme4 / theme5 / theme6 / theme7 / theme8 / theme9 / theme10 / theme11 / theme12
var frametype = "theme1";               //  preset frame color          theme1 / theme2 / theme3 / theme4 / theme5 / theme6
var layout_type = "light";              //  theme layout color          dark / light
var layout_width = "wide";              //  theme layout size           wide / box
var menu_effect_desktop = "shrink";     //  navbar effect in desktop    shrink / overlay / push
var menu_effect_tablet = "overlay";     //  navbar effect in tablet     shrink / overlay / push
var menu_effect_phone = "overlay";      //  navbar effect in phone      shrink / overlay / push
var menu_icon_style = "st2";            //  navbar menu icon            st1 / st2

Menu Options

Default Option is True

Sr. No. Option Discription
1 Plugins Provide horizontal and vertical navigation. you can adapt them to your website's requeriments. value should be 'vertical' , 'horizontal'
2 Plugins Provide Click and Hover trigger on different level. This Menu trigger option work only first level. you can adapt them to your website's requeriments. value should be 'click' , 'hover'
3 This option working same as MenuTrigger: option. but its work on all menu level rather then first level. This option is most useful in vertical navigation you can adapt them to your website's requeriments. value should be 'click' , 'hover'
4 This option place active class on clicked menu item and its parent menu item . value should be 'active'
5 Use this option to set background of header on pcoded class. value should be 'theme1', 'theme2', 'theme3', 'theme4', 'theme5', 'theme6'
6 Use this option to set single color or multicolor icon on navbar icon. value should be 'st1', 'st2'
7 Use this option to set light or dark layout of theme. value should be 'light', 'dark'
8 Use this option to set background pattern on body.value should be 'theme1', 'theme2', 'theme3', 'theme4', 'theme5', 'theme6'
this option will only work if you have selected verticalMenulayout:"box"
9 Use this option to set background color on Right Header. Plugins provide 9 header background. value should be 'theme1', 'theme2', 'theme3', 'theme4', 'theme5', 'theme6'
10 Use this option to set background color on Left Header. Plugins provide 9 left header background. value should be 'theme1', 'theme2', 'theme3', 'theme4', 'theme5', 'theme6'
11 Use this option to set background color on Navigation. Plugins provide 9 navigation background.
value should be 'theme1', 'themelight1'
12 Use this option to set background color on Active Menu Item. Plugins provide 9 background 9 on Active Menu Item.
value should be 'theme1', 'theme2', 'theme3', 'theme4', 'theme5', 'theme6', 'theme7', 'theme8', 'theme9', 'theme10', 'theme11', 'theme12'
This option will only work if you have selected ActiveItemStyle:"style1" Option.
13 Still this features not working
14 You can change Active Item Style by use this option. value should be 'style0', 'style1'
if you choose 'style0' then default option style will work.
15 Use this option to set or remove border on menu item .on value should be 'true', 'false'
Default option is 'true'
16 Use this option to set border style . Plugin provide 3 border style.value should be 'solid/dotted/dashed'
Default Option is 'solid'
This option will work if you have choose ItemBorder:"true".
17 Plugin provide 3 style to change drop down menu item icons. value should be 'style1/style2/style3'
Default option value is 'style1'
18 Use this option to fix navigation. value should be 'true', 'false'
Default option value is 'false'
19 Use this option to fix header. value should be 'true', 'false'
Default option value is 'false'
This Option work only vertical navigation.
20 Use this option to place sidebar on left and right side. value should be 'left', 'right'
Default option value is 'left'
21 Plugin provide three type menu layout . value should be 'wide', 'box'
Default option value is 'wide'
22 This option provide ability to change the sub menu item icons style on vertical navigation. value should be 'style1' to 'style6' or 'no icon'
Default option value is 'style1'
23 Plugin provide three navigation effect. you can set menu effect according to device. value should be 'shrink','push','overlay'
Default option value on desktop is 'shrink'
Default option value on tablet is 'push'
Default option value on phone is 'overlay'
24 Plugin provide multi vertical navigation style. you can set defalult navigation style accoding to device. value should be 'expanded','collapsed','offcanvas','compact','fullpage','ex-popover','sub-expanded'
Default option value on desktop is 'expanded'
Default option value on tablet is 'collapsed'
Default option value on phone is 'offcanvas'
25 Plugin provide change vertical navigation on toggle according to different device and size. value should be 'expanded','collapsed','offcanvas','compact','fullpage','ex-popover','sub-expanded'
Default option value on desktop is 'collapsed'
Default option value on tablet is 'expanded'
Default option value on phone is 'expanded'


SCSS Basics

Please note that all Detail main Web Site.. Click Here..

_variable.scss files

// General variables
										// General variables
$theme-bg-color: #f3f3f3;
$theme-font-color: #455a64;
$theme-font-family:'Open Sans', sans-serif;

// Theme colors variables;
$danger-color: #ff5252;
$info-color :#00bcd4;
$white-txt: #fff;

_menu.scss files


// menu caption colors variables;
$menu-title: #448aff,#5D4037,#4CAF50,#d84315,#4527a0,#37474f,#000,#999,#fff;

// header colors variables;
$header-theme: #448aff,#5D4037,#4CAF50,#d84315,#4527a0,#37474f;

// background pattern color [ used in box layout ]  variables;
$box-bg-color: #448aff,#5D4037,#4CAF50,#d84315,#4527a0,#37474f;

// Dark navbar color variables;
$left-navbar-theme: #37474f;

// light navbar color variables;
$left-navbar-light-theme: #fff;

// menu active item color variables;
$active-item: #448aff,#5D4037,#4CAF50,#d84315,#4527a0,#37474f,#11c788,#FF5252,#ff784f,#38a9f9,#038f9e,#39ADB5;

// menu item icon color variables;
$icon-color: #448aff,#5D4037,#4CAF50,#d84315,#4527a0;


Plugins Name Plugins page use Plugins css customize js Link
Ace-editor ____ ____ View Resource
Animation style.css assets/pages/animation.js View Resource
Calender fullcalendar.css assets/pages/animation.js View Resource
Charts c3.css chart-chartjs.js View Resource
Ck-Editor editor.css assets/pages/ckeditor-custom.js View Resource
Color-Picker spectrum.css assets/pages/advance-form.js View Resource
Count Down ___ assets/pages/countdown.js View Resource
Data-Table buttons.dataTables.min.css assets/pages/data-table.js View Resource
Date Picker bootstrap-material-datetimepicker.css assets/pages/advance-form.js View Resource
E-Charts assets/pages/echart.js View Resource
Edit-Table ____ assets/pages/editable.js View Resource
File-Upload dropzone.css __ View Resource
Foo-Table footable.standalone.min.css assets/pages/foo-table.js View Resource
Form-Mask __ assets/pages/form-mask.js View Resource
Forms-Wizard-Validation jquery.steps.css assets/pages/form-validation.js View Resource
Gallery lightgallery.css assets/pages/gallery.js View Resource
Grid Stack __ assets/pages/gridstack.js View Resource
High lighter shThemeDefault.css assets/pages/gridstack.js View Resource
Image-Crop cropper.css assets/pages/croper.js View Resource
Isotope __ assets/pages/landing-page.js View Resource
Jq Pagination jqpagination.css assets/pages/other.js View Resource
Jquery-Fab jquery-fab.css assets/pages/button-fab.js View Resource
Light-Box lightbox.css assets/pages/gallery.js View Resource
Light-Box2 lightbox.css assets/pages/gallery.js View Resource
list __ assets/pages/list-custom.js View Resource
List-Scroll stroll.css assets/pages/list-custom.js View Resource
Map-Google __ assets/pages/google-maps.js View Resource
Map-Vector jquery-jvectormap.css assets/pages/map-vector.js View Resource
Max-length __ assets/pages/advance-form.js View Resource
Modal component.css assets/pages/modal.js View Resource
Multi-select bootstrap-multiselect.css assets/pages/advance-form.js View Resource
Nestable nestable.css assets/pages/nestable.js View Resource
Notification notification.css assets/pages/notification.js View Resource
Pricing style.css __ View Resource
Radial style.css __ View Resource
Range-Slider bootstrap-slider.css assets/pages/range-slider.js View Resource
Rating rating.css __ View Resource
Responsive-Table rwd-table.min.css __ View Resource
Search rwd-table.min.css assets/js/main.js View Resource
Select2 select2.min.css assets/pages/advance-form.js View Resource
Slim Scroll __ assets/js/menu.js View Resource
Sortable __ assets/js/menu.js View Resource
Sticky jquery.postitall.css assets/pages/sticky.js View Resource
Sweet Alert sweetalert.css assets/pages/modal.js View Resource
Switchery switchery.min.css assets/pages/advance-form.js View Resource
Tags bootstrap-tagsinput.css assets/pages/advance-form.js View Resource
Task-Detail __ assets/pages/task-detail.js View Resource
TimeLine style.css __ View Resource
Todo __ assets/plugins/todo/js/todo.js View Resource
Tour enjoyhint.css assets/pages/tour.js View Resource
Tree-View treeview.css __ View Resource
Waves waves.min.css __ View Resource
Wysiwyg-Editor __ assets/pages/wysiwyg-editor.js View Resource
X-Editable __ assets/pages/xeditable.js View Resource


Begin typing your question. If we don't have an answer for it in our FAQ, please leave us a message on our contact page.

  • What is Material able?

    Material able is responsive admin template/dashboard which useful for your complete entire projects like CRM system - Task System - User Management System - Social Dashboard etc. Without any trouble Material able gives the perfect outcome with tons of ready made plugins which helps you at every step while creating any project.
  • Why chooseMaterial able?

    Material able built using bootstrap's latest version 4 which have complete compatibility on bootstrap4. It is fully crafted for every one's need and its fullfilled those need too. Tons of Plugins, Forms, Charts, Tables, Custom Pages gives extra smoothness in project.
  • Licence terms?

    Material able comes with single license usage and support for every single purchase. If you want to use Material able for multiple project you must buy the extra licence for that.
  • What about Item Support?

    We only support those purchaser who purchased Material able. 6 months included support comes with every single purchase of Material able.
  • What is Support Turnaround time ?

    When you comment or submit the ticket for support. Our team takes it very seriously and respond it within a Half or Full day.
  • How i rate the Material able ?

    It just a simple. Go to your account. Then check your download section where you found Material able Template. Click on start ratings. Simple !!!

Version Change Log

Detailed version change log describe below.


27-03-2019 - v1.0 Release