Header

La barra superiore dell'app — sticky top-0 per costruzione, traslucida con un backdrop blur così il contenuto resta visibile mentre scorre sotto. La navbar di questo stesso sito è costruita su di essa.

import { Header, HeaderStart, HeaderEnd } from "@pompeitech/vesuvius-ui";

Default

API

Header — l'elemento <header> stesso. Ogni prop nativa di <header>. Layout proprio: sticky top-0 z-40 flex h-14 shrink-0 items-center justify-between gap-2 border-b bg-background/95 px-4 backdrop-blur — sovrascrivi via className per un'altezza/padding diversi.

HeaderStart — slot allineato a sinistra (flex min-w-0 items-center gap-2 — min-w-0 permette a un breadcrumb/titolo lungo di troncarsi invece di spingere HeaderEnd fuori schermo) per un trigger sidebar, breadcrumb, titolo pagina. Ogni prop nativa di <div>.

HeaderEnd — slot allineato a destra (flex items-center gap-2) per azioni, controlli del tema, menu account. Ogni prop nativa di <div>.

Accessibilità

Header renderizza un vero landmark <header> — nessun role necessario. Dato che è sticky, mantieni la sua altezza ragionevole su viewport piccoli; un header che consuma troppo spazio verticale su mobile spinge il contenuto utile più in basso e non può essere chiuso.