#### Vertical menu configuration

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

Each of the layout options is provided below with steps you would need to perform in `templates/partials/body.html.twig`:

##### Light Sidebar & Topbar Light

Remove data attribute `data-sidebar="light"`body element to have light sidebar Add data attribute `data-topbar="light"` body element to have light topbar.

##### 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 class `vertical-collpsed` and data attribute `data-layout-size="boxed" data-keep-enlarged="true"` E.g.`<body class="vertical-collpsed" 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-sidebar="colored"` E.g. `<body data-sidebar="colored">` to have colored sidebar.

##### Scrollable Layout

Keep your body element with data attribute `data-layout-scrollable="true"` E.g. `<body data-layout-scrollable="true">` to have Scrollable Layout.

##### 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-chase"> <div class="chase-dot"></div> <div class="chase-dot"></div> <div class="chase-dot"></div> <div class="chase-dot"></div> <div class="chase-dot"></div> <div class="chase-dot"></div> </div> </div> </div>`