Générateur de Fil d'Ariane IA.

Saisissez un prompt et obtenez en quelques secondes un composant de navigation fil d'Ariane entièrement stylisé. MeDo comprend la structure de votre site et génère un balisage de chemin propre et accessible — prêt à intégrer dans n'importe quelle page.

Tout site multi-niveaux a besoin d'un bon fil d'Ariane.

Les fils d'Ariane réduisent les taux de rebond en offrant aux visiteurs un chemin en un clic pour remonter dans la hiérarchie — sans appuyer sur le bouton retour du navigateur. Ils signalent également la profondeur de la page aux moteurs de recherche, contribuant à une meilleure explorabilité et à l'éligibilité aux données structurées. Un fil d'Ariane bien construit est un petit composant avec un impact disproportionné sur l'UX et le SEO.

6 modèles

Modèles de Fil d'Ariane que vous pouvez générer

Chaque modèle est un vrai prompt, pas une capture d'écran. Copiez-le dans n'importe quel éditeur IA, ou exécutez-le dans MeDo pour récupérer du code React + Tailwind.

BasicSimple Trail

Chevron Trail With a Plain Current Crumb

Three or four levels, chevron separators, last crumb unlinked. The baseline every other variant extends — and the one place to get the semantics right, because the markup is copied everywhere else.

Create a breadcrumb component wrapped in a nav element with aria-label="Breadcrumb", containing an ordered list. Render ancestors as links and the final segment as plain text carrying aria-current="page", never as a link to the page you are already on. Insert chevron separators with a CSS pseudo-element or an aria-hidden span so screen readers do not announce them between every item. Keep the trail on one line at desktop widths and allow it to wrap rather than horizontally scroll below 640px. Style the current crumb with a darker weight, not a different color alone.

Tester dans MeDo

TruncatingCollapsed Middle

Ellipsis Between First and Last

For trails deeper than four levels. Collapse the middle rather than shrinking the font — an ellipsis that expands is honest, while a 10px crumb is just unreadable.

Create a breadcrumb that collapses when the trail exceeds four levels: show the root, an ellipsis button, the immediate parent and the current page. The ellipsis is a real button with aria-expanded and an accessible label such as "Show 3 hidden levels", and expanding it reveals the hidden crumbs inline rather than in a popover. Keep every level in the DOM at all times so the JSON-LD BreadcrumbList still describes the full path even while the visual trail is collapsed. Below 640px, show only the parent and current page with a back chevron in front of the parent.

Tester dans MeDo

CommerceProduct Path

Category Trail With a Home Icon

Home icon, category, subcategory, product name. Build it from the category the shopper actually arrived through, not the product's first assigned category, or the trail contradicts the path they just took.

Create an e-commerce breadcrumb: a home icon link with a visually hidden "Home" label, then category and subcategory links, then the product name as the current crumb with aria-current="page". Truncate the product name with an ellipsis past 40 characters while keeping the full name in the title attribute and in the JSON-LD BreadcrumbList. Derive the category path from the collection the shopper navigated through rather than the product default, so the trail matches their route. Below 640px, collapse to a single back link showing the subcategory name preceded by a left chevron.

Tester dans MeDo

DropdownSwitchable Crumb

Crumbs That Open a Sibling Menu

Each level doubles as a switcher listing its siblings, which turns a trail into a lateral navigation tool. Standard in cloud consoles where the path is organisation, project, environment.

Create a breadcrumb where each segment is a link plus a small chevron button that opens a menu of that level's siblings — switch project, switch environment, switch service. Give each chevron aria-expanded and aria-haspopup="menu", open the menu on Enter, Space or Down arrow, move through items with arrow keys, close on Escape and return focus to the chevron. Keep the segment label itself a plain link so clicking it navigates rather than opening the menu. Add a filter input inside any menu with more than ten siblings. On mobile, render the menu as a bottom sheet.

Tester dans MeDo

SEOStructured Trail

Trail With JSON-LD BreadcrumbList

The visual trail plus the schema.org markup that makes Google render a path instead of a bare URL in results. Build both from one array, or they drift apart the first time the IA changes.

Create a breadcrumb component that emits both the visual trail and a schema.org BreadcrumbList as JSON-LD in a script type="application/ld+json" block, generated from the same array of segments so the two can never disagree. Each ListItem needs position, name and an absolute item URL — relative URLs are ignored. Include the current page as the final ListItem even though it renders unlinked. Do not include the trail in more than one place on the page, since duplicate BreadcrumbList blocks are treated as conflicting. Render the JSON-LD server-side so crawlers see it without executing JavaScript.

