Quelqu'un aurait une idée pour créer un fil d'ariane (breadcrumb) [dynamique] sous symfony (5.4) ? J'utilise bootstrap pour le style.
Par exemple, je suis sur la page monsite.fr/film/animation/2022. Je voudrais que symfony me génère le fil d'ariane : film / animation/ 2022 ou par exemple film > animation > 2022, avec des liens sur tout sauf le dernier (2022)
J'ai bien trouvé un bundle mais je n'arrive pas à le faire fonctionner (https://github.com/mhujer/BreadcrumbsBundle)
le pathname renvoi une chaîne de texte qui est la partie de l'URL situé après le nom de domaine (est éventuellement le port de communication)
par exemple:
// en considérant être sur une URL construite avec:
// "https://monsite.fr/film/animation/2022"
const path = document.location.pathname;
console.log(path); // <- "/film/animation/2022"
Il te restera qu'a découper la chaîne de texte pour en avoir un tableau tu peux utiliser la méthode split pour éclater une chaîne en tableau
// en considérant être sur une URL construite avec:
// "https://monsite.fr/film/animation/2022"
const path = document.location.pathname;
console.log(path); // <- "/film/animation/2022"
const partialPath = path.split("/")
console.log(partialPath); // <- ["", "film", "animation", "2022"]
Le premier élément est une chaîne de texte vide c'est parce que le pathname commence par un slash dans son premier caractère est que la chaîne est éclater sur ce caractère-là.
Pour supprimer le premier élément d'un tableau tu peux utiliser la méthode shift sur les array
pour finalement avoir le code:
// en considérant être sur une URL construite avec:
// "https://monsite.fr/film/animation/2022"
const path = document.location.pathname;
console.log(path); // <- "/film/animation/2022"
const partialPath = path.split("/")
console.log(partialPath); // <- ["", "film", "animation", "2022"]
// supprime le premier élément du tableau
partialPath.shift();
console.log(partialPath); // <- ["film", "animation", "2022"]
En quelque lignes de Javascript tu peux obtenir le pathname découper dans un tableau. Il te reste plus qu'à passer la valeur correctement à bootstrap
indique comment la structure HTML du breadcrumb doit être faite:
Tu peux j'imagine construire dynamiquement la liste en gardant juste la nav et le ol et en construisant les éléments avec Javascript,
avec quelque chose comme cela:
<nav aria-label="breadcrumb">
<ol class="breadcrumb" id="top-level-breadcrumb-list">
<!-- <li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li> !-->
</ol>
</nav>
<!-- le reste de ta page ... -->
<script>
document.addEventListener("DOMContentLoaded", function() {
// CONSTRUI LE TABLEAU DE CHEMINS DEPUIS L URL:
const path = document.location.pathname;
console.log(path);
const partialPathList = path.split("/")
// supprime le premier élément du tableau
partialPathList.shift();
console.log(partialPathList);
// CONSTRUI LES ELEMENTS DU BREADCRUMB:
const topLevelBreadCrumList = document.querySelector("#top-level-breadcrumb-list")
// parcour les morceaux de chemins
for(partialPath of partialPathList) {
// créé un nouvel élément du breadcrumb
const li = document.createElement("li")
li.classList.add("breadcrumb-item")
// si c'est le dernier élément du chemin
// on lui ajoute les attributs "active"
if(partialPath === partialPathList[partialPathList.length - 1]) {
li.classList.add("active")
li.setAttribute("aria-current", "page")
}
// ajoute le texte dans le breadcrumb
li.textContent = partialPath
// insère le breadcrumb dans la liste
topLevelBreadCrumList.appendChild(li)
}
})
</script>
- Edité par SamuelGaborieau3 26 septembre 2022 à 13:06:26
Pour ma part, je n'utilise pas le bundle que tu indiques et comme toi ce sont des routes correspondant à des items d'un menu.
Donc j'utilise le template bootstrap et dans le le menu que je génère avec knp-bundle-menu, je mets la hiérarchie des routes sur click d'un item de menu comme breadcrumb
Et sinon il y a la solution proposée par mon VDD.
A+
[Symfony5.4] Créer un fil d'ariane (breadcrumb)
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
suggestion de présentation.