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
Przykład
Kod
<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>
<p>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
.
Przykład
Kod
<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>
<p>
Jeden komentarz w “Okruszki / Breadcrumb”
Raf
Dobre, ale przydałoby się wskazać różnice! Które lepsze do jakiego zastosowania?