Sticky
Comportamento che rende un elemento costantemente visibile allo scorrere della pagina
ComponentiMetadati e link per approfondire
Quando usarlo
Utilizza il comportamento Sticky per mantenere un elemento visibile mentre l'utente scorre la pagina. Questo è particolarmente utile per:
- menu di navigazione che devono rimanere accessibili durante lo scorrimento della pagina;
- call-to-action importanti che devono essere sempre visibili;
- pulsanti di contatto o supporto che devono essere facilmente raggiungibili;
- intestazioni di tabelle o sezioni di contenuto che devono essere sempre visibili per riferimento continuo.
Come usarlo
Utilizza il comportamento Sticky all'elemento di navigazione principale della pagina.
Attenzione a
- Non applicare lo stesso comportamento per più elementi nella stessa pagina in quanto l'esperienza di navigazione può essere compromessa.
- Applicare un ombreggiatura o un bordo che separi visivamente l'elemento fisso dal resto dei contenuti.
Accessibilità
Lo stato delle verifiche di accessibilità effettuate sul componente Bootstrap Italia
| Caratteristica | Stato | Descrizione |
|---|---|---|
Visivamente accessibile | Da verificare | Uso e contrasto dei colori, leggibilità |
Amichevole con lettori di schermo | Da verificare | Struttura titolazioni, etichette e testi alternativi |
Navigabile | Da verificare | Focus, struttura, navigazione da tastiera o altri device |
Comprensibile | Da verificare | Comprensibile, prevedibile, gestione semplice dell’errore |
Stato del componente
Lo stato del presente componente nelle diverse librerie di design e sviluppo del design system
| Libreria | Stato componente | Link |
|---|---|---|
UI Kit Italia (design) | Non presente | KitUI Kit Italia su Figma (si apre in una nuova finestra) |
Bootstrap Italia | Da verificare | Scheda documentazione (si apre in una nuova finestra) |
React | Non presente | Scheda Storybook (si apre in una nuova finestra) |
Angular | Non presente | Scheda documentazione (si apre in una nuova finestra) |
Anatomia
Sticky è un comportamento che può essere applicato a un elemento che presenta proprie specifiche di anatomia. Fai riferimento alle specifiche di anatomia dell'elemento che vuoi rendere sticky.
Comportamento
L'elemento a cui viene applicato il comportamento Sticky rimane visibile durante lo scorrimento della pagina, sovrapponendosi ai contenuti sottostanti.
Specifiche di design
Sticky è un comportamento che può essere applicato a un elemento che presenta proprie specifiche di design. Fai riferimento alle specifiche di design dell'elemento che vuoi rendere sticky.
Come iniziare
Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici
Come iniziare
Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici