Vertical Layouts | Minible - Angular 18 Admin & Dashboard Template

Vertical menu configuration

You can change or customize the left side navigation very easily.

How to add new/change menu items?

In order to add, change or remove menu items from the left side navigation, simply edit in file src/app/layouts/sidebar/menu.ts. You can add this menu link in "src/app/pages/pages-routing.module.ts" file where all routes are pre-defined for menus. And it will be accessible from browser.

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/app/layouts/vertical/vertical.component.ts in ngAfterViewInit method:

Light Sidebar & Topbar Dark

Set data attribute document.body.setAttribute("data-topbar", "dark"); to have dark topbar.

Compact Sidebar

Set data attribute document.body.setAttribute('data-sidebar-size', 'small'); document.body.setAttribute('data-sidebar', 'dark'); and remove other attributes.

Icon Sidebar

Add class to the body element like document.body.classList.add('sidebar-enable'); document.body.classList.add('vertical-collpsed'); and remove other attributes.

Boxed Layout

Add class to the body element like

document.body.setAttribute('data-keep-enlarged', 'true'); document.body.setAttribute('data-layout-size', 'boxed'); document.body.setAttribute('data-sidebar', 'dark');

Scrollable

Add class to the body element like document.body.setAttribute('data-layout-scrollable', 'true');.

Colored Sidebar

Set data attribute document.body.setAttribute("data-sidebar", "colored"); and remove other attributes.