Vertical Layouts | Lexa Admin & Dashboard Template

Vertical menu configuration

You can change or customize the left side navigation very easily.

How to add new menu items/change menu items?

In order to add, change or remove menu items from the left side navigation, simply edit in file views/partials/sidebar.ejs. The change would reflect in all the ejs files automatically. We are using Webpack which would actually take care of including the sidebar.ejs file content in the all ejs pages.

How to change width?

In order to change the width of left side navigation bar, open a file src/assets/scss/_variables.scss and change the value of variable $sidebar-width. The default value is set to 250px.

How to use pre-built layouts?

Each of the layout options is provided below with steps you would need to perform :- open a file views/partials/body.ejs and add or remove attributes to body tag.

Light Sidebar

Remove data attribute data-sidebar="dark" body element to have light sidebar.

Compact Sidebar

Keep your body element with data attribute data-sidebar-size="small" E.g. <body data-sidebar-size="small"> to have small sidebar.

Icon Sidebar

Keep your body element with class vertical-collpsed" E.g. <body class="vertical-collpsed"> to have icon sidebar.

Boxed Layout

Keep your body element with class vertical-collpsed and data attribute data-layout-size="boxed" data-keep-enlarged="true" E.g. <body class="vertical-collpsed" data-layout-size="boxed" data-keep-enlarged="true"> to have boxed layout with icon view sidebar.

Colored Sidebar

Keep your body element with data attribute data-topbar="colored" E.g. <body data-topbar="colored"> to have colored sidebar.

Preloader

In order to add pre-loader in your page, include following html after body element.

<div id="preloader">
                                                                        <div id="status">
                                                                            <div class="spinner">
                                                                                <i class="uil-shutter-alt spin-icon"></i>
                                                                            </div>
                                                                        </div>
                                                                    </div>