Navigation

TieredMenu

Menu a cascata multi-livello con submenu annidati. Supporta modalità statica e popup con posizionamento automatico, breakpoint responsive e chiusura con tasto Escape.

Import

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

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`model`	`MenuItem[]`	`[]`	Array di elementi del menu
`popup`	`boolean`	`false`	Modalità popup: il menu si apre tramite `toggle()` o `show()`
`breakpoint`	`string`	`'960px'`	Breakpoint massimo per la modalità mobile
`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
`disabled`	`boolean`	`false`	Disabilita il componente
`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
`focus`	`Event`	Emesso quando il menu riceve il focus
`blur`	`Event`	Emesso quando il menu perde il focus
`beforeShow`	—	Emesso prima che il popup diventi visibile
`beforeHide`	—	Emesso prima che il popup venga nascosto
`show`	—	Emesso quando il popup è visibile
`hide`	—	Emesso quando il popup è nascosto

Slot

Slot	Scope	Descrizione
`start`	—	Contenuto prima degli elementi del menu
`end`	—	Contenuto dopo gli elementi del menu
`item`	`{ item: MenuItem; label: string \| undefined; props: TieredMenuRouterBindProps; hasSubmenu: boolean }`	Template personalizzato per ogni voce
`itemicon`	`{ item: MenuItem; class: string }`	Template personalizzato per l'icona della voce
`submenuicon`	`{ active: boolean }`	Template personalizzato per l'icona del submenu

Esempi

Template voce personalizzato

Con slot start/end

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

Comportamento

I submenu si aprono al passaggio del mouse (hover) sulle voci che hanno items.
In modalità popup, il menu si chiude al click fuori dall'area del menu o premendo Escape.
Il popup si chiude automaticamente al click su una voce senza submenu.
Il posizionamento è automatico con rilevamento dei bordi dello schermo.

Accessibilità

Usa role="menu" con aria-label configurabile.
La chiusura con Escape è supportata nativamente.

TypeScript

import type {
  TieredMenuProps,
  TieredMenuEmits,
  TieredMenuSlots,
  TieredMenuMethods,
  TieredMenuItemSlotScope,
} from '@pzeta/vue-components'

ScrollTop

Pulsante torna-su che appare quando la pagina supera un certo scroll threshold. Configurabile per target window o elemento parent, comportamento smooth/auto, severity e aspetto del pulsante.

Navigation

Componenti di navigazione per costruire menu, breadcrumb, barre di navigazione e controlli di scroll.