Folder Structure

General HTML structure is the same throughout the template. Here is the Folder structure.

HTML Folder structure for vuexy assets.



vuexy-html-bootstrap-admin-template/
├── html/
|   ├── ltr/
|   |   ├── vertical-menu-template/
|   |   ├── vertical-menu-template-dark/
|   |   ├── vertical-menu-template-semi-dark/
|   |   ├── vertical-menu-template-bordered/
|   |   ├── vertical-collapsed-menu-template/
|   |   ├── horizontal-menu-template/
|   |   ├── horizontal-menu-template-dark/

      

Following is the details of what all html folders.

# Folder/Files Details
1 vertical-menu-template vertical-menu-template/ folder contains classic layout for Vuexy admin.
2 vertical-menu-template-dark vertical-menu-template-dark/ folder contains dark layout for Vuexy admin.
3 vertical-menu-template-semi-dark vertical-menu-template-semi-dark/ folder contains semi-dark layout for Vuexy admin.
4 vertical-menu-template-bordered vertical-menu-template-bordered/ folder contains bordered layout for Vuexy admin.
5 vertical-collapsed-menu-template vertical-collapsed-menu-template/ folder contains collapsed menu layout for Vuexy admin.
6 horizontal-menu-template horizontal-menu-template/ folder contains classic horizontal layout for Vuexy admin.
7 horizontal-menu-template-dark horizontal-menu-template-dark/ folder contains horizontal dark layout for Vuexy admin.

HTML Structure

Following are the structures of basic HTML, header, menu, content and footer.

Basic HTML

General HTML structure is same for all template pages.


<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
  <!-- BEGIN: Head-->

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="description" content="Vuexy admin is super flexible, powerful, clean & modern responsive bootstrap 4 admin template with unlimited possibilities.">
    <meta name="keywords" content="admin template, Vuexy admin template, dashboard template, flat admin template, responsive admin template, web app">
    <meta name="author" content="PIXINVENT">
    <title>Layout Empty - Vuexy - Bootstrap HTML admin template</title>
    <link rel="apple-touch-icon" href="../app-assets/images/ico/apple-icon-120.png">
    <link rel="shortcut icon" type="image/x-icon" href="../app-assets/images/ico/favicon.ico">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500;1,600" rel="stylesheet">

    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="../app-assets/vendors/css/vendors.min.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Theme CSS-->
    <link rel="stylesheet" type="text/css" href="../app-assets/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../app-assets/css/bootstrap-extended.css">
    <link rel="stylesheet" type="text/css" href="../app-assets/css/colors.css">
    <link rel="stylesheet" type="text/css" href="../app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="../app-assets/css/themes/dark-layout.css">
    <link rel="stylesheet" type="text/css" href="../app-assets/css/themes/bordered-layout.css">
    <link rel="stylesheet" type="text/css" href="../app-assets/css/themes/semi-dark-layout.css">

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="../app-assets/css/core/menu/menu-types/vertical-menu.css">
    <!-- END: Page CSS-->

    <!-- BEGIN: Custom CSS-->
    <link rel="stylesheet" type="text/css" href="../assets/css/style.css">
    <!-- END: Custom CSS-->

  </head>
  <!-- END: Head-->

  <!-- BEGIN: Body-->

  <body class="vertical-layout vertical-menu-modern navbar-floating footer-static " data-open="click" data-menu="vertical-menu-modern" data-col="">

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


    <!-- 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">
      ...
    </div>
    <!-- END: Content-->

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


    <!-- BEGIN: Vendor JS-->
    <script src="../app-assets/vendors/js/vendors.min.js"></script>
    <!-- BEGIN Vendor JS-->

    <!-- BEGIN: Page Vendor JS-->
    <!-- END: Page Vendor JS-->

    <!-- BEGIN: Theme JS-->
    <script src="../app-assets/js/core/app-menu.js"></script>
    <script src="../app-assets/js/core/app.js"></script>
    <script src="../app-assets/js/scripts/customizer.js"></script>
    <!-- END: Theme JS-->

    <!-- BEGIN: Page JS-->
    <!-- END: Page JS-->

    <script>
      $(window).on('load', function() {
        if (feather) {
          feather.replace({
            width: 14,
            height: 14
          });
        }
      });
    </script>
  </body>
  <!-- END: Body-->

</html>

          
Body Options

<body> tag has the following page customization options:

Values / Classes Description
vertical-menu-modern data-menu attribute is used for the reference to know the menu type. Set data-menu attribute value as vertical-menu-modern for vertical menu type.
1-column, content-left-sidebar, content-right-sidebar, content-detached-left-sidebar, content-detached-right-sidebar data-col attribute is used for the reference to know the page columns. Set data-col attribute value based on your column structure requirement, for demo please check the template layout sections.
.vertical-layout.vertical-menu-modern Use these classes for vertical layout and menu.
Layout Options

