Breadcrumb Navigation

[jeffreylauwers]

We willen graag meer leren over het Breadcrumb Navigation component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook of screenshots. Met deze informatie kunnen we bewijzen dat het component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

---

Naam

Breadcrumb Navigation

Doel

Toont de locatie van de pagina binnen de hiërarchie van een website en biedt de mogelijkheid om tussen niveaus te navigeren.

Onderzoek

Breadcrumbs: 11 Design Guidelines for Desktop and Mobile - Nielsen Norman Group
Artikel over Breadcrumb Navigation met richtlijnen. Onder andere over home, current en responsive gedrag.

Designing Effective Breadcrumbs Navigation - Smashing Magazine
Artikel over Breadcrumb Navigation met richtlijnen. Onder andere over home, underline, current en responsive gedrag.

6 Important Aspects of Well-Performing Mobile Product Page Breadcrumbs - Baymard Institute
Artikel over Breadcrumb Navigation met richtlijnen. Onder andere over responsive gedrag.

In een comment bij Breadcrumb Github Discussion van GOV.UK wordt opgemerkt dat in een onderzoek niet op de Breadcrumb werd geklikt omdat deze dezelfde kleur had als de tekst.

In een Github Issue bij WCAG Audit Discussion wordt besproken hoe om te gaan met een Breadcrumb bij een small viewport (dan wel ingezoomd of lage resolutie).

[jeffreylauwers]

Amsterdam

• Storybook
• Figma

---

Screenshots / Varianten

Storybook

Large viewport

---

Notities

• Home: Uitgeschreven als link.
• Current page: Lijkt geen deel uit te maken van breadcrumb.
• Small viewport: Over meerdere regels.
• Richtlijnen beschikbaar (Storybook).

[sanderdegoose]

Rotterdam

• Figma
• Storybook

---

Screenshots / Varianten

Figma

Default

Truncated

Small viewport

Storybook

---

Notities

• Home: Uitgeschreven als link.
• Current page: Maakt als laatste item deel uit van breadcrumb (kleur wordt in Storybook nog aangepast).
• Small viewport:
  • In Storybook over meerdere regels.
  • In Figma enkel een link naar het bovenliggende niveau.
  • Op de rotterdam.nl wordt 'Home' weggelaten.
• Richtlijn (Figma) beschrijft dat breadcrumb link bij een maximaal aantal karakters truncated kan worden.

[jeffreylauwers]

Den Haag

• Storybook
• Figma - Huidig
• Figma - WIP

---

Screenshots / Varianten

Storybook

Default

Long

With icon

Without current

---

Notities

• Home: Uitgeschreven als link. Optie beschikbaar om als icoon (huis) te tonen.
• Current page: Maakt als laatste item deel uit van breadcrumb. Optie beschikbaar niet te tonen.
• Small viewport: Enkel een link naar het bovenliggende niveau.
• Truncation als optie bij lange breadcrumb.
• Richtlijnen beschikbaar.

[jeffreylauwers]

DSO Toolkit

• Documentatie website

---

Screenshots / Varianten

Documentatie website

---

Notities

• Home: Uitgeschreven als link.
• Current page: Maakt als laatste item deel uit van breadcrumb.
• Small viewport: Over meerdere regels.
• Richtlijnen beschikbaar.

[jeffreylauwers]

DUO

• Documentatie website - Backlink
• Documentatie website - Navgation

---

Screenshots / Varianten

---

Notities

Geen specifiek Breadcrumb navigation component. Er wordt gebruik gemaakt van een mix aan componenten (navigation, back-link en list-links). Het Navigation component biedt een vorm van breadcrumb-ish gedrag.

[jeffreylauwers]

OpenGemeenten

• Patternlab
• Voorbeeld website

---

Screenshots / Varianten

Patternlab

Bread Crumb

---

Notities

• Home: Als icoon (huis).
• Current page: Maakt als laatste item deel uit van breadcrumb.
• Small viewport: Icoon (arrow-left) en vanaf bepaald breakpoint over meerdere regels.
• Momenteel wordt er bij Open Gemeenten gekeken naar het gedrag van de Breadcrumb navigation bij een small viewport.

[jeffreylauwers]

RVO

• Storybook
• Figma

---

Screenshots / Varianten

Storybook

---

Notities

• Home: Uitgeschreven als link (zie rvo.nl).
• Current page: Maakt als laatste item deel uit van breadcrumb.
• Small viewport: Over meerdere regels (zie rvo.nl).

[jeffreylauwers]

Utrecht

• Storybook
• Figma

---

Screenshots / Varianten

Storybook

---

Notities

• Home: Uitgeschreven als link.
• Current page: Maakt als laatste item deel uit van breadcrumb (zelfde kleur als interactieve items).
• Small viewport: In Storybook over meerdere regels. In Figma enkel een link naar het bovenliggende niveau.
• Verschillende opties beschikbaar (Storybook).
• Documentatie beschikbaar (Storybook).

[jeffreylauwers]

Nog een variant voor Breadcrumb navigation. Gedeeld door Niels Roozemond tijdens een Design Open Hour:
https://gui-challenges.web.app/breadcrumbs/dist/

[jeffreylauwers]

Belastingdienst

Detailpagina op website

---

Screenshots / Varianten

Large viewport

Small viewport

---

Notities

Small viewport: Breadcrumb wordt in zijn geheel weggelaten waarschijnlijk onder het motto 'Leuker kunnen we het niet maken, wel makkelijker' 😉

[Robbert]

Alle voorbeelden van Breadcrumb navigation zijn onderdeel van de navigatie van de pagina, en zijn daarom waarschijnlijk onderdeel van een navigation landmark.

Er is ook nog een andere toepassing van breadcrumb navigation, daar moet component niet onderdeel zijn van de navigation landmark: de breadcrumb navigation in zoekresultaten. Ik kan me niet herinneren dat ik deze versie recent tegen ben gekomen op een overheidswebsite.

[Robbert]

Om dit in code mogelijk te maken, zou het misschien een idee zijn om de implementatie op te splitsen in een <BreadcrumbNavigation> voor de navigation landmark versie, en een <BreadrcrumbLinkList> voor de zoekresultatenversie. De <BreadcrumbNavigation> kan dan intern gebruik maken van de <BreadcrumbLinkList>.

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Breadcrumb navigation op het Community bord

[Rozerinay]

✨ Dit component is nu Community ✨

Help je mee hem door de Candidate stappen te krijgen?
Breadcrumb navigation op het Candidate bord