Vertical Layouts | Minible Laravel 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 resources/views/layouts/sidebar.blade.php. The change would reflect in all the files automatically.

How to change width?

In order to change the width of left side navigation bar, open a file resources/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 in:

Dark Sidebar

Remove data attribute data-sidebar="dark" body element to have dark 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 data attribute data-sidebar-size="sm" and

data-layout-size="boxed"
                                                                        data-keep-enlarged="true"

E.g.

 <body data-sidebar-size="sm"
                                                                        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>