Breadcrumbs – definicja, rodzaje i wdrożenie

Kategoria:

Opublikowane: 11-02-2026

Czas czytania

: 12 min

Breadcrumbs należą do tych elementów interfejsu, o których myśli się mało – ale gdy ich zabraknie, okazuje się, że część użytkowników ma bez nich problemy z nawigacją. W tym wpisie pokażemy, jak działają breadcrumbs i jakie pełnią funkcje, dlaczego są tak ważne (nie tylko z perspektywy UX!) oraz jakich błędów trzeba się wystrzegać przy ich wdrożeniu.

Czym są breadcrumbs (nawigacja okruszkowa)?

Breadcrumbs – czyli w dosłownym tłumaczeniu… okruszki chleba – to element nawigacji strony internetowej, który pokazuje użytkownikowi, gdzie dokładnie znajduje się w strukturze witryny.

Okruszki nawigacyjne pojawiają się prawie zawsze albo pod głównym menu strony, albo nad jej główną treścią i składają się z serii linków oddzielonych separatorem – może to być np. znak „>”, „/” lub „→”. Każdy link w tej ścieżce prowadzi do wyższego poziomu w hierarchii strony, dzięki czemu użytkownik może wrócić jeden lub kilka „kroków” w górę, bez klikania przycisku „wstecz” lub szukania odpowiedniej kategorii w menu.

Powiedzmy, że jesteś na stronie sklepu z elektroniką i przeglądasz właśnie ofertę interesującego Cię laptopa. Struktura breadcrumbs mogłaby wyglądać np. tak: Strona główna > Laptopy > Laptopy gamingowe > ASUS ROG Strix G18.

Mamy tu kolejno – pomijając stronę główną – kategorię produktową (Laptopy), podkategorię zawężającą ofertę sklepu do określonego typu sprzętu (Laptopy gamingowe) oraz stronę konkretnego produktu, na której właśnie jesteś.

I właśnie taką ścieżkę powinien zobaczyć każdy użytkownik, który znajdzie się na tej podstronie, niezależnie, czy trafił na nią ze sklepowej wyszukiwarki, z linku w Google albo z reklamy na Facebooku.

Kiedy używać nawigacji okruszkowej?

Jeśli prowadzisz sklep internetowy, powinieneś pomyśleć o zastosowaniu breadcrumbs. Nie wymagają dużego nakładu finansowego, a przynoszą wiele korzyści. Dla sklepów online bardzo ważne jest pozycjonowanie, a okruszki świetnie je wspierają. Kolejnym powodem jest user experience. Właściciele sklepów internetowych muszą bardzo dbać o odczucia konsumenta i użyteczność strony. Breadcrumbs pomagają użytkownikowi odnaleźć się na niej. Klient często trafia na sklep przez reklamę w internecie, może nie do końca interesować go zaproponowany produkt, ale dzięki ścieżce, którą widzi, jest w stanie sprawnie poruszać się po stronie. Być może zamiast reklamowanego laptopa marki HP, sprawdzi cały asortyment, wybierając coś dla siebie. Łatwo mu będzie też dotrzeć do strony głównej, której prawdopodobnie jeszcze nie widział, skoro trafił na stronę przez reklamę i jest na niej pierwszy raz. Breadcrumbs dyskretnie przedstawiają użytkownikowi strukturę witryny, zachęcają do pozostania na stronie i sprawdzenia co do zaoferowania mają poszczególne kategorie w danym sklepie.

Breadcrumbs nie są zarezerwowane wyłącznie dla sklepów internetowych. Powinny po prostu znajdować się tam, gdzie klient może się zgubić. Jeśli strona jest prosta i nawigacja wydaje się intuicyjna, nie ma sensu stosować okruszków. Ale jeżeli hierarchia witryny ma więcej niż chociaż dwa poziomy kategorii, zawsze radzimy umieścić taką ścieżkę nawigacyjną na stronie; część użytkowników na pewno z niej skorzysta.

Kiedy stosować nawigację okruszkową?

Na stronach e-sklepów, nawet tych mniejszych;
na portalach content-heavy, na przykład blogach, serwisach informacyjnych itd.;
na stronach firmowych z rozbudowaną strukturą;
na serwisach „katalogowych”, czyli m.in. portalach ogłoszeniowych i z ofertami pracy albo katalogach firm.

Kiedy breadcrumbs nie będą konieczne?

Na stronach typu single-page;
na landing page’ach;
na blogach z małą listą wpisów i bez wyraźnego podziału na kategorie.

Korzyści z breadcrumbs

Menu okruszkowe przede wszystkim ma ułatwić nawigację. Ale wdrożenie breadcrumbs niesie za sobą też kilka innych korzyści.

