CSS Classes

This table contains all classes related to the layout collapsed menu. This is a custom layout classes for collapsed menu layout page requirements.

All these options can be set via following classes:

Classes Description
.menu-collapsed You can create collapsed menu layout by adding .menu-collapsed class with <body> tag.

HTML Markup

This section contains HTML Markup to create layout collapsed menu. You need to add .menu-collapsed class along with <body> tag. Default layout of the template comes with expanded menu layout but you can create collapsed menu layout with below changes.

Vuexy has a ready to use starter kit, you can use this layout directly by using layout-collapsed-menu.html.


<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body class="vertical-layout vertical-menu-modern navbar-floating footer-static menu-collapsed" data-menu="vertical-menu-modern">   <!-- Add here -->

    <!-- BEGIN: Navbar -->
    <nav class="header-navbar navbar navbar-expand-lg align-items-center floating-nav navbar-light navbar-shadow">
      ...
    </nav>
    <!-- END: Navbar -->

    <!-- BEGIN: Main Menu -->
    <div class="main-menu menu-fixed menu-light menu-accordion menu-shadow" data-scroll-to-active="true">
      ...
    </div>
    <!-- END: Main Menu -->

    <!-- BEGIN: Content -->
    <div class="app-content content">

        <!-- Content-wrapper -->
        <div class="content-wrapper">
          ...
        </div>

    </div>
    <!-- END: Content -->

    <!-- Begin: Footer -->
    <footer class="footer footer-static footer-light">
      ...
    </footer>
    <!-- END: Footer -->

  </body>
</html>