Vertical Layouts | Borex Admin & Dashboard Template

Vertical menu configuration

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

How to change width?

In order to change the width of left side navigation bar, open a file src/assets/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 src/partials/body.html 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" E.g. <body data-sidebar-size="md"> to have small sidebar.

Icon Sidebar

Keep your body element with data attribute data-sidebar-size="sm" E.g. <body data-sidebar-size="sm"> to have small sidebar.

Boxed Layout

Keep your body element with data attribute data-layout-size="boxed" and data attribute data-sidebar-size="sm" E.g. <body data-layout-size="boxed" data-sidebar-size="sm"> 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.