Tester dans MeDo

ContentEditorial Path

Kicker Trail Above the Headline

A two-level trail styled as a section kicker rather than a UI control: uppercase, small, sitting directly above the headline. It does navigational and editorial work at once.

Create a breadcrumb styled as an editorial kicker sitting directly above an article headline: two levels — vertical then topic — in small uppercase text with wide letter spacing, separated by a thin slash, with the current article omitted from the visible trail since the headline beneath already names it. Keep the article as the final entry in the JSON-LD BreadcrumbList even though it is not rendered. Use nav with aria-label="Breadcrumb" so it is still a navigation landmark rather than decorative type, and keep the same trail on mobile at a reduced size rather than collapsing it.

Tester dans MeDo

Comment personnaliser votre Fil d'Ariane

Adaptez votre séparateur à la voix de votre marque

Remplacez le « / » par défaut par une icône chevron, une flèche ou même un glyphe personnalisé. Un choix de conception subtil qui rend les fils d'Ariane natifs à votre système de design plutôt que rajoutés.

Tronquez les longs chemins sur mobile

Sur les petits écrans, affichez uniquement le parent immédiat et la page courante, en masquant les segments intermédiaires derrière des points de suspension. Cela maintient le composant lisible sans sacrifier la hiérarchie complète sur bureau.

Ajoutez le balisage schema.org BreadcrumbList

Demandez à MeDo d'inclure des données structurées JSON-LD en parallèle du HTML. Les moteurs de recherche l'utilisent pour afficher des fils d'Ariane directement dans les pages de résultats, augmentant le taux de clics pour le contenu profond.

Stylisez le segment actif de manière distinctive

Le crumb de la page courante ne doit jamais ressembler à un lien. Un poids en gras, une couleur plus sombre ou une pilule d'arrière-plan subtile communiquent « vous êtes ici » sans texte supplémentaire.

Qui utilise le composant Fil d'Ariane

Boutiques e-commerce

Les pages produit se trouvent 3–4 niveaux en profondeur. Un fil d'Ariane permet aux acheteurs de revenir d'un produit à sa catégorie ou sous-catégorie instantanément — réduisant la frustration de navigation lors des sessions d'achat.

Sites de documentation

Les documentations avec sections imbriquées (Guides > Authentification > OAuth) bénéficient énormément des fils d'Ariane. Les lecteurs arrivant depuis la recherche comprennent immédiatement où ils se trouvent dans un grand arbre de contenu.

Sites d'actualités et éditoriaux

Les articles imbriqués sous des sujets et des verticales (Tech > IA > Outils) utilisent des fils d'Ariane pour exposer des catégories de contenu connexes, encourageant les lecteurs à explorer plutôt qu'à rebondir après un seul article.

Centres d'aide SaaS

Les pages de support imbriquées sous des zones produit (Facturation > Factures > Télécharger) utilisent des fils d'Ariane pour que les utilisateurs puissent remonter à une catégorie et trouver des réponses adjacentes sans retourner à la recherche principale.

Modèles de Fil d'Ariane pour différents sites web

Le même composant fil d'ariane, adapté au type de site sur lequel il est publié.

01 / 06

E-commerce Breadcrumb

Category, subcategory, product, with a home icon at the root. The one detail worth getting right is which category path you render: showing the product's default category when the shopper arrived through a different collection makes the trail lead somewhere they never were.

Styles et variantes de Fil d'Ariane

Choisissez la variante qui correspond au reste de la page, puis générez-la.

01 / 06

Chevron Breadcrumb

A right chevron between crumbs, the most legible separator at small sizes. Insert it with a pseudo-element or an aria-hidden span so a screen reader does not read "greater than" between every level.

Fil d'Ariane en React, Next.js, Vue et Svelte

React, Next.js, Vue 3, SvelteKit, Astro ou HTML simple — le même fil d'ariane, six façons de l'intégrer.

01 / 06

React Breadcrumb

No state at all, so this stays a plain function component. Take the segments as an array of label and href pairs rather than parsing a path string inside it — URL slugs make poor crumb labels.

src/components/Breadcrumb.tsx

