Navigation

MegaMenu

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

Import

import { MegaMenu } from '@pzeta/vue-components'
import type { MenuItem } from '@pzeta/vue-components'

Struttura dati

Il MegaMenu usa l'interfaccia MenuItem standard con una struttura a tre livelli:

model: MenuItem[]          ← voci root (mostrate nella barra)
  └─ items: MenuItem[]     ← colonne del pannello mega
       └─ items: MenuItem[] ← voci dentro ogni colonna

Il campo label della colonna (secondo livello) viene usato come intestazione di sezione. Il numero di colonne (da 1 a 4) viene calcolato automaticamente in base al numero di items al secondo livello.

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`model`	`MenuItem[]`	`[]`	Array di elementi root del menu
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientazione della barra menu
`disabled`	`boolean`	`false`	Disabilita l'intero componente
`tabindex`	`number \| string`	`0`	Indice di tabulazione
`ariaLabel`	`string`	`undefined`	Label ARIA per l'elemento `<nav>`
`ariaLabelledby`	`string`	`undefined`	ID dell'elemento che fornisce il label ARIA
`class`	`string`	`''`	Classe CSS aggiuntiva per la barra

Emits

Evento	Payload	Descrizione
`show`	—	Emesso quando un pannello mega viene aperto
`hide`	—	Emesso quando un pannello mega viene chiuso
`focus`	`FocusEvent`	Emesso al focus del componente
`blur`	`FocusEvent`	Emesso alla perdita del focus

Slot

Slot	Scope	Descrizione
`start`	—	Contenuto prima delle voci menu (es. logo)
`end`	—	Contenuto dopo le voci menu (es. ricerca, avatar)
`item`	`{ item: MenuItem; root?: boolean }`	Template personalizzato per gli elementi. `root: true` indica un elemento della barra principale
`submenuicon`	`{ active: boolean }`	Template personalizzato per l'icona di espansione submenu

Esempi

Con slot start e end

Orientazione verticale

Con campo description nelle voci

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

const items: MenuItem[] = [
  {
    label: 'Azienda',
    items: [
      {
        label: 'Chi siamo',
        items: [
          { label: 'Storia', icon: 'pi pi-flag', description: 'Come siamo nati' },
          { label: 'Team', icon: 'pi pi-users', description: 'Le persone' },
        ],
      },
    ],
  },
]
</script>

Comportamento

Il pannello mega si apre al click sulla voce root; un secondo click o un click fuori lo chiude.
Le colonne vengono distribuite automaticamente su griglia da 1 a 4 colonne.
Gli elementi con to vengono resi come router-link; gli elementi con url come <a>.
Le voci con target="_blank" ricevono automaticamente rel="noopener noreferrer".

Accessibilità

L'elemento root è <nav role="menubar">.
I pulsanti delle voci root hanno aria-haspopup e aria-expanded.

TypeScript

import type { MegaMenuProps, MegaMenuEmits, MegaMenuSlots } from '@pzeta/vue-components'
import type { MenuItem } from '@pzeta/vue-components'

ContextMenu

Menu contestuale attivato dal click destro del mouse. Supporta submenu annidati, modalità globale per tutto il documento, attivazione programmatica e posizionamento automatico con rilevamento bordi.

Componente menu versatile in modalità statica o popup. Supporta submenu, separatori, badge, router-link, link esterni e slot per personalizzazione completa del rendering.