Vertical

Vertical menu configuration

You can change the left side navigation very easily by adding the below attribute to the body tag in the src/state/modules/layout.js file.

layoutType="vertical"

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 src/layouts/main.vue. The change would reflect in all the Vue files automatically. We are using vue-cli which would take care of including the src/layouts/main.vue file content in all Vue pages.

How to use pre-built layouts?

Please do the below change in the html element at src/state/modules/layout.js.

Color Scheme

mode="light"

mode="dark"

Layout Width

layoutWidth="fluid"

layoutWidth="boxed"

Layout Position

position="fixed"

position="scrollable"

Topbar Colors

topbar="warning"

topbar="danger"

topbar="success"

Sidebar Sizes

sidebarSize="lg"

sidebarSize="md"

sidebarSize="sm"

sidebarSize="sm-hover"

Sidebar View

sidebarView="default"

sidebarView="detached"

Sidebar Colors

sidebarColor="light"

sidebarColor="dark"

sidebarColor="gradient"

sidebarColor="gradient-2"

sidebarColor="gradient-3"

sidebarColor="gradient-4"

Sidebar Images

sidebarImage="none"

sidebarImage="img-1"

sidebarImage="img-2"

sidebarImage="img-3"

sidebarImage="img-4"

Preloader Option

preloader="disable"

preloader="enable"