Zalety breadcrumbs z perspektywy SEO
Okruszki zachęcają użytkowników do odwiedzenia większej liczby podstron, co zmniejsza współczynnik odrzuceń i poprawia SEO. Ułatwiają one robotom poruszanie się po strukturze strony, pozwalając na lepsze wykorzystanie budżetu indeksowania (crawl budget). Dzięki słowom kluczowym zawartym w linkach, wyszukiwarki mogą precyzyjniej dopasować witrynę do zapytań użytkowników. Co więcej, breadcrumbs wzmacniają linkowanie wewnętrzne, co Google premiuje, wyświetlając je bezpośrednio w wynikach wyszukiwania. W efekcie nawigacja staje się bardziej intuicyjna, a użytkownicy łatwiej trafiają do celu.
Jak breadcrumbs wspierają SEO?
Stanowią logiczne rozwinięcie linkowania wewnętrznego;
pomagają robotom wyszukiwarki zinterpretować strukturę strony – a dzięki temu, trafniej indeksować podstrony umieszczone głębiej w hierarchii;
Google może je umieścić bezpośrednio w wynikach wyszukiwania, obok adresu strony – prezentacja linku w SERP-ach staje się w ten sposób bardziej czytelna, co może się przełożyć na wyższe click-through rate. Według badań Milestone Research z 2022 r. przeprowadzonych na ponad 4 milionach zapytań w Google, średnie CTR wyników z elementami rich results (w tym breadcrumbs!) wynosi 58%, dla pozostałych – 41%.
Zalety breadcrumbs z perspektywy UX (użytkownika)
Jednak najwięcej plusów breadcrumbs mają w sferze UX, ponieważ – jak powiedzieliśmy – są dla użytkownika kolejnym, bardzo intuicyjnym narzędziem do poruszania się po witrynie.
Jak breadcrumbs wspierają UX na stronie?
Pomagają użytkownikowi szybko zorientować się w strukturze całej strony;
pozwalają dotrzeć do kategorii nadrzędnych bez użycia menu, jednym kliknięciem;
zwiększają zaangażowanie użytkowników i, przede wszystkim, liczbę podstron, które odwiedzą w trakcie sesji;
pomagają ograniczyć bounce rate wśród użytkowników, którzy trafiają na podstronę bezpośrednio z Google lub innych źródeł i mogą czuć się na niej zagubieni.
Zalety breadcrumbs z perspektywy AI i LLMów
Okruszki są też dobrym źródłem informacji dla modeli AI. Aby LLM był w stanie przeanalizować treść strony i użyć ich do wygenerowania odpowiedzi na pytanie użytkownika, musi najpierw – dokładnie tak samo jak roboty wyszukiwarek – zrozumieć jej kontekst i w jaki sposób może być ona powiązana z innymi informacjami.
Jak breadcrumbs wspierają modele AI?
Pomagają modelom językowym poznać strukturę strony;
dostarczają sygnałów kontekstowych dotyczących relacji między podstronami;
dają jasną informację, czy dana strona jest kategorią, podkategorią czy stroną produktu,
ograniczają ryzyko, że model błędnie zinterpretuje treść, jeśli strona ma złożoną strukturę.

Poznaj rodzaje breadcrumbs

Można wyróżnić kilka typów breadcrumbs:

Oparte na hierarchii (hierarchy-based) – pokazują miejsce podstrony w strukturze witryny oraz określają liczbę kroków, jaka dzieli ją od strony głównej. Właśnie ten rodzaj breadcrumbs spotkasz na większości stron WWW. My również go polecamy, z prostego powodu – w czytelny sposób prezentuje hierarchię kategorii na stronie, tak jak tutaj: Strona główna > Moda > Odzież damska > Sukienki > Klasyczna, czerwona sukienka wieczorowa.
Oparte na atrybutach (attribute-based) – takie rozwiązanie jest czasem używane w sklepach internetowych; zamiast kategorii produktów użytkownik widzi konkretne właściwości – na przykład markę, rozmiar, kolor czy cenę – najczęściej odzwierciedlają one filtry, które klient zastosował, aby zawęzić wyniki, jak na przykładzie: Strona główna > Buty > Nike > Rozmiar 42 > Kolor: czarny.
Oparte na historii (history-based) – pokazują ścieżkę użytkownika, czyli jakie podstrony, po kolei, odwiedził na drodze do celu. Mogą wyglądać np. tak: Strona główna > Blog > Artykuł o SEO > Usługi > Pozycjonowanie. Jak widzisz… zupełnie nie odzwierciedlają struktury witryny. I dlatego ani z perspektywy SEO, ani UX, praktycznie nie ma sytuacji, w której takie breadcrumbs byłyby lepsze niż hierarchiczne – nawet specjaliści z Nielsen Norman Group od lat zalecają korzystać wyłącznie z okruszków hierarchy-based.

Najczęstsze błędy w implementacji nawigacji okruszkowej

