Layouts

Helpful ready to use layouts that can save your time to get started with new page.

Layouts

Materialize 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 container-xxl navbar navbar-expand-xl navbar-detached 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 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 container-xxl navbar navbar-expand-xl navbar-detached 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-horizontal menu-horizontal  menu bg-menu-theme flex-grow-0">
          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 container-xxl navbar navbar-expand-xl navbar-detached 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 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 container-fluid navbar navbar-expand-xl navbar-detached 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 container-xxl navbar navbar-expand-xl navbar-detached 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 -->

Options

Configure the initial layout by setting layout control classes to the <html> tag.

Tip: Use TemplateCustomizer and configure template easily using 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.