Breadcrumbs, czyli tzw. okruszki nawigacyjne, to element interfejsu użytkownika, który pokazuje aktualne miejsce użytkownika w strukturze witryny. Nazwa pochodzi od bajki o Jasiu i Małgosi, którzy zostawiali okruszki chleba, by móc wrócić tą samą drogą. W kontekście stron internetowych breadcrumbs spełniają podobną rolę – pomagają użytkownikowi zrozumieć, gdzie się znajduje, i umożliwiają szybki powrót do poprzednich poziomów nawigacji.
Spis treści
Czym są okruszki nawigacyjne?
Breadcrumbs to ciąg linków, zwykle umieszczony w górnej części strony, który pokazuje ścieżkę od strony głównej do bieżącej lokalizacji. Przykład:
Strona główna > Blog > SEO > Co to są breadcrumbs?
Każdy z elementów (oprócz ostatniego) to aktywny link, który pozwala użytkownikowi cofnąć się do danego poziomu witryny.
Główne typy breadcrumbs
Istnieją trzy główne rodzaje nawigacji okruszkowej:
- Hierarchiczne (location-based) – pokazują strukturę strony, np.:
Strona główna > Kategorie > Elektronika > Smartfony - Atrybutowe (attribute-based) – stosowane głównie w e-commerce, pokazują cechy produktu: S
trona główna > Buty > Damskie > Rozmiar 38 > Kolor: Czarny - Historyczne (path-based) – pokazują ścieżkę użytkownika (rzadziej stosowane):
Strona główna > Poprzednia strona > Poprzednia strona 2 >Obecna strona
Korzyści z breadcrumbs
Użyteczność (UX):
- Pomagają użytkownikom szybko zorientować się w strukturze strony.
- Ułatwiają nawigację w głąb serwisu i powrót do wcześniejszych sekcji.
SEO (optymalizacja pod wyszukiwarki):
- Wspierają indeksację witryny przez roboty Google.
- Okruszki chleba mogą być wyświetlane w wynikach wyszukiwania (tzw. rich snippets), co poprawia widoczność i CTR.
- Zmniejszają współczynnik odrzuceń, kierując użytkowników do wyższych poziomów zamiast opuszczania strony.
Gdzie warto stosować breadcrumbs?
- Sklepy internetowe (e-commerce)
- Blogi z rozbudowaną strukturą kategorii
- Strony korporacyjne z wielopoziomowym menu
- Portale informacyjne i edukacyjne
Kiedy nie stosować nawigacji okruszowej?
- W bardzo prostych witrynach (np. one-page)
- Jeśli nawigacja okruszkowa byłyba identyczne dla większości podstron – tracą wtedy sens i przejrzystość

