Layout Structure

Clean UI HTML Admin Template layout structure overview

The original display of template consists of the following blocks

Layout Structure Visualization
  1. Top-bar - block, based on the "Top-bar Module";

  2. Left Sidebar - block, based on the "Menu-left Module" (or "Menu-top Module");

  3. Content - content block;

  4. Right Sidebar - block, based on the "Menu-right Module";

  5. Footer - block, based on the "Footer Module".

Code structure

<html>
<head>
<!-- meta, scripts, and styles includes here -->
</head>
<body class="">
<div class="cui-initial-loading"></div>
<div class="cui-layout cui-layout-has-sider">
{{ "menu-right module"}}
{{ "menu-left module" }}
<div class="cui-layout">
<div class="cui-layout-header">
{{ "topbar module" }}
</div>
<div class="cui-layout-content">
{{ "breadcrumbs module" }}
<div class="cui-utils-content">
{{ %contents% }}
</div>
</div>
<div class="cui-layout-footer">
{{ "footer module" }}
</div>
</div>
</div>
</body>
</html>
  • Please see the section "Layout Configuration" for the information on the possible classes of body tag;

  • The template can contain any set of modules and in any order.

‚Äč