HTML Structure

Folder Structure

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-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-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-overlay-menu-template vertical-overlay-menu-template/ folder contains overlay layout for modern admin.
6 horizontal-menu-template horizontal-menu-template/ folder contains horizontal layout for modern admin.
7 horizontal-menu-template-nav horizontal-menu-template-nav/ folder contains horizontal layout with full width for modern admin.
8 material-vertical-menu-template material-vertical-menu-template/ folder contains material based classic layout for modern admin.
9 material-vertical-content-menu-template material-vertical-content-menu-template/ folder contains material based content layout for modern admin.
10 material-vertical-compact-menu-template material-vertical-compact-menu-template/ folder contains material based compact layout for modern admin.
11 material-vertical-modern-menu-template material-vertical-modern-menu-template/ folder contains material based modern layout for modern admin.
12 material-vertical-overlay-menu-template material-vertical-overlay-menu-template/ folder contains material based overlay layout for modern admin.
13 material-horizontal-menu-template material-horizontal-menu-template/ folder contains material based horizontal layout for modern admin.
14 material-horizontal-menu-template-nav material-horizontal-menu-template-nav/ folder contains material based horizontal layout with full width for modern admin.
15 bank-menu-template bank-menu-template/ folder contains bank application pages for modern admin.
16 crypto-menu-template crypto-menu-template/ folder contains crypto application pages for modern admin.
17 ecommerce-menu-template ecommerce-menu-template/ folder contains ecommerce application pages for modern admin.
18 hospital-menu-template hospital-menu-template/ folder contains hospital application pages for modern admin.
19 travel-menu-template travel-menu-template/ folder contains travel application pages for modern admin.
20 support-menu-template support-menu-template/ folder contains support application pages for modern admin.
21 material-bank-menu-template material-bank-menu-template/ folder contains material based bank application pages for modern admin.
22 material-crypto-menu-template material-crypto-menu-template/ folder contains material based crypto application pages for modern admin.
23 material-ecommerce-menu-template material-ecommerce-menu-template/ folder contains material based ecommerce application pages for modern admin.
24 material-hospital-menu-template material-hospital-menu-template/ folder contains material based hospital application pages for modern admin.
25 material-travel-menu-template material-travel-menu-template/ folder contains material based travel application pages for modern admin.
26 material-support-menu-template material-support-menu-template/ folder contains material based support application pages for modern admin.
27 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-->
                        <!-- main menu footer-->
                        <div class="main-menu-footer footer-close">
                            .....
                        </div>
                        <!-- main menu footer-->
                    </div>
                
            

Content Structure

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>
                
            

Last but not least, footer structure to complete modern structure.

                
                    <footer class="footer footer-light">
                        .....
                    </footer>