<body> tag has the following layout customization options:

Layouts Layout Classes Description
Dark Layout .dark-layout To Create a Dark Layout, you need to add .dark-layout class with <html> tag, .menu-dark class with .main-menu class and .navbar-dark class with <nav> tag.
Semo Dark Layout .semi-dark-layout To Create a Semi Dark Layout, you need to add .semi-dark-layout class with <html> tag, .menu-dark class with .main-menu class.
Bordered Layout .bordered-layout To Create a Bordered Layout, you need to add .bordered-layout class with <html> tag, .menu-light class with .main-menu class and .navbar-light class with <nav> tag.
Default Menu Collapsed .menu-collapsed To Create a collapsed Layout, you need to add .menu-collapsed class and remove .menu-expanded class from <body> tag.

General HTML structure is the same throughout the template. Here is the header structure.


<nav class="header-navbar navbar navbar-expand-lg align-items-center floating-nav navbar-light navbar-shadow">
  <div class="navbar-container d-flex content">
    <div class="bookmark-wrapper d-flex align-items-center">
      <!-- Menu toggler for small screen sizes -->
      <ul class="nav navbar-nav d-xl-none">
        <li class="nav-item">
          <a class="nav-link menu-toggle is-active" href="#">
            ...
          </a>
        </li>
      </ul>
      <!-- Bookmarked items -->
      <ul class="nav navbar-nav bookmark-icons">
        ...
      </ul>
      <!-- Icon to bookmark other items -->
      <ul class="nav navbar-nav">
        <li class="nav-item">
          <a class="nav-link bookmark-star">
            ...
          </a>
          <div class="bookmark-input search-input">
            ...
          </div>
        </li>
      </ul>
    </div>

    <!-- Use the following code to add shadow below the navbar for Floating Navbar only -->
    <div class="app-content content">
      <div class="header-navbar-shadow"></div>
    </div>
  </div>
</nav>

          
Navbar Options

<nav> tag has the following navbar customization options:

Navbar Options Navbar Classes Description
Floating Navbar .navbar-floating & .floating-nav To create a navbar with margin and fixed at top, you need to add .navbar-floating class with <body> tag and .floating-nav class with <nav> tag.
Sticky Navbar .navbar-sticky & .fixed-top To create a navbar with full width (without margin) and fixed at top, you need to add .navbar-sticky class with <body> tag and .fixed-top class with <nav> tag.
Static Navbar .navbar-static & .navbar-static-top To create a full-width navbar that scrolls away with the page, you need to add .navbar-static class with <body> tag and add .navbar-static-top class with <nav> tag.
Hidden Navbar .navbar-hidden & .d-none If you do not want a navbar on your page, you need to add .navbar-hidden class with <body> tag and .d-none class with <nav> tag.

Generate Vuexy menu using below menu structure:


<div class="main-menu menu-fixed menu-light menu-accordion menu-shadow" data-scroll-to-active="true">
  <!-- Main Menu Header-->
  <div class="navbar-header">
    ...
  </div>
  <!-- / Main Menu Header-->

  <!-- Add the following div to add shadow below the main header -->
  <div class="shadow-bottom" style="display: block;"></div>

  <!-- Main Menu Content-->
  <div class="main-menu-content">
    <ul class="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation">
      ...
    </ul>
  </div>
  <!--/ Main Menu Content-->
</div>

          

Below table contain vertical navigation customization options.

Navigation Options Navigation Classes Description
Fixed Menu .menu-fixed To create vertical fixed navigation, you need to add .menu-fixed class in navigation <div> tag.
Menu Light .menu-light To create light vertical navigation, you need to add .menu-light class in navigation <div> tag.
Menu Dark .menu-dark To create dark vertical navigation, you need to add .menu-dark class in navigation <div> tag.
Menu with Shadow .menu-shadow You can also apply navigation shadow bottom by adding .menu-shadow class in navigation <div> tag. This navigation class is optional.

Content Structure

Generate Vuexy content area using following structure:


<div class="app-content content">
  <div class="content-wrapper">
    <div class="content-header row">
      ...
    </div>
    <div class="content-body">
      ...
    </div>
  </div>
</div>

          

Generate Vuexy footer using following structure:


<footer class="footer footer-light">
  ...
</footer>

          
Footer Options

Below table contains footer customization options:

Footer Options Footer Classes Description
Sticky Footer .footer-fixed To set footer fixed on content, you need to add .footer-fixed class with <body> tag.
Static Footer .footer-static To set footer scrolled with content, you need to add .footer-static class with <body>tag as well as <footer>tag.
Hidden Footer .footer-hidden To hide your footer, you need to add .d-none class with <footer> tag.