Okruszki / Breadcrumb

Sprawdź najnowszą wersję komponentu breadcrumbs zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać.

Okruszki są elementem nawigacyjnym na stronie WWW. Dzięki nim możemy wyświetlić użytkownikowi ścieżkę, którą przeszedł oraz miejsce w którym się aktualnie znajduje. Okruszki pozwalają też łatwo cofnąć się użytkownikowi o kilka stron.

Okruszki z pomocą Bootstrapa możemy stworzyć na dwa sposoby. Pierwszym z nich jest użycie listy <ol> z klasą .breadcrumb. Każdy element listy <li> musi mieć klasę .breadcrumb-item. Dodatkowo aktywnemu okruszkowi, czyli temu, który wskazuje aktualną stronę nadajemy klasę .active

<ol class="breadcrumb">
  <li class="breadcrumb-item active">Home</li>
</ol>
<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item active">Library</li>
</ol>
<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="#">Home</a></li>
  <li class="breadcrumb-item"><a href="#">Library</a></li>
  <li class="breadcrumb-item active">Data</li>
</ol>

Drugim sposobem jest stworzenie okruszków jako elementu <nav>. Tutaj podobnie jak wyżej, głównemu elementowi musimy nadać klasę .breadcrumb a poszczególne okruszki muszą mieć klasę .breadcrumb-item.

<nav class="breadcrumb">
  <a class="breadcrumb-item" href="#">Home</a>
  <a class="breadcrumb-item" href="#">Library</a>
  <a class="breadcrumb-item" href="#">Data</a>
  <span class="breadcrumb-item active">Bootstrap</span>
</nav>