<nav>
Blok głównych linków nawigacyjnych: menu, spis treści, okruszki.
- Wyświetlanie
- block
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść przepływu bez elementu
<main>
Przykład
#<nav aria-label="Okruszki">
<ol>
<li><a href="/">Strona główna</a></li>
<li><a href="/dokumentacja">Dokumentacja</a></li>
<li aria-current="page">HTML</li>
</ol>
</nav>Definicja i zastosowanie
#Element <nav> oznacza grupę odnośników, które służą do poruszania się po serwisie lub po bieżącej stronie: menu główne, okruszki (breadcrumbs), spis treści, paginację.
Nie każda grupa linków to nawigacja. Linki do regulaminu w stopce czy lista tagów pod artykułem zwykle nie potrzebują <nav>. Zarezerwuj go dla głównych bloków nawigacji.
Jeśli na stronie jest kilka elementów <nav>, nadaj każdemu nazwę przez aria-label, na przykład „Główna” i „Okruszki”. Czytnik ekranu przeczyta wtedy, która nawigacja jest która.
Składnia
#<nav aria-label="Nazwa nawigacji">
…
</nav>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
nav {
display: block;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Linki w menu najczęściej układa się jako listę
<ul>lub<ol>. Czytnik ekranu poda wtedy liczbę pozycji. - Bieżącą stronę oznacz atrybutem
aria-current="page".
Powiązane hasła
#- <a>Odnośnik do innej strony, pliku, adresu e-mail albo miejsca na tej samej stronie.
- <header>Wstęp do strony lub sekcji: logo, tytuł, nawigacja, dane autora.
- <ul>Lista wypunktowana, w której kolejność pozycji nie ma znaczenia.
- <ol>Lista numerowana, w której kolejność pozycji ma znaczenie.
- <footer>Stopka strony lub sekcji: autor, prawa autorskie, linki, dane kontaktowe.
Widzisz błąd albo brakuje przykładu? Napisz do nas.