Vertical Layouts

  1. Docs
  2. Vertical Layouts

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 add menu in /src/components/menu.js. You have to add this menu link in "src/router/routes.js" file where all routes are pre-defined for menus. And it will be accessible from browser.

How to change width?

In order to change the width of left side navigation bar, open a file src/design/_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 /src/state/modules/layout.js.

image
Light Sidebar & Topbar Dark
Set leftSidebarType: "light" to have light sidebar and dark topbar.
image
Compact Sidebar
Set leftSidebarType: "compact" to have compact sidebar.
image
Icon Sidebar
Set leftSidebarType: "icon" to have icon sidebar.
image
Boxed Layout
Set layoutWidth: "boxed" to have boxed layout.