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
tovengono resi come<RouterLink>; quelli conhrefcome<a>. IlRouterLinkè quello registrato da vue-router nell'app, risolto una volta sola: senza vue-router non compare più il warning «Failed to resolve component: RouterLink» a ogni render (dalla 1.24.0). - Il click sull'overlay chiude il menu.
- La classe CSS
position-top/position-leftviene aggiunta al contenitore in base alla propposition.
Accessibilità
- Il pulsante hamburger ha
aria-labelgestito 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 (rail solo-icone), collasso a fisarmonica opt-in per moduli e categorie, sfondo customizzabile (preset glass/gradient o classi arbitrarie) con palette adattiva, e slot per item personalizzati.