1. Linki

Linki (odsyłacze) są jednym z podstawowych elementów nawigacji w HTML. Używamy znacznika <a> z atrybutem href, aby stworzyć link do innej strony, sekcji lub zasobu:

            <a href="https://www.przyklad.pl">Odwiedź naszą stronę</a>
        

Linki mogą prowadzić do różnych typów zasobów, takich jak strony internetowe, pliki do pobrania, a także mogą być używane do nawigacji wewnątrz tej samej strony:

            <a href="#sekcja">Przejdź do sekcji</a>
        

2. Element <nav>

HTML5 wprowadza element <nav>, który służy do grupowania linków nawigacyjnych na stronie, takich jak menu lub pasek nawigacyjny:

            <nav>
                <ul>
                    <li><a href="#home">Strona główna</a></li>
                    <li><a href="#about">O nas</a></li>
                    <li><a href="#services">Usługi</a></li>
                    <li><a href="#contact">Kontakt</a></li>
                </ul>
            </nav>
        

Takie menu może być stylizowane w CSS, aby stworzyć bardziej zaawansowaną nawigację na stronie.

3. Menu rozwijane

Menu rozwijane to popularny element nawigacji, szczególnie w bardziej rozbudowanych stronach internetowych. Tworzymy je za pomocą list zagnieżdżonych:

            <nav>
                <ul>
                    <li><a href="#home">Strona główna</a></li>
                    <li>
                        <a href="#services">Usługi</a>
                        <ul>
                            <li><a href="#webdesign">Projektowanie stron</a></li>
                            <li><a href="#seo">SEO</a></li>
                        </ul>
                    </li>
                    <li><a href="#contact">Kontakt</a></li>
                </ul>
            </nav>
        

Zwykle używa się do tego stylów CSS, aby ukrywać i wyświetlać podmenu w momencie, gdy użytkownik najeżdża myszką na element:

            nav ul ul {
                display: none;
                position: absolute;
            }
            nav ul li:hover ul {
                display: block;
            }
        

4. Breadcrumbs (okruszki chleba)

Okruszki chleba to rodzaj nawigacji, który pomaga użytkownikom zorientować się, w którym miejscu hierarchii strony się znajdują:

            <nav aria-label="breadcrumb">
                <ol>
                    <li><a href="#home">Strona główna</a></li>
                    <li><a href="#category">Kategoria</a></li>
                    <li>Obecna strona</li>
                </ol>
            </nav>
        

Okruszki chleba pomagają w nawigacji po bardziej złożonych strukturach stron, takich jak sklepy internetowe lub witryny z wieloma kategoriami.

5. Nawigacja zakładkowa

Zakładki umożliwiają użytkownikom przeglądanie różnych sekcji treści bez opuszczania bieżącej strony. Zakładki można utworzyć w HTML za pomocą linków kierujących do wewnętrznych elementów strony:

            <nav>
                <ul>
                    <li><a href="#sekcja1">Sekcja 1</a></li>
                    <li><a href="#sekcja2">Sekcja 2</a></li>
                    <li><a href="#sekcja3">Sekcja 3</a></li>
                </ul>
            </nav>

            <h2 id="sekcja1">Sekcja 1</h2>
            <p>Treść sekcji 1...</p>

            <h2 id="sekcja2">Sekcja 2</h2>
            <p>Treść sekcji 2...</p>

            <h2 id="sekcja3">Sekcja 3</h2>
            <p>Treść sekcji 3...</p>
        

6. Nawigacja za pomocą ikon

Ikony są często używane jako elementy nawigacyjne. Możemy osadzić ikony jako linki lub przyciski nawigacyjne, korzystając z bibliotek ikon, takich jak Font Awesome:

            <nav>
                <a href="#facebook"><i class="fa fa-facebook"></i></a>
                <a href="#twitter"><i class="fa fa-twitter"></i></a>
                <a href="#instagram"><i class="fa fa-instagram"></i></a>
            </nav>
        

Ikony można również stylizować za pomocą CSS, aby były bardziej interaktywne.

7. Nawigacja mobilna (menu hamburger)

Na stronach responsywnych często wykorzystuje się tzw. menu hamburger (trzy paski), które po kliknięciu otwiera ukryte menu nawigacyjne na urządzeniach mobilnych:

            <button class="hamburger" onclick="toggleMenu()">☰ Menu</button>
            <nav id="mobileMenu" style="display: none;">
                <ul>
                    <li><a href="#home">Strona główna</a></li>
                    <li><a href="#about">O nas</a></li>
                    <li><a href="#services">Usługi</a></li>
                    <li><a href="#contact">Kontakt</a></li>
                </ul>
            </nav>

            <script>
                function toggleMenu() {
                    var menu = document.getElementById('mobileMenu');
                    if (menu.style.display === 'block') {
                        menu.style.display = 'none';
                    } else {
                        menu.style.display = 'block';
                    }
                }
            </script>