General HTML structure is the same throughout the template. Here is the Folder structure.
HTML Folder structure for modern assets.
modern_admin/
├── html/
| ├── ltr/
| | ├── vertical-menu-template/
| | ├── vertical-content-menu-template/
| | ├── vertical-compact-menu-template/
| | ├── vertical-modern-menu-template/
| | ├── vertical-collapsed-menu-template/
| | ├── vertical-overlay-menu-template/
| | ├── horizontal-menu-template/
| | ├── horizontal-menu-template-nav/
| | ├── material-vertical-menu-template/
| | ├── material-vertical-content-menu-template/
| | ├── material-vertical-compact-menu-template/
| | ├── material-vertical-modern-menu-template/
| | ├── material-vertical-collapsed-menu-template/
| | ├── material-vertical-overlay-menu-template/
| | ├── material-horizontal-menu-template/
| | ├── material-horizontal-menu-template-nav/
| | ├── bank-menu-template/
| | ├── crypto-menu-template/
| | ├── ecommerce-menu-template/
| | ├── hospital-menu-template/
| | ├── travel-menu-template/
| | ├── support-menu-template/
| | ├── material-bank-menu-template/
| | ├── material-crypto-menu-template/
| | ├── material-ecommerce-menu-template/
| | ├── material-hospital-menu-template/
| | ├── material-travel-menu-template/
| | ├── material-support-menu-template/
| ├── rtl/
Following is the details of what all html folders.
# | Folder/Files | Details |
---|---|---|
1 | vertical-menu-template | vertical-menu-template/ folder contains classic layout for modern admin. |
2 | vertical-content-menu-template | vertical-content-menu-template/ folder contains content layout for modern admin. |
3 | vertical-compact-menu-template | vertical-compact-menu-template/ folder contains compact layout for modern admin. |
4 | vertical-modern-menu-template | vertical-modern-menu-template/ folder contains modern layout for modern admin. |
5 | vertical-collapsed-menu-template | vertical-collapsed-menu-template/ folder contains collapsed layout for modern admin. |
6 | vertical-overlay-menu-template | vertical-overlay-menu-template/ folder contains overlay layout for modern admin. |
7 | horizontal-menu-template | horizontal-menu-template/ folder contains horizontal layout for modern admin. |
8 | horizontal-menu-template-nav | horizontal-menu-template-nav/ folder contains horizontal layout with full width for
modern admin. |
9 | material-vertical-menu-template | material-vertical-menu-template/ folder contains material based classic layout for modern
admin. |
10 | material-vertical-content-menu-template | material-vertical-content-menu-template/ folder contains material based content layout
for modern admin. |
11 | material-vertical-compact-menu-template | material-vertical-compact-menu-template/ folder contains material based compact layout
for modern admin. |
12 | material-vertical-modern-menu-template | material-vertical-modern-menu-template/ folder contains material based modern layout for
modern admin. |
13 | material-vertical-collapsed-menu-template | material-vertical-collapsed-menu-template/ folder contains material based collapsed layout for
modern admin. |
14 | material-vertical-overlay-menu-template | material-vertical-overlay-menu-template/ folder contains material based overlay layout
for modern admin. |
15 | material-horizontal-menu-template | material-horizontal-menu-template/ folder contains material based horizontal layout for
modern admin. |
16 | material-horizontal-menu-template-nav | material-horizontal-menu-template-nav/ folder contains material based horizontal layout
with full width for modern admin. |
17 | bank-menu-template | bank-menu-template/ folder contains bank application pages for modern admin. |
18 | crypto-menu-template | crypto-menu-template/ folder contains crypto application pages for modern admin. |
19 | ecommerce-menu-template | ecommerce-menu-template/ folder contains ecommerce application pages for modern admin.
|
20 | hospital-menu-template | hospital-menu-template/ folder contains hospital application pages for modern admin. |
21 | travel-menu-template | travel-menu-template/ folder contains travel application pages for modern admin. |
22 | support-menu-template | support-menu-template/ folder contains support application pages for modern admin. |
23 | material-bank-menu-template | material-bank-menu-template/ folder contains material based bank application pages for
modern admin. |
24 | material-crypto-menu-template | material-crypto-menu-template/ folder contains material based crypto application pages
for modern admin. |
25 | material-ecommerce-menu-template | material-ecommerce-menu-template/ folder contains material based ecommerce application
pages for modern admin. |
26 | material-hospital-menu-template | material-hospital-menu-template/ folder contains material based hospital application
pages for modern admin. |
27 | material-travel-menu-template | material-travel-menu-template/ folder contains material based travel application pages
for modern admin. |
28 | material-support-menu-template | material-support-menu-template/ folder contains material based support application pages
for modern admin. |
29 | rtl | rtl/ folder contains same template folders (as ltr folder) for modern admin. |
General HTML structure is the same throughout the template. Here is the header structure.
<nav role="navigation" class="header-navbar navbar navbar-with-menu fixed-top navbar-semi-dark navbar-shadow">
<div class="navbar-wrapper">
<div class="navbar-header">
.....
</div>
<div class="navbar-container content container-fluid">
<div id="navbar-mobile" class="collapse navbar-expand-sm">
.....
</div>
</div>
</div>
</nav>
<div id="fullscreen-search" class="fullscreen-search">
.....
</div>
<div class="fullscreen-search-overlay"></div>
Generate modern menu using below menu structure.
<div id="main-menu" data-scroll-to-active="true" class="main-menu menu-dark menu-fixed menu-shadow menu-accordion">
<!-- main menu header-->
<div class="main-menu-header">
<input type="text" placeholder="Search" class="menu-search form-control round"/>
</div>
<!-- / main menu header-->
<!-- main menu content-->
<div class="main-menu-content">
<ul id="main-menu-navigation" data-menu="menu-navigation" class="navigation navigation-main">
.....
</ul>
</div>
<!-- /main menu content-->
.....
</div>
<!-- main menu footer-->
</div>
Generate modern content area using following structure.
<div class="modern-content content container-fluid">
<div class="content-wrapper">
<div class="content-header row">
.....
</div>
<div class="content-body">
.....
</div>
</div>
</div>