HTML Structure

General HTML structure is the same throughout the template. Here is the Folder structure.

HTML Folder structure for Apex assets.


apex-admin-template/
└── html/
    ├── ltr/
    |   ├── vertical-menu-template/
    |   ├── vertical-menu-dark-template/
    |   ├── vertical-menu-transparent-template/
    |   ├── horizontal-menu-template/
    |   ├── horizontal-menu-dark-template/
    |   ├── horizontal-menu-transparent-template/
    |   └── vertical-collapsed-menu-template/
    └── rtl/

Following are the details of all html folders.

Folder/Files Details
vertical-menu-template vertical-menu-template/ folder contains classic layout for Apex admin.
vertical-menu-dark-template vertical-menu-dark-template/ folder contains dark layout for Apex admin.
vertical-menu-transparent-template vertical-menu-transparent-template/ folder contains transparent layout for Apex admin.
horizontal-menu-template horizontal-menu-template/ folder contains horizontal layout for Apex admin.
horizontal-menu-dark-template horizontal-menu-dark-template/ folder contains horizontal dark layout for Apex admin.
horizontal-menu-transparent-template horizontal-menu-transparent-template/ folder contains horizontal transparent layout for Apex admin.
vertical-collapsed-menu-template vertical-collapsed-menu-template/ folder contains classic collapsed layout for Apex admin.
rtl rtl/ folder contains same template folders (as ltr folder) for Apex admin.

Header Structure

General HTML structure is the same throughout the template. Here is the header structure.

<nav class="navbar navbar-expand-lg navbar-light header-navbar">
    <div class="container-fluid navbar-wrapper">
        <div class="navbar-header">
            ...
        </div>
        <div class="navbar-container">
            ...
        </div>
    </div>
</nav>

Content Structure

Generate Apex content area using following structure.

<div class="wrapper">
    <div class="main-panel">
        <div class="main-content">
            <div class="content-overlay"></div>
            <div class="content-wrapper">
                ...
            </div>
        </div>
    </div>
</div>