Vertical Layouts | Symox - Admin & Dashboard Template

Vertical menu configuration

You can simply use copy paste the resources/views/layouts/master-layouts.blade.php code into the master.blade.php to make changes in all the pages.

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 resources/views/layouts/sidebar.blade.php. The change would reflect in the all pages automatically.

How to change width?

In order to change the width of left side navigation bar, open a file resources/scss/_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 the resources/views/layouts/master.blade.php file:

Dark Sidebar

Add data attribute in body element data-sidebar="dark" E.g. <body data-sidebar="dark"> to have dark sidebar.

Compact Sidebar

Keep your body element with data attribute

data-sidebar-size="md"
                                                                        data-sidebar="dark"

E.g.

 <body data-sidebar-size="md"
                                                                        data-sidebar="dark">

to have small sidebar.

Icon Sidebar

Keep your body element with data attribute

data-sidebar-size="sm"
                                                                        data-sidebar="dark"

E.g.

 <body data-sidebar-size="sm"
                                                                        data-sidebar="dark">

to have small sidebar.

Boxed Layout

Keep your body element with data attribute data-layout-size="boxed" and data attribute

data-sidebar-size="sm"
                                                                        data-sidebar="dark"

E.g.

 <body data-layout-size="boxed"
                                                                        data-sidebar-size="sm"
                                                                        data-sidebar="dark">

to have boxed layout with icon view sidebar.

Brand Sidebar

Keep your body element with data attribute data-sidebar="brand" E.g. <body data-sidebar="brand"> 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.