Vuexy Admin now supports horizontal navigation Menu. You can add horizontal menu using h-nav-menu component.
Vuexy Admin现在支持水平导航菜单。您可以使用h-nav-menu组件添加水平菜单。

Overview

Component Name: h-nav-menu
Use case: Building horizontal navigation menu
Path: src/layouts/components/horizontal-nav-menu/VerticalNavMenu.vue
Is Globally Registred: false

Using Component

You can easily create horizontal menu by passing Array of Objects as prop to h-nav-menu component. Prop for passing Array is navMenuItems.
通过将对象数组作为props传递给h-nav-menu组件，您可以轻松创建水平菜单。传递数组的props是navMenuItems。

TIP You can also use same navMenuItems for both vertical & horizontal navigation menus.您也可以对垂直和水平导航菜单使用相同的navMenuItems。

Preview of yourItemsArray, which can be passed as prop to h-nav-menu.
yourItemsArray的预览，可以作为props传递给h-nav-menu。

Full API of this component can be found at bottom of this page.

TIP You can disable any group or item in sidebar by setting > isDisabled property to > true of group or item in sidebar items array.您可以通过将侧栏项目数组中的组或项目的isDisabled属性设置为true来禁用侧栏中的任何组或项目。

Changing Styles

h-nav-menu component’s style are only invoked in it’s components. It is not globally available.
h-nav-menu组件的样式仅在其组件中调用。它不是全局可用的。
Styles of this component is imported at the button of file. Styles of sidebar component can be found in src/assets/scss/vuexy/components/HorizontalNavMenu.scss
该组件的样式在文件按钮处导入。侧边栏组件的样式可以在src / assets / scss / vuexy / components / HorizontalNavMenu.scss中找到

Dependencies

  • Perfect Scrollbar
  • Vuex Store
  • Vue Router
  • h-nav-menu-group component
  • h-nav-menu-item component
  • feather-icon component

    API

    | Name | Type | Parameters | Description | default | | —- | —- | —- | —- | —- | | navMenuItems | Array | Array of objects | Array to display in main sidebar of Vuexy Admin | |