export function Breadcrumb({ items }) {
  return (
    <nav aria-label="Breadcrumb">
      <ol className="flex items-center gap-2">
        {items.map((it, i) => (
          <li key={it.href}>
            {i === items.length - 1
              ? <span aria-current="page">{it.label}</span>
              : <a href={it.href}>{it.label}</a>}
          </li>
        ))}
      </ol>
    </nav>
  )
}

Comment ajouter votre Fil d'Ariane à un projet

Quatre étapes, du choix d'un modèle de fil d'ariane à sa mise en production.

01~30s

Pick a Breadcrumb Pattern

Count your depth. Three or four levels take the simple trail, deeper needs the collapsing variant, and a console where users switch between siblings needs the dropdown crumbs.

02~10s

Copy the Prompt

Paste it into MeDo, Lovable, Bolt, v0 or Cursor. Keep the aria-current and aria-hidden separator clauses — those two are what separate a real breadcrumb from a row of styled links.

03~1min

Generate and Refine

You get React + Tailwind back with a live preview. Follow up in plain English — "swap the slash for a chevron", "add the JSON-LD block", "collapse the middle past four levels".

04~2min

Mount It in Your Layout

Render it in the page or a nested layout where the ancestor titles are already loaded, above the h1 and below the header. Pass real labels rather than URL slugs, and emit the JSON-LD from the same array.

Questions fréquentes à propos de Fil d'Ariane

Comment créer un fil d'Ariane avec l'IA ?

Ouvrez MeDo, décrivez la hiérarchie de votre site et le style visuel souhaité, et MeDo génère un composant fil d'Ariane prêt pour la production. Vous pouvez spécifier les séparateurs, les icônes, les couleurs de lien et l'inclusion de données structurées — le tout en français naturel.

Quel est le meilleur générateur de fil d'Ariane IA ?

MeDo est conçu spécifiquement pour générer des composants UI à partir de prompts. Contrairement aux outils IA généralistes, MeDo comprend les contraintes de design, les exigences d'accessibilité et les conventions front-end, de sorte que le fil d'Ariane généré est réellement utilisable — pas seulement syntaxiquement correct.

MeDo peut-il générer un fil d'Ariane avec des données structurées (schema.org) ?

Oui. Demandez à MeDo d'inclure le balisage JSON-LD BreadcrumbList dans votre prompt, et il produira à la fois le composant HTML/CSS visuel et le bloc de script schema.org. Cela aide les moteurs de recherche à afficher les fils d'Ariane directement dans les résultats de recherche.

Comment rendre un fil d'Ariane accessible ?

Un fil d'Ariane entièrement accessible utilise un wrapper <nav aria-label="Fil d'Ariane">, une liste ordonnée, aria-current="page" sur le dernier élément et des liens focalisables au clavier. MeDo applique ces patterns par défaut lors de la génération de composants fil d'Ariane.

La page courante doit-elle être un lien dans un fil d'Ariane ?

Non. La page courante doit être du texte brut, pas un lien — lier à la page sur laquelle vous vous trouvez déjà est redondant et peut confondre les lecteurs d'écran. MeDo rend les crumbs ancêtres comme liens et le dernier crumb comme une étiquette non liée, visuellement distincte.

Puis-je générer un fil d'Ariane pour un projet React ou Next.js ?

Oui. MeDo peut générer des composants fil d'Ariane en tant que composants fonctionnels React utilisant des patterns de routage dynamique de Next.js, incluant la lecture des segments de chemin depuis usePathname ou params. Précisez votre framework dans le prompt et MeDo adapte la sortie en conséquence.

Générez votre fil d'ariane maintenant.

Testez n'importe quel prompt — gratuit, sans inscription.

Commencer gratuitement Voir les tarifs

Barre de navigation

Décrivez votre site et obtenez une navbar entièrement responsive — avec logo, liens de navigation, menus déroulants et un menu hamburger mobile — générée depuis un seul prompt. Pas de modèles, pas de bidouillage.

Composants associés

En-tête

Décrivez le haut de votre page et MeDo construit toute la bande — logo et lockup de marque, un bandeau d'annonce optionnel au-dessus, comportement sticky au défilement avec un flou verre dépoli, et le CTA. Les liens de navigation vivent à l'intérieur ; l'en-tête est tout ce qui les encadre.

Composants associés

Barre latérale

Décrivez la barre latérale dont vous avez besoin — liens de navigation, menus imbriqués, filtres ou widgets — et MeDo génère du code propre et prêt pour la production en quelques secondes. Pas de scaffolding, pas de boilerplate.

Composants associés