Chociaż breadcrumbs nie wydają się skomplikowane, wiele stron wdraża je nieprawidłowo. Poznaj dobre praktyki ich implementacji.

1. Nie stosuj wyszukanego designu

Breadcrumbs to nie menu czy belka strony głównej. Cała istota w tym, by ich wygląd był intuicyjny. Nie eksperymentuj z designem, nie musisz ich nawet szczególnie wyróżniać – zadbaj po prostu o to, aby były czytelne: miały wystarczająco duży kontrast z tłem (min. 4.5:1, zgodnie z wytycznymi WCAG), wyraźne odstępy między nazwami kategorii a separatorami i nie za małą czcionkę.

2. Bądź szczegółowy

Nie omijaj żadnego poziomu – umieść w breadcrumbs całą ścieżkę od strony głównej do aktualnej podstrony. Pewnym wyjątkiem może być sytuacja, gdy ścieżka przekracza 5-6 elementów; wtedy być może warto ukryć kategorie niższego rzędu, w tym stylu: Strona główna → Buty męskie > Buty sportowe > Nike > … > Nike Revolution 8.

3. Pamiętaj o właściwym nazewnictwie

Nazwy w breadcrumbs powinny być dokładnie takie same, jak nazwy podstron w menu. Okruszki mają ułatwić klientowi nawigację, więc nie jest to dobre miejsce na marketingowe slogany. Wiele osób ma na przykład wątpliwości, pod jaką nazwą umieścić stronę główną: wahają się pomiędzy nazwą brandu, a zwyczajnym określeniem „strona główna”. Ta druga opcja zazwyczaj będzie lepsza.

4. Umieść okruszki jak najwyżej

Użytkownicy są przyzwyczajeni do lokalizacji okruszków wysoko na stronie. Powinny być widoczne dla klienta od razu po przejściu do danej podstrony. Użytkownik nie może ich szukać w witrynie.

5. Nie stosuj okruszków na stronie głównej

Nie dodawaj okruszków na stronę główną – są tam zbędne.

6. Nie zapominaj o mobile

Wdrażając breadcrumbs, nie zapomnij o użytkownikach korzystających ze strony za pomocą smartfonów czy tabletów. Podstawowa kwestia: linki w menu okruszkowym nie mogą być zbyt małe, użytkownik musi być w stanie je bez problemu kliknąć; ideałem byłyby touch targets na poziomie przynajmniej 44px, czyli zgodnie z wytycznymi Google i Apple. Jeśli ścieżka nawigacyjna w breadcrumbs jest zbyt długa, możesz np. ukryć część linków, ale też rozciągnąć linię ścieżki poza widoczny obszar ekranu i pozwolić ją przewijać palcem. I oczywiście, przed wdrożeniem koniecznie sprawdź, jak wyglądają okruszki w różnych kombinacjach.

7. Zacznij od lewej strony

Stronę główną umieść po lewej stronie breadcrumbs. Dlaczego? Użytkownicy są przyzwyczajeni do takiej struktury. Na końcu, po prawej stronie powinna znajdować się nazwa podstrony, na której aktualnie znajduje się klient, ewentualnie poprzednia podstrona, jeśli uznasz, że nie chcesz w ścieżce zamieszczać ostatniego kroku.

8. Breadcrumbs nie zastąpią menu

Okruszki na stronie to nie menu ani przycisk „wstecz”. Te elementy trzeba umieścić na stronie niezależnie od tego, czy znajdują się już na niej breadcrumbs.

9. Pomóż robotom wyszukiwarki

Aby roboty Google wiedziały dokładnie, które linki na stronie są okruszkami, trzeba je oznaczyć w kodzie HTML witryny. Wśród setek znaczników schema.org znajdziesz znacznik BreadcrumbList; wystarczy umieścić go wraz z linkami w sekcji <head> lub na końcu <body> każdej podstrony, a roboty nie powinny mieć problemów z tym, aby zidentyfikować okruszki i umieścić je w wynikach wyszukiwania obok adresu URL strony. Tak mógłby wyglądać fragment kodu opisujący okruszki:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Strona Główna",
    "item": "https://twojsklep.pl/"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "Buty",
    "item": "https://twojsklep.pl/buty"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "Buty Sportowe",
    "item": "https://twojsklep.pl/buty/sportowe"
  }]
}
</script>

10. Pamiętaj, że okruszki nie są dla wszystkich

Nie każda strona WWW potrzebuje breadcrumbs. Są witryny, które mają bardzo przejrzyste i mało rozbudowane menu, strona jest prosta i nieskomplikowana, a liczba podstron niewielka. Breadcrumbs na stronach z tak prostą strukturą nie mają zastosowania.

Breadcrumbs w praktyce

