Vertical Layouts | Dashonic Bootstrap 5 Admin & Dashboard Template by Pichforest

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 240px.

How to use pre-built layouts?

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

Dark Sidebar

Add data attribute data-sidebar="dark" body element 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 compact sidebar.

Icon View 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" E.g. <body data-layout-size="boxed"> to have boxed layout.

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.