Kruimelpad

Wat is een kruimelpad?

Kruimelpad, in het Engels ook wel breadcrumb (broodkruimel) genoemd - is een weergave van waar je bent in de website navigatiestructuur. Het kan bezoekers helpen om terug te navigeren naar bovengelegen pagina's.

Stel dat je menustructuur als volgt is:

• Inwoners
  • Paspoort
  • Afval
    • Afvalsortering
    • Afval inleveren
    • Afvalkalender
  • Melding maken
• Ondernemers

En je bevind je als bezoeker op 'Afval inleveren', het kruimelpad zal dan worden:

Home > Inwoners > Afval > Afval inleveren

Waarbij de eerste 3 items aanklikbaar zijn en verwijzen naar de pagina's.

Hoe wordt de opbouw van het kruimelpad op de website bepaald?

Het kruimelpad op een pagina wordt bepaald door de bovenliggende landings/overzichtspagina van het geselecteerde content type. Deze overzichtspagina moet aanwezig zijn in het menu, zodat het kruimelpad opgebouwd kan worden. Voor de structuur van het kruimelpad is de plek (gewicht) bepalend. M.a.w. de eerste landings/overzichtspagina in dat menu welke van toepassing is wordt het kruimelpad. Elke pagina heeft namelijk maar 1 kruimelpad. De regels:

1. Een detail pagina heeft een kruimelpad als er een landings/overzichtspagina met dit contenttype aanwezig is en gelinked is via het menu -> Home / overview page / detail page

2. Een detail pagina heeft altijd het kruimelpad van de eerste landings/overzichtspagina dat in het menu geladen wordt. Het kruimelpad wordt bepaald op basis van het gewicht in het menu -> Home / first-overview-page-from-the-menu / detail page

3. Een detail pagina heeft geen kruimelpad wanneer er helemaal geen (ook niet zichtbaar) landings/overzichtspagina van dit contenttype aanwezig is in het menu -> geen kruimelpad

4. Een detail pagina dat geen kruimelpad heeft (zie punt 3) kan een kruimelpad krijgen door deze te linken aan een landings/overzichtspagina in het menu. Een detailpagina dat wel al een kruimelpad heeft (zie 2) kan een ander kruimelpad krijgen door het in het menu te plaatsen onder een landings/overzichtspagina en vervolgens het item uit te schakelen (niet ingeschakeld).

Styling opties kruimelpad

Met de volgende cssVars is het mogelijk om het kruimelpad meer te personaliseren/stijlen. Aanpasbaar zijn kleur van de link, fontsize, font family, kleur van het tussen icoon, het tussen icoon zelf:

1. breadcrumbLinkColor, fallback primary

2. breadcrumbFontSize, fallback: .75rem

3. breadcrumbFontFamily, fallback: --fontFamily

4. breadcrumbSeperatorIconColor, fallback --bulletColor

5. breadcrumbSeperatorIcon, fallback \f054 (chevron-right)