Navigation - AvNavigation

✨ Introduction

The AvNavigation is the main navigation therefore the central navigation system within a site. It guides the user through the site main and secondary sections.

🏗️ Structure

The navigation component can be used to create a navigation bar with different types of navigation items:

• direct link
• submenu

🏷️ Props

Name	Type	Default	Mandatory	Description
id	string	nav-${crypto.randomUUID()}		The unique identifier for the navigation element.
label	string	'Menu principal'		The aria-label for the navigation element.
navItems	(NavigationMenuLinkProps | NavigationMenuProps)[]		✅	List of navigation items. Each item can be: • A direct navigation link (NavigationMenuLinkProps) with the to and text props. • A navigation submenu (NavigationMenuProps) with the title, links and active props.

NavigationMenuLinkProps

Name	Type	Default	Mandatory	Description
id	string	menu-link-${crypto.randomUUID()}		The unique identifier for the navigation menu link.
activeId	string			The active identifier for the navigation menu link (used for external links).
to	string | RouteLocationRaw	'#'		The target route or URL.
highlight	boolean			Forces the link to appear active (aria-current="page") regardless of route matching. Useful when the link should highlight on a sub-route but to always points to a base route.
text	string	''		The text displayed for the link.
icon	string			The icon name (Iconify convention).
onClick	($event: MouseEvent) => void			Optional click event handler.

🔊 Events

None.

🎨 Slots

None.

🚀 Storybook demos

You can find examples of use and demo of the component on its dedicated Storybook page.

💡 Examples of use

<template>
  <AvNavigation :nav-items="navItems" />
</template>