Comment utiliser le fil d'Ariane dans une mise en page réactive?
Je souhaite utiliser le fil d'Ariane sur mon site réactif. Les miettes de pain deviennent moins reconnaissables si les liens s'enroulent car la mise en page est alors moins reconnaissable. Cela crée un problème pour mon site car la largeur et le nombre de liens varient.
Dans l'intérêt d'une maintenance future et de garder mon CSS propre, je ne veux pas avoir à redimensionner le fil d'Ariane sur plusieurs pages pour différentes largeurs d'écran.
Vous avez quelques options. J'aime le responsive "où suis-je?" fil d'Ariane comme démontré ici . Cette option dispose du fil d'Ariane complet dans les grandes fenêtres et se réduit pour afficher uniquement le texte personnalisé (tel que "Où suis-je?") Dans les fenêtres étroites et sur les appareils mobiles. Exemple:
Plein écran:
Home > Section 1 > Section Title That is Longer
Devient:
Where Am I? >
Il y a aussi le fil d'Ariane qui se transforme en lien arrière , qui montre le fil d'Ariane complet dans de grandes fenêtres et montre juste le mot, "retour" sur de petites fenêtres mais l'utilisateur peut simplement utiliser son bouton "retour". Celui-ci ressemble à ceci sur mobile:
< Back
Il y a un responsif breadcrumbs jQuery qui tronque le fil d'Ariane dans des fenêtres étroites et ajoute un Ellipsis ... pour un fil d'Ariane raccourci lorsque la page est étroite ( démo ). Exemple:
Plein écran:
Home > Section 1 > Section Title That is Longer
Devient:
Home > Section 1 > Section Title...