Layout Structure

Air 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 "topbar" and "subbar" component;

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

  3. Content - content block;

  4. Right Sidebar - block, based on the "sidebar" component;

  5. Footer - block, based on the "footer" component.

Code structure

<!-- meta, scripts, and styles includes here -->
<body class="">
<div class="air__initialLoading"></div>
<div class="air__layout air__layout--hasSider">
{{ "menu-left component"}}
{{ "sidebar component" }}
{{ "chat component" }}
<div class="air__layout">
<div class="air__layout__header">
<div class="air__utils__header">
{{ "topbar component" }}
{{ "subbar component" }}
<div class="air__layout__content">
<div class="air__utils__content">
{{ %contents% }}
<div class="air__layout__footer">
{{ "footer component" }}
  • Please see "Layout Configuration" section for the information on the possible classes of body tag