Navigation

Campo	Tipo	Descrizione
`label`	`string`	Testo dell'elemento
`icon`	`string`	Classe CSS dell'icona (es. `'pi pi-home'`)
`to`	`string \| RouteLocation`	Destinazione router-link (Vue Router)
`url`	`string`	URL link esterno
`items`	`MenuItem[]`	Sotto-elementi per menu annidati
`command`	`(event: MenuItemCommandEvent) => void`	Callback eseguita al click
`disabled`	`boolean`	Disabilita l'elemento
`visible`	`boolean`	Nasconde l'elemento se `false`
`target`	`string`	Attributo `target` del link (es. `'_blank'`)
`itemKey`	`string`	Chiave univoca per Vue (alternativa a `key` riservato)
`class`	`string`	Classe CSS personalizzata
`style`	`Record<string, string \| number>`	Stili inline
`separator`	`boolean`	Rende l'elemento un separatore visivo
`badge`	`string \| (() => string \| number)`	Badge statico o dinamico (funzione per valore reattivo)
`badgeClass`	`string`	Classe CSS del badge
`tooltip`	`string`	Testo tooltip
`tooltipOptions`	`Record<string, unknown>`	Opzioni tooltip
`description`	`string`	Testo descrittivo secondario
`order`	`number`	Ordinamento dell'elemento

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`model`	`MenuItem[]`	`[]`	Array di elementi del menu
`popup`	`boolean`	`false`	Modalità popup: il menu è nascosto e si apre tramite `toggle()`
`size`	`Size`	`'medium'`	Dimensione degli elementi (`small`, `medium`, `large`)
`appendTo`	`'body' \| 'self' \| string \| HTMLElement`	`'body'`	Elemento a cui appendere il popup
`autoZIndex`	`boolean`	`true`	Gestione automatica dello z-index
`baseZIndex`	`number`	`0`	Valore base z-index
`exact`	`boolean`	`true`	Match esatto per router-link-active
`tabindex`	`number \| string`	`0`	Indice di tabulazione
`ariaLabel`	`string`	`undefined`	Label ARIA del menu
`ariaLabelledby`	`string`	`undefined`	ID dell'elemento che fornisce il label ARIA

Emits

Evento	Payload	Descrizione
`show`	—	Emesso quando il popup diventa visibile
`hide`	—	Emesso quando il popup viene nascosto
`focus`	`Event`	Emesso quando il menu riceve il focus
`blur`	`Event`	Emesso quando il menu perde il focus

Slot

Slot	Scope	Descrizione
`start`	—	Contenuto aggiuntivo prima degli elementi del menu
`end`	—	Contenuto aggiuntivo dopo gli elementi del menu
`item`	`{ item: MenuItem; label: string; props: Record<string, unknown> }`	Template personalizzato per ogni elemento
`itemicon`	`{ item: MenuItem; class: string }`	Template personalizzato per l'icona dell'elemento
`submenuicon`	`{ active: boolean }`	Template personalizzato per l'icona del submenu

Esempi

Con slot start/end (profilo utente)

Template item personalizzato

Con link esterni

<script setup lang="ts">
import type { MenuItem } from '@pzeta/vue-components'

const items: MenuItem[] = [
  { label: 'Documentazione', icon: 'pi pi-book', url: 'https://docs.example.com', target: '_blank' },
  { label: 'GitHub', icon: 'pi pi-github', url: 'https://github.com', target: '_blank' },
]
</script>

Metodi esposti (ref)

Metodo	Firma	Descrizione
`toggle`	`(event: Event) => void`	Alterna visibilità del popup
`show`	`(event?: Event) => void`	Mostra il popup ancorato all'elemento trigger
`hide`	`() => void`	Nasconde il popup

Accessibilità

Usa role="menu" con aria-label configurabile.
La chiusura del popup avviene al click fuori dall'area del menu.
Gli elementi con url e target="_blank" ricevono automaticamente rel="noopener noreferrer".

TypeScript

import type { MenuProps, MenuEmits, MenuSlots, MenuItem, MenuItemCommandEvent } from '@pzeta/vue-components'

MegaMenu

Menu di navigazione con pannelli mega dropdown organizzati automaticamente in colonne. Supporta orientazione orizzontale e verticale, slot per start/end e template personalizzati.

Menubar

Barra menu orizzontale responsive con dropdown e submenu. Include slot start/end per contenuto aggiuntivo, gestione automatica del breakpoint mobile e hamburger menu integrato.

Menu

Import

Struttura MenuItem