GSSpaceHeader

Bandeau de page : coquille à slots (#leading, #actions, #tabsou #toolbar) combinée à GSPageTitle pour le bloc titre/breadcrumb responsive. Sans sticky et sans gouttière — c'est GSSpaceContent qui fournit la position fixe et la gouttière latérale pleine largeur (px-4 sm:px-6). La séparation header / contenu n'est pas un trait : GSSpaceContent révèle une ombre portée sous la tête fixe au scroll (couche premier/second plan), invisible en haut de page. Les previews statiques ci-dessous reproduisent la gouttière ; l'ombre au scroll se voit sur le playground de GSSpaceContent.

1 — Titre simple

Tableau de bord

2 — Titre + description

La description est masquée en dessous de lg par design (classe hidden lg:block) — comportement attendu sur les vues étroites.

Tableau de bord

Vue d'ensemble de vos performances e-réputation

3 — Avec breadcrumb

En dessous de sm, seul le dernier segment est affiché (truncate). Le fil d'Ariane complet apparaît à partir de sm.

Satisfaction client

4 — Avec tabs

Il n'y a plus de bordure basse de séparation : GSSpaceContent matérialise la limite header / contenu par une ombre portée au scroll, pleine largeur. L'onglet actif, lui, garde son indicateur border-b-2 border-primary. Les tabs vivent dans le slot #tabs côté consumer : c'est lui qui ajoute aria-current="page" sur le lien actif et utilise text-primary-700 (contraste AA sur blanc) pour le label actif. Passer tabs-label pour nommer le <nav> (lu par les lecteurs d'écran).

Enquêtes

5 — Avec barre d'outils (filtres + recherche)

Filtre sauvegardé existant

Alternative aux onglets : le slot #toolbar ajoute une seconde ligne recherche + filtres sous le titre. #tabs est prioritaire — une page utilise l'un ou l'autre, jamais les deux. La recherche a une largeur contenue (elle ne s'étire pas sur toute la ligne) ; le bouton Filtres sauvegardés n'apparaît que s'il existe au moins un filtre sauvegardé (sinon, seul Filtres est affiché — basculez le toggle pour comparer). Comme les onglets, la barre reste collée en haut au scroll (sticky fourni par GSSpaceContent).

Avis

736 avis

6 — Avec actions

Campagnes

7 — titleLoading

Quand le titre est en cours de chargement, GSPageTitle affiche un GSSkeleton à la place du texte.

8 — Combiné (breadcrumb + tabs + actions)

Satisfaction client

API — GSSpaceHeader

#leadingZone gauche (flex, min-w-0) — typiquement GSPageTitle#actionsZone droite (shrink-0) — CTA, boutons d'actions#tabsNavigation par onglets — si absent, la <nav> n'est pas rendue. La séparation header / contenu (ombre portée au scroll) est gérée par GSSpaceContent, pas par la <nav>#toolbarBarre d'outils (filtres + recherche) — seconde ligne alternative à #tabs (prioritaire si les deux sont fournis). Rendue en role="toolbar" ; nommer via la prop toolbar-label (lue par les lecteurs d'écran)tabs-labelstring? — nom accessible du <nav> des ongletstoolbar-labelstring? — nom accessible de la barre d'outils (role="toolbar")

API — GSPageTitle

titlestring? — texte du titre (h1)descriptionstring? — sous-titre, masqué en dessous de lgtitleLoadingboolean? — affiche un skeleton à la place du titrebreadcrumbBreadcrumbItem[]? — remplace le titre par un fil d'Ariane ({ label?, to?, icon? })