Navigation

MobileNav

Navigazione mobile con hamburger menu animato e overlay. Supporta v-model per controllo dello stato aperto/chiuso, posizione top o left, overlay scuro e slot per header, footer e item personalizzati.

Import

import { MobileNav } from '@pzeta/vue-components'
import type { MobileNavItem } from '@pzeta/vue-components'

Struttura MobileNavItem

Campo	Tipo	Descrizione
`id`	`string \| number`	ID univoco dell'elemento (obbligatorio)
`label`	`string`	Testo del link (obbligatorio)
`href`	`string`	URL destinazione (link esterno)
`to`	`string`	Route Vue Router
`icon`	`string`	Classe CSS dell'icona
`disabled`	`boolean`	Disabilita l'elemento

Esempio Base

Props

Prop	Tipo	Default	Descrizione
`items`	`MobileNavItem[]`	`[]`	Lista degli elementi di navigazione
`modelValue`	`boolean`	`false`	Stato aperto/chiuso del menu (usato con `v-model`)
`color`	`string`	`undefined`	Colore CSS dell'hamburger icon (variabile CSS `--hamburger-color`)
`activeColor`	`string`	`undefined`	Colore CSS dell'hamburger quando il menu è aperto (`--hamburger-active-color`)
`showOverlay`	`boolean`	`true`	Mostra overlay scuro dietro il menu
`position`	`'top' \| 'left'`	`'top'`	Posizione di apertura del menu

Emits

Evento	Payload	Descrizione
`update:modelValue`	`boolean`	Emesso quando lo stato aperto/chiuso cambia (per `v-model`)
`itemClick`	`MobileNavItem`	Emesso al click su un elemento (dopo chiusura automatica del menu)
`open`	—	Emesso quando il menu si apre
`close`	—	Emesso quando il menu si chiude

Slot

Slot	Scope	Descrizione
`header`	—	Contenuto nell'intestazione del pannello menu (prima degli elementi)
`item`	`{ item: MobileNavItem }`	Template personalizzato per ogni elemento della lista
`footer`	—	Contenuto nel piede del pannello menu (dopo gli elementi)

Esempi

Controllo programmatico con v-model

Posizione left

Senza overlay

Con header e footer personalizzati

Elemento personalizzato

Colori hamburger personalizzati

Comportamento

Il click su un elemento non disabilitato chiude automaticamente il menu prima di emettere itemClick.
Gli elementi con to vengono resi come <RouterLink>; quelli con href come <a>.
Il click sull'overlay chiude il menu.
La classe CSS position-top / position-left viene aggiunta al contenitore in base alla prop position.

Accessibilità

Il pulsante hamburger ha aria-label gestito tramite @pzeta/vue-i18n.
Gli elementi disabilitati hanno la classe disabled.

TypeScript

import type { MobileNavProps, MobileNavEmits, MobileNavItem } from '@pzeta/vue-components'

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.

NavigationMenu

Menu di navigazione strutturato per sidebar MFE. Organizza le voci per moduli e gruppi con indicatore active automatico via Vue Router, modalità collapsed e slot per item personalizzati.