#### Template Customization

Vuexy HTML admin dashboard template provides different types of id, classes & attributes to customize the template.

This template can be customize directly from HTML code, please refer below section for more information.

##### HTML Snippet

Below HTML Snippet is the structutre of this template, you can use the defined id, class & attributes to customize the it.

                    <html lang="en" data-textdirection="ltr" class="loaded">
                    <head>
                    ...
                    </head>
                    <!-- BODY -->

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

                        <!-- NAVIGATION - MENU -->
                        <div data-scroll-to-active="true" class="main-menu menu-fixed menu-light menu-accordion menu-shadow expanded">
                        ...
                        </div>
                        <!--/ NAVIGATION - MENU -->

                        <!-- CONTENT -->
                        <div class="app-content content">

                            <!-- NAVBAR -->
                            <nav class="header-navbar navbar-expand-lg navbar navbar-with-menu floating-nav navbar-light navbar-shadow">
                              ...
                            </nav>
                            <!--/ NAVBAR -->

                        </div>
                        <!--/ CONTENT -->

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

                    </body>
                    <!--/ BODY -->
                    </html>

#### Body Options

Template `<body>` tag has the following page customization options as shown in the table.

Values / Classes | Description
--- | ---
"vertical-menu-modern" | data-menu attribute use for the referance to know the menu type, Set data-menuattribute value "vertical-menu-modern" for vertical menu type.
"1-column", "2-columns", "content-left-sidebar", "content-right-sidebar", "content-detached-left-sidebar", "content-detached-right-sidebar" | data-col attribute use for the referance to know the page columns, Set data-col attribute value based on your column structure requirement, for demo please check the template layout section.
"vertical-layout vertical-menu-modern" | for vertical layout & menu use class "vertical-layout vertical-menu-modern".

#### Layout Options

Template `<body>` tag has the following layout customization options as shown in the table.

Layouts | Layout Classes | Description
--- | --- | ---
Dark Layout | `.dark-layout` | To Create a Dark Layout, you need to add `.dark-layout` class with `<body>` tag. `.menu-dark` class in navigation `<div>` and `.navbar-dark` in `<nav>` tag.
Semi Dark Layout | `.semi-dark-layout` | To Create a Semi Dark Layout, you need to add `.semi-dark-layout` class with `<body>` tag.`.menu-dark` class in navigation `<div>` and `.navbar-light` in `<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.

#### Navbar Options

Template `<nav>` tag has the following navbar customization options as shown in the table.

Navbar Classes | Description
--- | ---
`.navbar-floating` & `.floating-nav` | Create a navbar with margin space and fixed at top you need to add `.navbar-floating` class with `<body>` tag and add `.floating-nav` class with `<nav>` tag.
`.navbar-sticky` & `.fixed-top` | Create a navbar with full width and fixed at top you need to add `.navbar-sticky` class with `<body>` tag and add `.fixed-top` class with `<nav>` tag.
`.navbar-static` & `.navbar-static-top` | Create a full-width navbar that scrolls away with the page by adding `.navbar-static` class with `<body>` tag and add `.navbar-static-top` class with `<nav>` tag.

#### Navigation (Menu) Options

Note

Vuexy admin template provides vertical navigation options. Below tables shows the both navigation customization options, but most of all are the same.

##### Vertical Navigation

Below table contain vertical navigation customization options.

Navigation Classes | Description
--- | ---
`.menu-fixed` | To create vertical fixed navigation, you need to add `.menu-fixed` class in navigation `<div>` tag.
`.menu-static` | To create vertical static navigation, you need to add `.menu-static` class in navigation `<div>` tag.
`.menu-light` | To create light vertical navigation, you need to add `.menu-light` class in navigation `<div>` tag.
`.menu-dark` | To create dark vertical navigation, you need to add `.menu-dark` class in navigation `<div>` tag.
`.menu-accordion` | Default vertical navigation type is accordion navigation. To create vertical accordion navigation, you need to add `.menu-accordion` class in navigation `<div>` tag.
`.menu-shadow` | You can also apply navigation shadow bottom by adding `.menu-shadow` class in navigation `<div>` tag. This navigation class is optional.

#### Footer Options

Below table contain footer customization options.

Footer Classes | Description
--- | ---
`.footer-static` | To set footer scrolled with content you need to add `.footer-static` class in `<body>`tag and `<footer>`tag.
`.footer-fixed` | To set footer fixed on content you need to add `.footer-fixed` class in `<body>` tag.
`.footer-light` | To set footer transparent you need to add `.footer-light` class in `<footer>` tag.