Nawigacje, breadcrumbsy i paginacja

Cele lekcji

Po ukończeniu tej lekcji będziesz umieć:

• stosować semantyczny element <nav> z właściwym opisem,
• oznaczać aktywną stronę przez aria-current,
• budować breadcrumbsy jako uporządkowaną ścieżkę,
• projektować paginację z poprzednią, następną i aktywną stroną,
• utrzymać widoczne stany :hover i :focus-visible,
• dopasować nawigację do małych ekranów bez poziomego overflow.

Kontekst praktyczny

Nawigacje pojawiają się w headerach, panelach bocznych, zakładkach, dashboardach, wynikach wyszukiwania, katalogach produktów i dokumentacji. Breadcrumbsy pomagają odnaleźć pozycję w hierarchii, a paginacja dzieli długie listy na mniejsze porcje.

Rola nawigacji

Nawigacja powinna prowadzić użytkownika, a nie rywalizować z treścią. Jej zadaniem jest orientacja, szybkie przejście do kluczowych miejsc i jasna informacja, który widok jest aktualny.

• Nawigacja główna pokazuje najważniejsze obszary produktu albo strony.
• Breadcrumb pokazuje położenie w hierarchii.
• Paginacja pomaga poruszać się po podzielonej liście wyników.
• Zakładki przełączają widoki w ramach jednego kontekstu.

Semantyczny nav

Element <nav> oznacza blok głównych linków nawigacyjnych. Jeżeli na stronie jest więcej niż jedna nawigacja, nadaj im rozróżnialne etykiety przez aria-label.

Kopiuj<nav class="tabs-nav" aria-label="Nawigacja modułu kursu">
  <ul>
    <li><a href="#lekcje" aria-current="page">Lekcje</a></li>
    <li><a href="#materialy">Materiały</a></li>
    <li><a href="#certyfikat">Certyfikat</a></li>
  </ul>
</nav>

Lista w nawigacji nie jest obowiązkowa w każdym wzorcu, ale często pomaga zachować czytelną strukturę grupy linków.

Aktywny element

Aktywny link nie powinien być oznaczony wyłącznie kolorem. Dodaj styl wizualny oraz semantyczny atrybut aria-current="page", jeżeli link reprezentuje aktualną stronę.

.tabs-nav a[aria-current="page"] {
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 800;
}

Dla zakładek możesz spotkać także aria-current="true" albo wzorzec z role="tablist". Na tym etapie wystarczy pamiętać, że aktywny stan ma być widoczny i dostępny.

Breadcrumbsy

Breadcrumb to ścieżka okruszków pokazująca miejsce użytkownika w strukturze. Najczęściej buduje się go jako <nav> z <ol>, bo kolejność elementów ma znaczenie.

Kopiuj<nav class="breadcrumbs" aria-label="Ścieżka okruszków">
  <ol>
    <li><a href="#start">Start</a></li>
    <li><a href="#css-academy">CSS Academy</a></li>
    <li aria-current="page">Nawigacje</li>
  </ol>
</nav>

Separatory między elementami, takie jak ukośnik albo strzałka, najlepiej dodać w CSS. Nie powinny być ważniejszą treścią niż same linki.

Paginacja

Paginacja powinna informować, która strona wyników jest aktualna, gdzie można przejść dalej i kiedy przycisk poprzedniej lub następnej strony jest niedostępny.

Kopiuj<nav class="pagination" aria-label="Paginacja wyników">
  <a href="?page=1">Poprzednia</a>
  <a href="?page=1">1</a>
  <a href="?page=2" aria-current="page">2</a>
  <a href="?page=3">3</a>
  <a href="?page=3">Następna</a>
</nav>

Jeżeli poprzednia strona nie istnieje, użyj spokojnego stanu niedostępnego. Nie zostawiaj aktywnego linku prowadzącego donikąd.

Responsywność nawigacji

Nawigacje często psują layout przez długie etykiety. Zacznij od układu, który zawija elementy albo pozwala im przewijać się poziomo w kontrolowanym kontenerze. Nie pozwól, aby cała strona dostała poziomy scroll.

.tabs-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  min-width: 0;
}

Na mobile możesz użyć menu rozwijanego, przewijanych zakładek albo skróconej nawigacji. W każdym przypadku linki muszą pozostać dostępne klawiaturą.

Demo nawigacji

Poniższe demo pokazuje trzy wzorce orientacji w jednym komponencie: nawigację modułu, breadcrumbsy i paginację wyników.

Najczęstsze błędy początkujących

• Brak aria-label, gdy na stronie jest więcej niż jedna nawigacja.
• Oznaczanie aktywnego elementu tylko kolorem, bez aria-current.
• Budowanie breadcrumbsów jako zwykłego tekstu bez linków i kolejności.
• Paginacja bez informacji, która strona jest aktualna.
• Zbyt małe cele kliknięcia w linkach nawigacyjnych.
• Sztywna nawigacja, która powoduje poziome overflow na telefonie.

Mini zadanie

Zbuduj komplet nawigacyjny dla listy artykułów.

• Dodaj <nav aria-label="Nawigacja kategorii"> z czterema linkami.
• Oznacz aktywną kategorię przez aria-current="page".
• Dodaj breadcrumb jako <nav> z <ol>.
• Dodaj paginację z poprzednią, trzema stronami i następną.
• Przetestuj fokus klawiaturą i brak poziomego overflow na szerokości 390px.

Checklista

• Rozumiem, kiedy użyć elementu <nav>.
• Potrafię nadać kilku nawigacjom różne etykiety przez aria-label.
• Oznaczam aktualny link przez aria-current.
• Buduję breadcrumbsy jako uporządkowaną listę.
• Paginacja ma aktywną stronę, stany fokusu i sensowne cele kliknięcia.
• Nawigacja zawija się lub mieści na małym ekranie bez psucia layoutu.

Podsumowanie lekcji

Nawigacje, breadcrumbsy i paginacja budują orientację użytkownika w produkcie. Dobra implementacja łączy semantyczny HTML, opisane bloki nav, aktywne stany przez aria-current, widoczny fokus oraz responsywny układ bez poziomego overflow.

Kolejny krok roadmapy to tabele i dane w CSS.