Breadcrumb Fil d'Ariane
Introduction
Le composant Breadcrumb est une aide à la navigation qui affiche l'emplacement de la page actuelle dans une structure hiérarchique du site. Il aide les utilisateurs à retracer leur chemin depuis la page d'accueil jusqu'à leur position actuelle et à remonter facilement la hiérarchie.
Le Breadcrumb est entièrement intégré en tant que bloc breadcrumb dans le Page Builder, permettant aux éditeurs de contenu et aux développeurs de configurer facilement les styles visuels, les séparateurs et les tailles responsives directement dans le CMS.
Utilisation
Ces exemples illustrent comment les éditeurs de contenu lient et structurent des composants de navigation.
1. Fil d'Ariane de navigation standard
Une configuration classique de fil d'Ariane hiérarchique montrant la page d'accueil, la catégorie secondaire et le marqueur de page texte terminal.
{
"type": "breadcrumb",
"items": [
{ "label": "Home", "href": "/" },
{ "label": "Components", "href": "/components" },
{ "label": "Breadcrumb" }
]
}
2. Séparateur personnalisé (diviseur en barre oblique)
Utilise un caractère de séparation de texte personnalisé (comme une barre oblique "/") pour séparer les éléments de navigation.
{
"type": "breadcrumb",
"separator": "/",
"items": [
{ "label": "Home", "href": "/" },
{ "label": "Library", "href": "/library" },
{ "label": "Overview" }
]
}
3. Taille et style visuel accentués
Ajuste l'échelle globale à petite et applique un style visuel de soulignement personnalisé pour une sensation de mise en page mise en évidence.
{
"type": "breadcrumb",
"variant": "underline",
"size": "sm",
"items": [
{ "label": "Console", "href": "/console" },
{ "label": "Resources", "href": "/console/resources" },
{ "label": "Deployments" }
]
}
Propriétés
| Propriété | Type de champ CMS | Défaut | Description / Options prises en charge |
|---|---|---|---|
Séparateur (separator) | string | "chevron-right" | Caractère de séparation personnalisé placé entre les éléments. |
Style visuel (variant) | select | "plain" | Le style visuel des liens. • Options : "plain", "underline". |
Échelle de taille (size) | select | "md" | Contrôle l'échelle globale de la police et du chevron. • Options : "xs", "sm", "md", "lg". |
Éléments de navigation (items) | list | [] | Collection ordonnée d'éléments de page. (Voir le schéma des éléments de fil d'Ariane ci-dessous). |
Classe personnalisée (class) | string | - | Remplacements de classe CSS personnalisés appliqués directement au conteneur de fil d'Ariane. |
Schéma des éléments de fil d'Ariane
Chaque entrée du tableau items accepte les paramètres suivants :
| Propriété | Type de champ CMS | Requis | Description |
|---|---|---|---|
Texte affiché (label) | string | Oui | Texte de libellé rendu pour le segment de l'élément. |
Route cible (href) | string | Non | URL cible ou route de page. Si omis, est rendu sous forme de texte brut de la page actuelle. |
Page actuelle (current) | boolean | false | Définit l'élément pour désigner la page active (automatiquement vrai pour le dernier élément). |
Notes pour les développeurs et accessibilité
- Hiérarchie conforme ARIA : Le composant est automatiquement rendu dans un élément de navigation sémantique accessible (
<nav aria-label="Breadcrumb">). - ARIA de page active : L'élément terminal final (où
hrefest omis oucurrentest défini) reçoit automatiquementaria-current="page"pour se conformer aux directives d'accessibilité des lecteurs d'écran. - Style de micro-interaction : Les liens héritent automatiquement des déclencheurs et transitions de survol de la mise en page, reflétant harmonieusement les accents de la palette de couleurs parente.