### Vertical Layouts

You can change or customize the left side navigation very easily. Following guide would help you to do that.

#### 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/partials/left-sidebar.php`. The change would reflect in all the html files automatically. We are using `gulp-file-include` which would actually take care of including the `left-sidebar.php` file content in all the html pages.

#### How to change width?

In order to change the width of left side navigation bar, open a file `src/scss/_theme-mode.scss` and change the value of variable `--#{$prefix}leftbar-width:`. The default value is set to `240px`.

#### How to use pre-built layouts?

Each of the layout options is provided below with steps you would need to perform:

##### Small Sidebar

Keep your body element with attribute `data-sidenav-size="compact"` E.g. `<html lang="en" data-sidenav-size="compact">` to have small sidebar.

##### Light Sidebar & Topbar Light

Keep your body element with attribute `data-menu-color="light"` E.g. `<html lang="en" data-menu-color="light">` to have dark sidebar. Add attribute `data-topbar-color="light"` to have light topnav.

##### Collapsed Sidebar

Keep your body element with class `enlarged` and data attribute `data-sidenav-size="condensed"` E.g. `<html lang="en" data-sidenav-size="condensed">` to have collapsed sidebar.

##### Boxed Layout

Keep your body element with class `enlarged boxed-layout` and data attribute `data-layout-mode="boxed"` E.g. `<html lang="en" data-layout-mode="boxed">` to have boxed layout.

##### Unsticky Layout

Keep your body element with class `unsticky-layout` E.g. `<html lang="en" data-layout-position="scrollable">` to have unsticky layout.