Nav

Basic navigation

Active: dashboard

<script setup>
import { ref } from 'vue'
const active = ref('dashboard')
</script>

<template>
  <FuiNav :selected-value="active" @update:selected-value="active = $event">
    <FuiNavItem value="dashboard">
      <template #icon><svg>...</svg></template>
      Dashboard
    </FuiNavItem>
    <FuiNavItem value="settings">
      <template #icon><svg>...</svg></template>
      Settings
    </FuiNavItem>
  </FuiNav>
</template>

With categories

Active: dashboard

<script setup>
import { ref } from 'vue'
const active = ref('home')
</script>

<template>
  <FuiNav :selected-value="active" @update:selected-value="active = $event">
    <FuiNavItem value="home">Home</FuiNavItem>
    <FuiNavCategory>
      <template #title>Favorites</template>
      <FuiNavItem value="recents">Recents</FuiNavItem>
    </FuiNavCategory>
    <FuiNavDivider />
  </FuiNav>
</template>

Props

Component	Prop	Type	Default	Description
NavItem	value	string	required	Item value
NavItem	href	string	undefined	Link URL
NavItem	disabled	boolean	false	Disabled state
NavCategory	defaultOpen	boolean	false	Initially open