Vertical NavMenu

Vuexy Admin uses extended sidebar to give better UX & UI to stock sidebar provided by Vuesax framework
Vuexy Admin使用扩展的工具条为Vuesax框架提供的常规工具条提供更好的UX和UI

Name Update

VxSidebar component is now VerticalNavMenu.

Overview

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

Using Component

You can customize title, logo, sidebar items and parent div of v-nav-menu.
For customizing title, logo and parent div of sidebar using prop title, logo and parent.
You can easily add sidebar items/group by passing Array of Objects as prop to v-nav-menu component. Prop for passing Array is navMenuItems.
您可以自定义v-nav-menu的标题，徽标，侧边栏项目和父div。
用于使用props标题，徽标和父级来自定义边栏的标题，徽标和父级。
您可以通过将对象数组作为props传递到v-nav-menu组件来轻松添加侧边栏项目/组。 传递数组的道具是navMenuItems。

TIP Using > .layout--main is recommended as parent of > v-nav-menu. Using body as parent give unexpected behavior when full page layout route visited.Preview of > yourItemsArray, which can be passed as prop to > v-nav-menu.建议使用.layout—main作为v-nav-menu的父级。当访问整页布局路由时，将主体用作父对象会带来意外的行为。

export default [
    {
        url: null,
        name: "Dashboard",
        slug: "dashboard",
        icon: "HomeIcon",
        i18n: "Dashboard",
        submenu: [
            {
                url: '/dashboard/analytics',
                name: "Analytics",
                slug: "dashboardAnalytics",
                i18n: "Analytics",
            },
            {
                url: '/dashboard/ecommerce',
                name: "eCommerce",
                slug: "dashboardECommerce",
                i18n: "eCommerce",
            },
        ]
    },
    {
        header: "Apps",
        i18n: "Apps",
    },
    {
        url: "/apps/email",
        name: "Email",
        slug: "email",
        icon: "MailIcon",
        i18n: "Email",
    },
    {
        url: "/apps/chat",
        name: "Chat",
        slug: "chat",
        icon: "MessageSquareIcon",
        i18n: "Chat",
    },
    {
        url: "/apps/todo",
        name: "Todo",
        slug: "todo",
        icon: "CheckSquareIcon",
        i18n: "Todo",
    },
]

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

v-nav-menu component’s style are only invoked in it’s components. It is not globally available. So, If you plan to use stock sidebar provided by Vuesax Framework then you won’t get useless styles of v-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/verticalNavMenu.scss
v-nav-menu组件的样式仅在其组件中调用。 它不是全局可用的。 因此，如果您打算使用Vuesax Framework提供的股票补充工具栏，那么您将不会获得无用的v-nav-menu样式。
该组件的样式在文件按钮处导入。 侧边栏组件的样式可以在src / assets / scss / vuexy / components / verticalNavMenu.scss中找到

Dependencies

• Perfect Scrollbar
• Vuex Store
• Vue Router
• v-nav-menu-group component
• v-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
  显示在Vuexy Admin主侧栏中的数组 | | | title | String | | Set sidebar title
  设置sidebar的标题 | | | logo | String | path of your company logo | Add your company logo to main sidebar
  在main sidebar添加公司logo | | | parent | String | html element | Define parent of main sidebar. .layout—main is recommended
  定义main sidebar的父级，推荐layout-main | | | openHover | Boolean | true, false | setting true will open group on hover
  如果设置为true将在hover时打开 | |