Nav

Examples

Size variants

Available ui prop values for size variants: m.

Group One
Button
Navigation Three
Navigation Four

<template>
<article>
  <section>
    <veui-nav
      ui="m"
      :items="items"
    />
  </section>
</article>
</template>

<script>
import { Nav } from 'veui'

export default {
  name: 'veui-nav-demo',
  components: {
    'veui-nav': Nav
  },
  data () {
    let items = [
      {
        label: 'Group One',
        name: 'group-one',
        children: [
          {
            label: 'Sub One',
            name: 'sub-one',
            children: [
              {
                label: 'Input',
                to: '/components/input'
              }
            ]
          },
          {
            label: 'Loading',
            name: 'Loading',
            to: '/components/loading',
            children: [
              {
                label: 'Switch',
                to: '/components/switch'
              }
            ]
          }
        ]
      },
      {
        label: 'Button',
        name: 'Button',
        to: '/components/button',
        children: [
          {
            label: 'Disabled',
            name: 'Disabled',
            disabled: true,
            children: [
              {
                label: 'Link',
                name: 'Link',
                to: '/components/link'
              }
            ]
          }
        ]
      },
      {
        label: 'Navigation Three',
        name: 'nav-three',
        disabled: true
      },
      {
        label: 'Navigation Four',
        name: 'nav-four',
        children: [
          {
            label: 'Progress',
            to: '/components/progress'
          }
        ]
      }
    ]
    return {
      items
    }
  }
}
</script>

Card Style

Set the position property of the first-level data item to card to display the drop-down menu as a card style.

Group One
Button
Navigation Three
Navigation Four

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-nav :items="items"/>
  </section>
</article>
</template>

<script>
import { Nav } from 'veui'

export default {
  name: 'veui-nav-demo',
  components: {
    'veui-nav': Nav
  },
  data () {
    let items = [
      {
        label: 'Group One',
        name: 'group-one',
        position: 'card',
        children: [
          {
            label: 'Sub One',
            name: 'sub-one',
            children: [
              {
                label: 'Input',
                to: '/components/input'
              }
            ]
          },
          {
            label: 'Loading',
            name: 'Loading',
            to: '/components/loading',
            children: [
              {
                label: 'Switch',
                to: '/components/switch'
              }
            ]
          }
        ]
      },
      {
        label: 'Button',
        name: 'Button',
        to: '/components/button',
        children: [
          {
            label: 'Disabled',
            name: 'Disabled',
            disabled: true,
            children: [
              {
                label: 'Link',
                name: 'Link',
                to: '/components/link'
              }
            ]
          }
        ]
      },
      {
        label: 'Navigation Three',
        name: 'nav-three',
        disabled: true
      },
      {
        label: 'Navigation Four',
        name: 'nav-four',
        children: [
          {
            label: 'Progress',
            to: '/components/progress'
          }
        ]
      }
    ]
    return {
      items
    }
  }
}
</script>

Custom slots

Group One
Button
Navigation Three
Navigation Four

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-nav
      :items="items"
    >
      <template #item-label="{ label }">
        <i>{{ label }}</i>
      </template>
    </veui-nav>
  </section>
</article>
</template>

<script>
import { Nav } from 'veui'

export default {
  name: 'veui-nav-demo',
  components: {
    'veui-nav': Nav
  },
  data () {
    let items = [
      {
        label: 'Group One',
        name: 'group-one',
        children: [
          {
            label: 'Sub One',
            name: 'sub-one',
            children: [
              {
                label: 'Input',
                to: '/components/input'
              }
            ]
          },
          {
            label: 'Loading',
            name: 'Loading',
            to: '/components/loading',
            children: [
              {
                label: 'Switch',
                to: '/switch'
              }
            ]
          }
        ]
      },
      {
        label: 'Button',
        name: 'Button',
        to: '/components/button',
        children: [
          {
            label: 'Disabled',
            name: 'Disabled',
            disabled: true,
            children: [
              {
                label: 'Link',
                name: 'Link',
                to: '/link'
              }
            ]
          }
        ]
      },
      {
        label: 'Navigation Three',
        name: 'nav-three',
        disabled: true
      },
      {
        label: 'Navigation Four',
        name: 'nav-four',
        children: [
          {
            label: 'Progress',
            to: '/components/progress'
          }
        ]
      }
    ]
    return {
      items
    }
  }
}
</script>

