Navigation

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.

Import

import { Menubar } 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
`breakpoint`	`string`	`'640px'`	Larghezza sotto la quale attivare la modalità mobile con hamburger
`appendTo`	`'body' \| 'self' \| string \| HTMLElement`	`'body'`	Elemento a cui appendere i dropdown
`autoZIndex`	`boolean`	`true`	Gestione automatica dello z-index
`baseZIndex`	`number`	`0`	Valore base z-index
`tabindex`	`number \| string`	`0`	Indice di tabulazione
`ariaLabel`	`string`	`undefined`	Label ARIA del componente
`ariaLabelledby`	`string`	`undefined`	ID dell'elemento che fornisce il label ARIA

Emits

Evento	Payload	Descrizione
`focus`	`FocusEvent`	Emesso quando il menubar riceve il focus
`blur`	`FocusEvent`	Emesso quando il menubar perde il focus

Slot

Slot	Scope	Descrizione
`start`	—	Contenuto prima delle voci menu (es. logo, titolo applicazione)
`end`	—	Contenuto dopo le voci menu (es. pulsanti azione, avatar utente)
`item`	`{ item: MenuItem; label: string; props: Record<string, unknown>; hasSubmenu: boolean; root: boolean }`	Template personalizzato per ogni voce
`itemicon`	`{ item: MenuItem; class: string }`	Template personalizzato per l'icona della voce
`submenuicon`	`{ root: boolean; active: boolean }`	Template personalizzato per l'icona del dropdown
`button`	`{ toggle: () => void }`	Template personalizzato per il pulsante hamburger mobile
`popupicon`	—	Template personalizzato per l'icona del popup mobile
`menuicon`	`{ active: boolean }`	Template personalizzato per l'icona del menu mobile

Esempi

Con slot start e end

Con submenu e router-link

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

const items: MenuItem[] = [
  { label: 'Home', icon: 'pi pi-home', to: '/' },
  {
    label: 'Prodotti',
    items: [
      { label: 'Catalogo', to: '/prodotti/catalogo' },
      { label: 'Offerte', to: '/prodotti/offerte' },
      { separator: true },
      { label: 'Nuovo prodotto', icon: 'pi pi-plus', to: '/prodotti/nuovo' },
    ],
  },
  { label: 'Contatti', to: '/contatti' },
]
</script>

Template voce personalizzato

Metodi esposti (ref)

Metodo	Firma	Descrizione
`toggle`	`() => void`	Alterna la visibilità del menu mobile

Comportamento

Sotto il breakpoint, la barra si trasforma in un pulsante hamburger che apre/chiude il menu.
I dropdown dei submenu si aprono al click sulla voce root e si chiudono al click fuori.
Il posizionamento dei dropdown usa rilevamento automatico dei bordi dello schermo.

Accessibilità

Il pulsante hamburger ha aria-label gestito tramite @pzeta/vue-i18n.
I dropdown hanno aria-haspopup e aria-expanded.

TypeScript

import type { MenubarProps, MenubarEmits, MenubarSlots, MenubarExpose } from '@pzeta/vue-components'

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

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.