Helpful ready to use layouts that can save your time to get started with new page.
Frest provides following multiple layout types which are very easy to use.
<!-- Layout wrapper -->
<div class="layout-wrapper layout-content-navbar">
<!-- Layout container -->
<div class="layout-container">
<!-- Menu -->
<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
Menu (Navigation)
</aside>
<!--/ Menu -->
<!-- Layout page -->
<div class="layout-page">
<!-- Navbar -->
<nav class="layout-navbar navbar navbar-expand-xl align-items-center bg-navbar-theme" id="layout-navbar">
Navbar
</nav>
<!--/ Navbar -->
<!-- Content wrapper -->
<div class="content-wrapper">
<!-- Content -->
<div class="container-xxl d-flex align-items-stretch flex-grow-1 p-0">
<div class="flex-shrink-1 flex-grow-0 w-px-350 border-end container-p-x container-p-y">
<div class="layout-example-sidebar layout-example-content-inner">
Sidebar
</div>
</div>
<div class="flex-shrink-1 flex-grow-1 container-p-x container-p-y">
Content
</div>
</div>
<!--/ Content -->
<!-- Footer -->
<footer class="content-footer footer bg-footer-theme">
Footer
</footer>
<!--/ Footer -->
<!-- Content area backdrop -->
<div class="content-backdrop fade"></div>
</div>
<!--/ Content wrapper -->
</div>
<!--/ Layout page -->
</div>
<!--/ Layout container -->
<!-- Overlay -->
<div class="layout-overlay layout-menu-toggle"></div>
<!-- Drag Target Area To SlideIn Menu On Small Screens -->
<div class="drag-target"></div>
</div>
<!--/ Layout wrapper --><!-- Layout wrapper -->
<div class="layout-wrapper layout-content-navbar">
<!-- Layout container -->
<div class="layout-container">
<!-- Menu -->
<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
Menu (Navigation)
</aside>
<!--/ Menu -->
<!-- Layout page -->
<div class="layout-page">
<!-- Navbar -->
<nav class="layout-navbar navbar navbar-expand-xl align-items-center bg-navbar-theme" id="layout-navbar">
Navbar
</nav>
<!--/ Navbar -->
<!-- Content wrapper -->
<div class="content-wrapper">
<!-- Content -->
<div class="container-xxl d-flex align-items-stretch flex-grow-1 p-0">
<div class="flex-shrink-1 flex-grow-0 w-px-350 border-end container-p-x container-p-y">
<div class="layout-example-sidebar layout-example-content-inner">
Sidebar
</div>
</div>
<div class="flex-shrink-1 flex-grow-1 container-p-x container-p-y">
Content
</div>
</div>
<!--/ Content -->
<!-- Footer -->
<footer class="content-footer footer bg-footer-theme">
Footer
</footer>
<!--/ Footer -->
<!-- Content area backdrop -->
<div class="content-backdrop fade"></div>
</div>
<!--/ Content wrapper -->
</div>
<!--/ Layout page -->
</div>
<!--/ Layout container -->
<!-- Overlay -->
<div class="layout-overlay layout-menu-toggle"></div>
<!-- Drag Target Area To SlideIn Menu On Small Screens -->
<div class="drag-target"></div>
</div>
<!--/ Layout wrapper --><!-- Layout wrapper -->
<div class="layout-wrapper layout-navbar-full layout-horizontal layout-without-menu">
<!-- Layout container -->
<div class="layout-container">
<!-- Navbar -->
<nav class="layout-navbar navbar navbar-expand-xl align-items-center bg-navbar-theme" id="layout-navbar">
Navbar
</nav>
<!--/ Navbar -->
<!-- Layout page -->
<div class="layout-page">
<!-- Content wrapper -->
<div class="content-wrapper">
<!-- Menu -->
<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
Menu (Navigation)
</aside>
<!--/ Menu -->
<!-- Content -->
<div class="container-xxl flex-grow-1 container-p-y">
Content
</div>
<!--/ Content -->
<!-- Footer -->
<footer class="content-footer footer bg-footer-theme">
Footer
</footer>
<!--/ Footer -->
<!-- Content area backdrop -->
<div class="content-backdrop fade"></div>
</div>
<!--/ Content wrapper -->
</div>
<!--/ Layout page -->
</div>
<!--/ Layout container -->
<!-- Overlay -->
<div class="layout-overlay layout-menu-toggle"></div>
<!-- Drag Target Area To SlideIn Menu On Small Screens -->
<div class="drag-target"></div>
</div>
<!--/ Layout wrapper --><!-- Layout wrapper -->
<div class="layout-wrapper layout-content-navbar layout-without-menu">
<!-- Layout container -->
<div class="layout-container">
<!-- Layout page -->
<div class="layout-page">
<!-- Navbar -->
<nav class="layout-navbar navbar navbar-expand-xl align-items-center bg-navbar-theme" id="layout-navbar">
Navbar
</nav>
<!--/ Navbar -->
<!-- Content wrapper -->
<div class="content-wrapper">
<!-- Content -->
<div class="container-xxl flex-grow-1 container-p-y">
Content
</div>
<!--/ Content -->
<!-- Footer -->
<footer class="content-footer footer bg-footer-theme">
Footer
</footer>
<!--/ Footer -->
<!-- Content area backdrop -->
<div class="content-backdrop fade"></div>
</div>
<!--/ Content wrapper -->
</div>
<!--/ Layout page -->
</div>
<!--/ Layout container -->
<!-- Overlay -->
<div class="layout-overlay layout-menu-toggle"></div>
<!-- Drag Target Area To SlideIn Menu On Small Screens -->
<div class="drag-target"></div>
</div>
<!--/ Layout wrapper --><!-- Layout wrapper -->
<div class="layout-wrapper layout-content-navbar layout-without-navbar">
<!-- Layout container -->
<div class="layout-container">
<!-- Menu -->
<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
Menu (Navigation)
</aside>
<!--/ Menu -->
<!-- Layout page -->
<div class="layout-page">
<!-- Content wrapper -->
<div class="content-wrapper">
<!-- Content -->
<div class="container-xxl flex-grow-1 container-p-y">
Content
</div>
<!--/ Content -->
<!-- Footer -->
<footer class="content-footer footer bg-footer-theme">
Footer
</footer>
<!--/ Footer -->
<!-- Content area backdrop -->
<div class="content-backdrop fade"></div>
</div>
<!--/ Content wrapper -->
</div>
<!--/ Layout page -->
</div>
<!--/ Layout container -->
<!-- Overlay -->
<div class="layout-overlay layout-menu-toggle"></div>
<!-- Drag Target Area To SlideIn Menu On Small Screens -->
<div class="drag-target"></div>
</div>
<!--/ Layout wrapper --><!-- Layout wrapper -->
<div class="layout-wrapper layout-content-navbar">
<!-- Layout container -->
<div class="layout-container">
<!-- Menu -->
<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
Menu (Navigation)
</aside>
<!--/ Menu -->
<!-- Layout page -->
<div class="layout-page">
<!-- Navbar -->
<nav class="layout-navbar navbar navbar-expand-xl align-items-center bg-navbar-theme" id="layout-navbar">
Navbar
</nav>
<!--/ Navbar -->
<!-- Content wrapper -->
<div class="content-wrapper">
<!-- Content -->
<div class="container-fluid flex-grow-1 container-p-y">
Content
</div>
<!--/ Content -->
<!-- Footer -->
<footer class="content-footer footer bg-footer-theme">
Footer
</footer>
<!--/ Footer -->
<!-- Content area backdrop -->
<div class="content-backdrop fade"></div>
</div>
<!--/ Content wrapper -->
</div>
<!--/ Layout page -->
</div>
<!--/ Layout container -->
<!-- Overlay -->
<div class="layout-overlay layout-menu-toggle"></div>
<!-- Drag Target Area To SlideIn Menu On Small Screens -->
<div class="drag-target"></div>
</div>
<!--/ Layout wrapper --><!-- Layout wrapper -->
<div class="layout-wrapper layout-content-navbar">
<!-- Layout container -->
<div class="layout-container">
<!-- Menu -->
<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
Menu (Navigation)
</aside>
<!--/ Menu -->
<!-- Layout page -->
<div class="layout-page">
<!-- Navbar -->
<nav class="layout-navbar navbar navbar-expand-xl align-items-center bg-navbar-theme" id="layout-navbar">
Navbar
</nav>
<!--/ Navbar -->
<!-- Content wrapper -->
<div class="content-wrapper">
<!-- Content -->
<div class="container-xxl flex-grow-1 container-p-y">
Content
</div>
<!--/ Content -->
<!-- Footer -->
<footer class="content-footer footer bg-footer-theme">
Footer
</footer>
<!--/ Footer -->
<!-- Content area backdrop -->
<div class="content-backdrop fade"></div>
</div>
<!--/ Content wrapper -->
</div>
<!--/ Layout page -->
</div>
<!--/ Layout container -->
<!-- Overlay -->
<div class="layout-overlay layout-menu-toggle"></div>
<!-- Drag Target Area To SlideIn Menu On Small Screens -->
<div class="drag-target"></div>
</div>
<!--/ Layout wrapper -->Configure the initial layout by setting layout control classes to the <html> tag.
config.js instead of using layout option classes manually. It is not recommended to use layout options classes while using TemplateCustomizer.
| Class | Description |
|---|---|
layout-menu-collapsed
|
Collapse layout menu(navigation) on large screens (>= 1200px). For vertical menu only. |
layout-menu-fixed
|
Set layout menu(navigation) position to fixed. |
layout-navbar-fixed
|
Set layout navbar position to fixed. |
layout-footer-fixed
|
Set layout footer position to fixed. |