Menu

Menu that provides navigation for your website

Use

Basic Use

By default, the component will generate routes from vue-router, Go to Router and Menu to view routing related usage

<template>
  <pro-menu class="docs-menu" />
</template>

Custom Mode

Set mode attribute to enable custom Mode

<template>
  <pro-radio-button
    v-model="mode"
    :data="data"
    style="margin-bottom: 16px"
  />
  <pro-menu
    :mode="mode"
    class="docs-menu"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const mode = ref('horizontal')
    const data = [
      { value: 'vertical', label: 'Vertical' },
      { value: 'horizontal', label: 'Horizontal' },
    ]

    return {
      mode,
      data,
    }
  },
})
</script>

Custom routes

Set routes attribute to enable custom routes

<template>
  <pro-menu
    :routes="routes"
    class="docs-menu"
  />
</template>

<script>
import { defineComponent, computed } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  setup() {
    const router = useRouter()
    const routes = computed(() => {
      const _routes = router.options.routes
      return (
        _routes.find((item) => {
          return item.path === '/en-US/components/'
        })?.children || _routes
      )
    })

    return {
      routes,
    }
  },
})
</script>

Custom router

Tip

Starting from 1.2.0, the Menu will not be compatible with the complete URL address jump, which needs to be realized by custom router

First you should configure :router="false", then handle the click through the select event

<template>
  <pro-menu
    :routes="routes"
    :router="false"
    mode="horizontal"
    class="docs-menu"
    @select="handleSelect"
  />
</template>

<script>
import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
import { isURL } from 'element-pro-components'

export default defineComponent({
  setup() {
    const router = useRouter()
    const routes = [
      {
        path: '/en-US/components/layout',
        meta: { title: 'Layout' },
      },
      {
        path: 'https://github.com/tolking/element-pro-components',
        meta: { title: 'Github' },
      },
      {
        path: 'https://github.com/tolking/element-admin-template',
        meta: { title: 'Template' },
      },
    ]

    function handleSelect(value) {
      isURL(value) ? window.open(value) : router.push(value)
    }

    return {
      routes,
      handleSelect,
    }
  },
})
</script>

Custom Group

Configure group: true for the meta in the routes to enable the group menu

<template>
  <pro-menu
    :routes="routes"
    class="docs-menu"
  />
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const routes = [
      {
        path: '/one',
        component: { template: 'one page' },
        meta: { title: 'one', group: true },
        children: [
          {
            path: '/one/index',
            component: { template: 'one index page' },
            meta: { title: 'oneIndex' },
          },
          {
            path: '/one/info',
            component: { template: 'one info page' },
            meta: { title: 'oneInfo' },
          },
        ],
      },
      {
        path: '/two',
        component: { template: 'two page' },
        meta: { title: 'two', group: true },
        children: [
          {
            path: '/two/index',
            component: { template: 'two page' },
            meta: { title: 'twoIndex' },
          },
          {
            path: '/two/info',
            component: { template: 'two page' },
            meta: { title: 'twoInfo' },
          },
        ],
      },
    ]

    return { routes }
  },
})
</script>

Custom color

Configure menu colors by CSS variables

<template>
  <pro-radio-button
    v-model="mode"
    :data="data"
    style="margin-bottom: 16px; margin-right: 16px"
  />
  <pro-radio-button
    v-model="collapse"
    :data="list"
    style="margin-bottom: 16px"
  />
  <pro-menu
    :mode="mode"
    :collapse="collapse"
    class="docs-menu"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const mode = ref('vertical')
    const collapse = ref(false)
    const data = [
      { value: 'vertical', label: 'Vertical' },
      { value: 'horizontal', label: 'Horizontal' },
    ]
    const list = [
      { value: true, label: 'Expand' },
      { value: false, label: 'Collapse' },
    ]

    return {
      mode,
      collapse,
      data,
      list,
    }
  },
})
</script>

<style scoped>
.docs-menu {
  --el-menu-active-color: #646cfd;
  --el-menu-bg-color: #37383f;
  --el-menu-hover-bg-color: #454654;
  --el-bg-color-overlay: var(--el-menu-hover-bg-color);
  --el-menu-text-color: #fff;
  --el-menu-hover-text-color: var(--el-menu-active-color);
}
</style>

Slots

Tip

Starting from 0.12.0, the internal menu will be implemented using svgicon by default. If you want to continue to use fonticon, you can use the slot in the following way to achieve

How to display the menu content through the default slot

<template>
  <pro-menu
    :routes="routes"
    class="docs-menu"
  >
    <template #default="item">
      <i
        v-if="item.meta?.icon"
        :class="item.meta.icon"
      />
      <span v-if="item.meta?.title">
        {{ item.meta.title }}
      </span>
    </template>
  </pro-menu>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const routes = [
      {
        path: '/en-US/components/menu',
        meta: { title: 'FontIcon', icon: 'el-icon-potato-strips' },
      },
      {
        path: '/en-US/components/menu',
        meta: { title: 'Development', icon: 'el-icon-cpu' },
      },
    ]

    return {
      routes,
    }
  },
})
</script>

Props

NameDescriptionTypeOptionsDefault
routescurrent routesarray-from vue-router
modemenu display modestringhorizontal / verticalvertical
collapsewhether the menu is collapsed (available only in vertical mode)boolean-false
ellipsiswhether the menu is ellipsis (available only in horizontal mode)boolean—true
default-openedsarray that contains indexes of currently active sub-menusArray--
unique-openedwhether only one sub-menu can be activeboolean-false
menu-triggerhow sub-menus are triggered, only works when mode is ‘horizontal’stringhover / clickhover
routerwhether to automatically activate the route actionboolean—true
collapse-transitionwhether to enable the collapse transitionboolean-true

Events

NameDescriptionParameters
selectcallback function when menu is activatedindex: index of activated menu, indexPath: index path of activated menu, item: the selected menu item
opencallback function when sub-menu expandsindex: index of expanded sub-menu, indexPath: index path of expanded sub-menu
closecallback function when sub-menu collapsesindex: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu

Slots

NameDescription
-Control menu display content, parameters { meta, path, redirect }