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.

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.
© 2017- Pixinvent, Hand-crafted & Made with ❤️