Skip to content

VNavItem

A Nav Item Custom HTML Element. Based largely on the https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element .

Props

NameTypeDescription
appearanceEnum:
ghost
ghost-light
Sets the nav item's appearance
connotationEnum:
accent
cta
Sets the connotation color of the selected nav item
currentbooleanSets the nav item as a current
downloadstringPrompts the user to save the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
hrefstringThe URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
hreflangstringHints at the language of the referenced resource. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
iconEnum:
10-sec-backward-line
10-sec-backward-solid
10-sec-forward-line
10-sec-forward-solid
30-sec-backward-line
30-sec-backward-solid
30-sec-forward-line
30-sec-forward-solid
5-sec-backward-line
5-sec-backward-solid
5-sec-forward-line
5-sec-forward-solid
... 1229 more ...
A decorative icon the custom element should have. See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
pingstringSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
referrerpolicystringSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
relstringSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
targetEnum:
_self
_blank
_parent
_top
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
textstringText of the nav item
typestringSee https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

Events

NameEvent TypeDescription
blurFocusEventFires when the element loses focus.
clickMouseEventFires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
focusFocusEventFires when the element receives focus.
inputEventFires when the value of an element has been changed.
keydownKeyboardEventFires when a key is pressed.
keyupKeyboardEventFires when a key is released.

Slots

NameDescription
iconThe preferred way to add an icon to the component.
metaA slot to add additional content to the nav item.