Horizontal Layouts | Minible Vue Nuxt JS Admin & Dashboard Template

Minible has 7 different layouts. You can launch your new website in any layouts quickly. You can change any layout in less then a minute without changing any CSS and JS files!

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/components/side-bar.vue. You can add this menu link in "src/router/routes.js" 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 /store/layout.js inside the state variable.

Dark Sidebar

leftSidebarType: "dark"

Compact Sidebar

leftSidebarType: "compact"

Icon Sidebar

leftSidebarType: "icon"

Boxed Layout

layoutWidth: "boxed"

Colored Sidebar

leftSidebarType: "colored"

If you would like to have Horizontal Menu (or Topnav) based layout, simply update the below code
layoutType: "horizontal" at line number2 in the src/state/modules/layout.js