Vertical

  1. Docs
  2. Vertical

Vertical menu configuration

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

data-layout="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 views/partials/sidebar.ejs. The change would reflect in all the ejs files automatically.

How to use pre-built layouts?

Please do the below change in the html element at views/partials/main.ejs file. ex: <html data-layout-width="fluid">

Layout Width

image data-layout-width="fluid"
image data-layout-width="boxed"

Layout Position

data-layout-position="fixed"
data-layout-position="scrollable"

Topbar Colors

image data-topbar="light"
image data-topbar="dark"

Sidebar Sizes

image data-sidebar-size="lg"
image data-sidebar-size="md"
image data-sidebar-size="sm"
image data-sidebar-size="sm-hover"

Sidebar View

image data-layout-style="default"
image data-layout-style="detached"

Sidebar Colors

image data-sidebar="dark"
image data-sidebar="light"
image data-sidebar="gradient"
image data-sidebar="gradient-2"
image data-sidebar="gradient-3"
image data-sidebar="gradient-4"

Sidebar Images

image data-sidebar-image="none"
image data-sidebar-image="img-1"
image data-sidebar-image="img-2"
image data-sidebar-image="img-3"
image data-sidebar-image="img-4"

Preloader Option

data-preloader="disable"
data-preloader="enable"