Choć menu okruszkowe ma być z zasady proste, projektanci i tak znajdują różne sposoby na wdrożenie breadcrumbs. Jak więc mogą wyglądać?

W projektach e-commerce okruszki niemal zawsze mają podobną strukturę – bez żadnych eksperymentów prowadzą przez kolejne kategorie w katalogu produktów. Tak na przykład prezentują się na stronie sklepu x-kom:

Jednak nawet w najprostszej ścieżce nawigacyjnej da się ukryć więcej informacji – co świetnie pokazuje przykład Ceneo. Na stronie największej polskiej porównywarki cen zobaczymy typowe okruszki… ale po najechaniu kursorem na daną kategorię, otworzy się dodatkowe, rozwijane menu z linkami do pozostałych podkategorii wchodzących w jej skład.

Na większości stron breadcrumbs nie przekraczają – jak wspomnieliśmy wcześniej – 5-6 poziomów. Dotyczy to nawet tych witryn, które mają bardzo rozbudowane katalogi z nawigacją fasetową, tak jak na Booking.com.

A tak prezentują się okruszki na stronie LINK4; w tym przypadku warto zwrócić uwagę na to, że mimo względnie małej czcionki, są one doskonale widoczne: po pierwsze, znajdują się na środku strony, a po drugie, mają wokół siebie bardzo dużo wolnej przestrzeni.

Ciekawy pomysł na to, jak optycznie można skrócić breadcrumbs, mieli z kolei projektanci portalu Onet – mówimy przecież o serwisie informacyjnym, w którym same nazwy artykułów potrafią być dłuższe niż ścieżka okruszków w przeciętnym e-sklepie. Zamiast linku „Strona główna” na pierwszym miejscu ścieżki mamy… ikonę domku.

Jak wdrożyć breadcrumbs na stronie?

Na szczęście, breadcrumbs na stronie internetowej można umieścić bardzo szybko – każdy CMS ma ku temu sprawdzone metody.

1. WordPress

W przypadku WordPressa wystarczy zainstalować którąś z popularnych wtyczek SEO, na przykład Yoast SEO albo Rank Math. Obie automatycznie generują breadcrumbs dla każdej podstrony, plus od razu opisują je w kodzie HTML przy pomocy znaczników schema. Są też w pełni kompatybilne z WooCommerce.

Większość motywów WordPressa bez problemu obsługuje okruszki, ale są wyjątki. W takiej sytuacji będzie trzeba wkleić krótki fragment kodu PHP do pliku szablonu header.php, tuż pod nagłówkiem strony. Dla Yoast SEO wyglądałby on tak:

<?php 
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
} 
?>

2. Drupal

W Drupalu standardem jest moduł Easy Breadcrumbs i jest on o tyle wygodny, że tworzy okruszki automatycznie na podstawie ścieżki adresu URL, a nie samej struktury menu strony. Ale uwaga – to oznacza, że aby moduł faktycznie spełniał swoje zadanie, trzeba dobrze zarządzać samymi URL-ami, tak aby w breadcrumbs nie pojawiały się nazwy typu “product123#”. Easy Breadcrumbs najlepiej połączyć z Pathauto, czyli kolejnym popularnym modułem, który generuje przyjaźniejsze aliasy adresów URL według narzuconego przez administratora schematu.

3. Magento 2

Magento ma już wbudowaną obsługę breadcrumbs, więc teoretycznie nie trzeba niczego instalować. W praktyce nie jest tak łatwo.

Po pierwsze, w domyślnej konfiguracji okruszki będą włączone tylko dla kategorii i produktów, nie dla stron „contentowych”, typu „O nas”, „Kontakt”, „Regulamin” itd. – trzeba je włączyć samemu w ustawieniach (opcja Show Breadcrumbs for CMS Pages);

Po drugie, produkty mogą należeć jednocześnie do kilku kategorii. Na przykład najnowszy iPhone mógłby pojawić się w swojej „głównej” kategorii – Smartfony – ale też w kategoriach Bestsellery albo Nowości; zależy, jak zbudowany jest sklep. Domyślnie silnik generuje okruszki z uwzględnieniem tej kategorii, z której użytkownik trafił na kartę produktu – ale co, jeśli ktoś wszedł na nią prosto z wyszukiwarki? Niektóre rozszerzenia SEO – na przykład MageWorx SEO Suite Ultimate czy Amasty SEO Toolkit pozwalają ręcznie przypisać każdej kategorii wagę; wtedy breadcrumbs zawsze pokazują tę samą, „główną” kategorię produktu, niezależnie od ścieżki użytkownika.

Podsumowanie

Nawigacja okruszkowa to dobry przykład, jak drobna zmiana w interfejsie może przynieść spore korzyści w kontekście UX, SEO czy modeli językowych. Obecnie większość CMSów oferuje to rozwiązanie, dlatego warto po nie sięgnąć.