Horizontal menu configuration
If you would like to have Horizontal Menu (or Topnav) based layout then perform below change.
- Vuejs
- Set
layoutType: "horizontal"at line number 2 in thesrc/state/modules/layout.js.
We have added samplesrc/router/layouts/horizontal.vuefile you can use that instead ofmain.vue. - Laravel-vue
-
If you would like to have Horizontal Menu (or Topnav) based layout, simply set horizontal in the file
resources/js/mixins/layouts.mixin.jsline number 5type: "horizontal".
How to add new/change menu items?
- Vuejs
- In order to add, change or remove menu items from the navbar, simply edit in file
/src/components/horizontal-menu.js. - Laravel-vue
-
In order to add, change or remove any ui elements from the top bar, simply edit in file
resources/js/components/horizontal-nav.vueand fileresources/js/locales/en.json.
How to use pre-built layouts?
Vuejs
Each of the layout options is provided below with steps you would need to perform in src/modules/layout.js in state object:
Topbar Light
Set topbar: "light" to have light topbar.
Colored Header
Set topbar: "colored" to have colored header.
Boxed Layout
Set layoutWidth: "boxed" to have boxed layout.
Scrollable
Set layoutWidth: "scrollable" to have scrollable layout.
Laravel-vue
Each of the layout options are provided below with steps you would need to
perform in resources/js/mixins/layouts.mixin.js update default case for layout :
Topbar Light
topbar: "light"
Boxed Layout
width: "boxed"
Colored Header
topbar: "colored"
Scrollable
topbar: "scrollable"