Navigation

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

Usage

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

import { registerNav, registerNavItem, registerNavDisclosure } from '@vonage/vivid-api';

registerNav('your-prefix');
registerNavItem('your-prefix');
registerNavDisclosure('your-prefix');

<script type="module">
  import { registerNav, registerNavItem, registerNavDisclosure } from '@vonage/vivid-api';
  registerNav('your-prefix');
  registerNavItem('your-prefix');
  registerNavDisclosure('your-prefix');
</script>

<your-prefix-nav>
  <your-prefix-nav-item text="Navigation"></your-prefix-nav-item>
  <your-prefix-nav-disclosure label="Disclosure">
    <your-prefix-nav-item text="Navigation"></your-prefix-nav-item>
  </your-prefix-nav-disclosure>
</your-prefix-nav>

Href

Use href to set the URL that the Nav Item links to.

Current

Use the current attribute on Nav Item to indicate the currently active link.

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

<template>
  <VNav>
    <VNavItem href="#" text="Current Nav Item" current />
    <VNavItem href="#" text="Nav Item" />
  </VNav>
</template>

Use the current attribute on Nav Disclosure to indicate the currently active disclosure.
Only when the Nav Disclosure is closed the current will be set.

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

<template>
  <VNav>
    <VNavDisclosure label="1st level item" current>
      <template #icon><VIcon name="profile" /></template>
      <VNavItem href="#" text="2nd level item" current />
    </VNavDisclosure>
  </VNav>
</template>

<vwc-nav>
  <vwc-nav-disclosure label="1st level item" current>
    <vwc-icon slot="icon" name="profile"></vwc-icon>
    <vwc-nav-item href="#" text="2nd level item" current></vwc-nav-item>
  </vwc-nav-disclosure>
</vwc-nav>

The aria-current prop is deprecated in both Nav Item and Nav Disclosure (as of 05/25) and directly replaced with current. aria-current is still functional in the component, but will be removed in a future major release. This will be communicated when it’s removal becomes a release candidate at the end of the support period.

Open

Use the open attribute to toggle the Nav Disclosure open state.

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

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

Slots

Meta Slot

Use the meta slot to add additional content to the Nav Item and the Nav Disclosure.

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

<template>
  <VNav>
    <VNavDisclosure label="1st level item" open>
      <template #meta><VBadge text="beta" connotation="success" appearance="subtle" shape="pill" /></template>
      <VNavItem href="#" text="2nd level item">
        <template #meta><VBadge text="in progress" connotation="warning" appearance="subtle" shape="pill" /></template>
      </VNavItem>
    </VNavDisclosure>
  </VNav>
</template>

<vwc-nav>
  <vwc-nav-disclosure label="1st level item" open>
    <vwc-badge slot="meta" text="beta" connotation="success" appearance="subtle" shape="pill"></vwc-badge>
    <vwc-nav-item href="#" text="2nd level item">
      <vwc-badge slot="meta" text="in progress" connotation="warning" appearance="subtle" shape="pill"></vwc-badge>
    </vwc-nav-item>
  </vwc-nav-disclosure>
</vwc-nav>

Icon Slot

Set the icon slot to add an icon to the Nav Item and the Nav Disclosure. If set, the icon attribute is ignored.

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

<template>
  <VNav>
    <VNavDisclosure label="1st level item" open>
      <template #icon><VIcon name="check-circle-solid" connotation="success" /></template>
      <VNavItem href="#" text="2nd level item">
        <template #icon><VIcon name="close-circle-solid" connotation="alert" /></template>
      </VNavItem>
    </VNavDisclosure>
  </VNav>
</template>

<vwc-nav>
  <vwc-nav-disclosure label="1st level item" open>
    <vwc-icon slot="icon" name="check-circle-solid" connotation="success"></vwc-icon>
    <vwc-nav-item href="#" text="2nd level item">
      <vwc-icon slot="icon" name="close-circle-solid" connotation="alert"></vwc-icon>
    </vwc-nav-item>
  </vwc-nav-disclosure>
</vwc-nav>

API Reference

nav

Slots

Name	Description
default	Default slot.

Name	Description
default	Default slot.

nav-item

Properties

Property	Type	Description
appearance	`'ghost' \| 'ghost-light'`	Sets the nav item's appearance
connotation	`'accent' \| 'cta'`	Sets the connotation color of the selected nav item
current	`boolean`	Sets the nav item as a current
download	`string`	Prompts the user to save the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
href	`string`	The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
hreflang	`string`	Hints at the language of the referenced resource. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
ping	`string`	See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
referrerpolicy	`string`	See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
rel	`string`	See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
target	`'_self' \| '_blank' \| '_parent' \| '_top'`	See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
text	`string`	Text of the nav item
type	`string`	See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.

Property	Type	Description
appearance	`'ghost' \| 'ghost-light'`	Sets the nav item's appearance
connotation	`'accent' \| 'cta'`	Sets the connotation color of the selected nav item
current	`boolean`	Sets the nav item as a current
download	`string`	Prompts the user to save the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
href	`string`	The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
hreflang	`string`	Hints at the language of the referenced resource. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
ping	`string`	See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
referrerpolicy	`string`	See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
rel	`string`	See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
target	`'_self' \| '_blank' \| '_parent' \| '_top'`	See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.
text	`string`	Text of the nav item
type	`string`	See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a \| <a> element for more information.

Slots

Name	Description
icon	The preferred way to add an icon to the component.
meta	A slot to add additional content to the nav item.

Name	Description
icon	The preferred way to add an icon to the component.
meta	A slot to add additional content to the nav item.

nav-disclosure

Properties

Property	Type	Description
appearance	`'ghost' \| 'ghost-light'`	The appearance nav-disclosure should have.
connotation	`'accent' \| 'cta'`	The connotation nav-disclosure should have.
current	`boolean`	Indicates there's a nested active nav-item within nav-disclosure
label	`string`
open	`boolean`	Indicates whether the nav-disclosure is open

Property	Type	Description
appearance	`'ghost' \| 'ghost-light'`	The appearance nav-disclosure should have.
connotation	`'accent' \| 'cta'`	The connotation nav-disclosure should have.
current	`boolean`	Indicates there's a nested active nav-item within nav-disclosure
label	`string`
open	`boolean`	Indicates whether the nav-disclosure is open

Slots

Name	Description
default	Default slot.
icon	The preferred way to add an icon to the component.
meta	A slot to add additional content to the nav disclosure.

Name	Description
default	Default slot.
icon	The preferred way to add an icon to the component.
meta	A slot to add additional content to the nav disclosure.

Events

Name	Type	Description
toggle	`CustomEvent<undefined>`	Event emitted when the nav disclosure is toggled.

Name	Type	Description
toggle	`CustomEvent<undefined>`	Event emitted when the nav disclosure is toggled.