Navigation

A navigation component makes it easy for users to navigate through your application. Nav accepts Nav Item and Nav Disclosure elements as children.

Nav component goes along with slotted Nav Item and Nav Disclosure components.

Labeling

Text

The text attribute on the Nav Item component provides the Nav Item text.

Label

The label attribute on the Nav Disclosure component provides the nav disclosure label.

<script setup lang="ts">
import { VNav, VNavItem, VNavDisclosure } from '@vonage/vivid-api-vue';
</script>

<template>
  <VNav>
    <VNavDisclosure label="1st level item" open>
      <VNavItem text="2nd level item" href="#" />
    </VNavDisclosure>
  </VNav>
</template>

Icon

Use the icon slot to add an icon from the icon library to the Nav Item or Nav Disclosure components.

<script setup lang="ts">
import { VNav, VNavItem, VNavDisclosure, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VNav>
    <VNavItem text="Account" href="#"
      ><template #icon><VIcon name="profile" /></template
    ></VNavItem>
    <VNavItem text="Inbox" href="#"
      ><template #icon><VIcon name="inbox-line" /></template
    ></VNavItem>
    <VNavDisclosure label="Tools" open
      ><template #icon><VIcon name="design-tools-line" /></template>
      <VNavItem text="Edit" href="#"
        ><template #icon><VIcon name="edit-line" /></template
      ></VNavItem>
    </VNavDisclosure>
  </VNav>
</template>

<vwc-nav>
  <vwc-nav-item text="Account" href="#">
    <vwc-icon slot="icon" name="profile"></vwc-icon>
  </vwc-nav-item>
  <vwc-nav-item text="Inbox" href="#">
    <vwc-icon slot="icon" name="inbox-line"></vwc-icon>
  </vwc-nav-item>
  <vwc-nav-disclosure label="Tools" open>
    <vwc-icon slot="icon" name="design-tools-line"></vwc-icon>
    <vwc-nav-item text="Edit" href="#">
      <vwc-icon slot="icon" name="edit-line"></vwc-icon>
    </vwc-nav-item>
  </vwc-nav-disclosure>
</vwc-nav>

Icon Only

If the text is omitted, the Nav Item will be displayed as an icon-only Nav Item.

When an element has no visible text, provide an accessible name using the aria-labelattribute. This ensures screen reader users can understand the element’s purpose, even when it’s represented only by an icon or visual styling.

<script setup lang="ts">
import { VIcon, VNav, VNavItem } from '@vonage/vivid-api-vue';
</script>

<template>
  <VNav>
    <VNavItem href="#" aria-label="Account">
      <template #icon><VIcon name="profile" /></template>
    </VNavItem>
    <VNavItem href="#" aria-label="Inbox">
      <template #icon><VIcon name="inbox-line" /></template>
    </VNavItem>
    <VNavItem href="#" aria-label="Tools">
      <template #icon><VIcon name="design-tools-line" /></template>
    </VNavItem>
    <VNavItem href="#" aria-label="Edit">
      <template #icon><VIcon name="edit-line" /></template>
    </VNavItem>
  </VNav>
</template>

<vwc-nav>
  <vwc-nav-item href="#" aria-label="Account">
    <vwc-icon slot="icon" name="profile"></vwc-icon>
  </vwc-nav-item>
  <vwc-nav-item href="#" aria-label="Inbox">
    <vwc-icon slot="icon" name="inbox-line"></vwc-icon>
  </vwc-nav-item>
  <vwc-nav-item href="#" aria-label="Tools">
    <vwc-icon slot="icon" name="design-tools-line"></vwc-icon>
  </vwc-nav-item>
  <vwc-nav-item href="#" aria-label="Edit">
    <vwc-icon slot="icon" name="edit-line"></vwc-icon>
  </vwc-nav-item>
</vwc-nav>

Appearance

The appearance attribute controls the Nav Item and the Nav Disclosure components style.
The default appearance is ghost. Below it is set to ghost-light.

<script setup lang="ts">
import { VIcon, VNav, VNavItem, VNavDisclosure } from '@vonage/vivid-api-vue';
</script>

<template>
  <VNav>
    <VNavDisclosure appearance="ghost-light" open href="#" label="Settings" current>
      <template #icon><VIcon name="gear-line" /></template>
      <VNavItem appearance="ghost-light" href="#" text="Ghost Light" current>
        <template #icon><VIcon name="edit-line" /></template>
      </VNavItem>
    </VNavDisclosure>
    <VNavItem appearance="ghost-light" href="#" text="Account">
      <template #icon><VIcon name="profile" /></template>
    </VNavItem>
  </VNav>
</template>

<vwc-nav>
  <vwc-nav-disclosure appearance="ghost-light" open href="#" label="Settings" current>
    <vwc-icon slot="icon" name="gear-line"></vwc-icon>
    <vwc-nav-item appearance="ghost-light" href="#" text="Ghost Light" current>
      <vwc-icon slot="icon" name="edit-line"></vwc-icon>
    </vwc-nav-item>
  </vwc-nav-disclosure>
  <vwc-nav-item appearance="ghost-light" href="#" text="Account">
    <vwc-icon slot="icon" name="profile"></vwc-icon>
  </vwc-nav-item>
</vwc-nav>

Connotation

The connotation attribute controls the Nav Item and the Nav Disclosure components color of hover states the selected item.

<script setup lang="ts">
import { VIcon, VNav, VNavItem, VNavDisclosure } from '@vonage/vivid-api-vue';
</script>

<template>
  <div class="wrapper">
    <VNav class="navigation">
      <VNavDisclosure connotation="accent" appearance="ghost-light" open href="#" label="Settings" current>
        <template #icon><VIcon name="gear-line" /></template>
        <VNavItem connotation="accent" appearance="ghost-light" href="#" text="Cta connotation" current>
          <template #icon><VIcon name="edit-line" /></template>
        </VNavItem>
      </VNavDisclosure>
      <VNavItem connotation="accent" appearance="ghost-light" href="#" text="Account">
        <template #icon><VIcon name="profile" /></template>
      </VNavItem>
    </VNav>
    <VNav class="navigation">
      <VNavDisclosure connotation="cta" appearance="ghost-light" open href="#" label="Settings" current>
        <template #icon><VIcon name="gear-line" /></template>
        <VNavItem connotation="cta" appearance="ghost-light" href="#" text="Accent connotation" current>
          <template #icon><VIcon name="edit-line" /></template>
        </VNavItem>
      </VNavDisclosure>
      <VNavItem connotation="cta" appearance="ghost-light" href="#" text="Account">
        <template #icon><VIcon name="profile" /></template>
      </VNavItem>
    </VNav>
  </div>
</template>

<style>
.wrapper {
  display: flex;
  row-gap: 48px;
  column-gap: 16px;
  flex-wrap: wrap;
}
.navigation {
  min-inline-size: 240px;
}
</style>

<div class="wrapper">
  <vwc-nav class="navigation">
    <vwc-nav-disclosure connotation="accent" appearance="ghost-light" open href="#" label="Settings" current>
      <vwc-icon slot="icon" name="gear-line"></vwc-icon>
      <vwc-nav-item connotation="accent" appearance="ghost-light" href="#" text="Cta connotation" current>
        <vwc-icon slot="icon" name="edit-line"></vwc-icon>
      </vwc-nav-item>
    </vwc-nav-disclosure>
    <vwc-nav-item connotation="accent" appearance="ghost-light" href="#" text="Account">
      <vwc-icon slot="icon" name="profile"></vwc-icon>
    </vwc-nav-item>
  </vwc-nav>
  <vwc-nav class="navigation">
    <vwc-nav-disclosure connotation="cta" appearance="ghost-light" open href="#" label="Settings" current>
      <vwc-icon slot="icon" name="gear-line"></vwc-icon>
      <vwc-nav-item connotation="cta" appearance="ghost-light" href="#" text="Accent connotation" current>
        <vwc-icon slot="icon" name="edit-line"></vwc-icon>
      </vwc-nav-item>
    </vwc-nav-disclosure>
    <vwc-nav-item connotation="cta" appearance="ghost-light" href="#" text="Account">
      <vwc-icon slot="icon" name="profile"></vwc-icon>
    </vwc-nav-item>
  </vwc-nav>
</div>

<style>
  .wrapper {
    display: flex;
    row-gap: 48px;
    column-gap: 16px;
    flex-wrap: wrap;
  }
  .navigation {
    min-inline-size: 240px;
  }
</style>