Adaptive layout

Automatically fold extra navigation items based on the actual rendering width.

Group One
Button
Navigation Three
Navigation Four

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-nav
      class="more-nav-items"
      :items="items"
    />
  </section>
</article>
</template>

<script>
import { Nav } from 'veui'

export default {
  name: 'veui-nav-demo',
  components: {
    'veui-nav': Nav
  },
  data () {
    let items = [
      {
        label: 'Group One',
        name: 'group-one',
        children: [
          {
            label: 'Sub One',
            name: 'sub-one',
            children: [
              {
                label: 'Input',
                to: '/components/input'
              }
            ]
          },
          {
            label: 'Loading',
            name: 'Loading',
            to: '/components/loading',
            children: [
              {
                label: 'Switch',
                to: '/components/switch'
              }
            ]
          }
        ]
      },
      {
        label: 'Button',
        name: 'Button',
        to: '/components/button',
        children: [
          {
            label: 'Disabled',
            name: 'Disabled',
            disabled: true,
            children: [
              {
                label: 'Link',
                name: 'Link',
                to: '/components/link'
              }
            ]
          }
        ]
      },
      {
        label: 'Navigation Three',
        name: 'nav-three',
        disabled: true
      },
      {
        label: 'Navigation Four',
        name: 'nav-four',
        children: [
          {
            label: 'Progress',
            to: '/components/progress'
          }
        ]
      }
    ]
    return {
      items
    }
  }
}
</script>

<style lang="less" scoped>
.more-nav-items {
  max-width: 300px;
}
</style>

API

Props

Name Type Default Description

ui

string

Predefined styles.

Value	Description
`m`	Medium size style.

items

Array<Object>

[]

An array of data sources, each node is of type {label, to, name, icon, disabled, children, ...}.

Name	Type	Description
`label`	`string`	The text description of the node.
`to`	`string \| Object`	The navigation destination of the node. See the `to` prop of the `Link` component for reference.
`name`	`string`	The unique identifier of the node, either `name` or `to` must exist.
`disabled`	`boolean`	Whether the node is disabled.
`position`	`string`	The drop-down panel style of the first-level node. If set to `card`, it will be displayed as a card style.
`children`	`Array<Object>`	The child node array of the node, with the same item type as the `items` prop array item.

active

string

The currently active node, if the node has a name property, it is the name value, otherwise the value is generated by the to prop (route.path).

matches

function(Object, string): boolean

Used to find the active item from items when the route changes.

Default implementation: if the project route path is equal (===) to the current route path, the project is considered active.

Slots

Name Description

item

The rendering slot for each node.

Default content: renders the icon and text description of the node.

Name	Type	Description
`label`	`string`	The text description of the node.
`to`	`string \| Object`	The navigation destination of the node. See the `to` prop of the `Link` component for reference.
`name`	`string`	The unique identifier of the node, either `name` or `to` must exist.
`disabled`	`boolean`	Whether the node is disabled.
`children`	`Array<Object>`	The child node array of the node, with the same item type as the `items` prop array item.

item-label

The label slot of the node.

Default content: renders the Link corresponding to the node.

Slot props refer to the item slot.

Events

Name	Description
`activate`	Triggered when the user clicks a node with `to`, and the parameter is the corresponding data item in `items`.
`click`	Triggered when the user clicks a node, and the parameter is the corresponding data item in `items`.

Icons

Name	Description
`expand`	Expand.
`more`	More.

Edit this page on GitHubEdit