vue-input-components

Navigation Component

A flexible navigation component for Vue 3 applications with support for different navigation styles and nested items.

Properties

Property	Type	Default	Description
items	NavigationItem[]	[]	Array of navigation items
type	‘tabs’ | ‘tiles’	‘tabs’	Navigation style type
activeItem	string	’’	Currently active item ID
showIcons	boolean	true	Whether to show icons for navigation items
iconSize	‘normal’ | ‘large’	‘normal’	Size of the icons

NavigationItem Interface

interface NavigationItem {
  id: string
  label: string
  icon?: string
  href?: string
  items?: NavigationItem[]
  width?: string
}

Events

Event	Description
update:activeItem	Emitted when the active item changes
click	Emitted when a navigation item is clicked

Examples

Basic Tabs Navigation

<template>
  <Navigation :items="items" type="tabs" v-model:activeItem="activeItem" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Navigation } from '@a-vision-software/vue-input-components'

const activeItem = ref('dashboard')
const items = ref([
  {
    id: 'dashboard',
    label: 'Dashboard',
    icon: 'home',
    href: '/dashboard',
  },
  {
    id: 'profile',
    label: 'Profile',
    icon: 'user',
    href: '/profile',
  },
  {
    id: 'settings',
    label: 'Settings',
    icon: 'cog',
    href: '/settings',
  },
])
</script>

Tiles Navigation with Nested Items

<template>
  <Navigation :items="items" type="tiles" v-model:activeItem="activeItem" iconSize="large" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Navigation } from '@a-vision-software/vue-input-components'

const activeItem = ref('dashboard')
const items = ref([
  {
    id: 'dashboard',
    label: 'Dashboard',
    icon: 'home',
    href: '/dashboard',
    width: '200px',
  },
  {
    id: 'reports',
    label: 'Reports',
    icon: 'chart-bar',
    items: [
      {
        id: 'sales',
        label: 'Sales Report',
        icon: 'chart-line',
        href: '/reports/sales',
      },
      {
        id: 'inventory',
        label: 'Inventory Report',
        icon: 'boxes',
        href: '/reports/inventory',
      },
    ],
  },
  {
    id: 'settings',
    label: 'Settings',
    icon: 'cog',
    href: '/settings',
    width: '150px',
  },
])
</script>

Custom Styled Navigation

<template>
  <Navigation
    :items="items"
    type="tabs"
    v-model:activeItem="activeItem"
    class="custom-navigation"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Navigation } from '@a-vision-software/vue-input-components'

const activeItem = ref('home')
const items = ref([
  {
    id: 'home',
    label: 'Home',
    icon: 'home',
    href: '/',
  },
  {
    id: 'about',
    label: 'About',
    icon: 'info-circle',
    href: '/about',
  },
  {
    id: 'contact',
    label: 'Contact',
    icon: 'envelope',
    href: '/contact',
  },
])
</script>

<style scoped>
.custom-navigation {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 1rem;
}

.custom-navigation :deep(.navigation__tab) {
  border-radius: 4px;
  transition: all 0.3s ease;
}

.custom-navigation :deep(.navigation__tab--active) {
  background-color: #007bff;
  color: white;
}

.custom-navigation :deep(.navigation__tab:hover) {
  background-color: #e9ecef;
}
</style>