Usages
Le composant Page Header permet d’identifier la page consultée, de contextualiser son contenu et de proposer des actions liées à la page. Il peut inclure des éléments de navigation (retour ou fil d’Ariane), des métadonnées, des tags ou des actions utilisateurs. Il constitue une zone d’entrée visuelle forte dans l’interface.
- Affiche un titre principal, optionnellement enrichi de :
- Sous-titre
- Texte secondaire (metadata, statut, info complémentaire)
- Icône
- Tags
- Peut contenir des actions utilisateur (Limiter à 3 actions visibles : les actions secondaires vont dans un DropdownButton)
- Comporte un ou plusieurs éléments de navigation :
- Fil d’Ariane (breadcrumb)
- Bouton de retour
- Optionnellement, des onglets de navigation secondaires (Tabs)
- Inclut un slot de contenu libre pour des contenus spécifiques
✅ Usage correct :
- ✔️ Titre + sous-titre + tags + 2 boutons d’action
- ✔️ Fil d’Ariane au-dessus du titre + contenu libre sous le header
- ✔️ Sticky Header avec titre et 1 action persistante
🚫 Usage incorrect :
- ❌ Plus de 5 actions affichées sans regroupement
- ❌ Icône présente sans lien avec le contenu
- ❌ Absence de h1 dans la page
- ❌ Redondance navigation retour + breadcrumb en même temps
Localisation :
À placer systématiquement en haut d’une page de contenu.
Il s’utilise :
- Dans des pages de détail (fiches, vues objet)
- Dans des sections de gestion (admin, back-office, tableau de bord)
- Sur desktop comme sur mobile
- Avec une version sticky compacte au scroll sur desktop, si besoin de persistance de contexte