Footer met slogan en meerdere navigatie-elementen

De footer vertelt de gebruiker dat het einde van de pagina bereikt is. Daarom is het belangrijk om op iedere pagina een footer toe te voegen, zelfs als deze verder geen content bevat.

De footer kan gebruikt worden om de slogan over te brengen en de gebruiker extra navigatie-opties te bieden.

De footer krijgt automatisch de gekozen applicatiekleur.

• Plaats de navigatielinks binnen een <nav>.
• Plaats een lijst aan navigatie-elementen binnen een <ul>. Zie onderstaand voorbeeld voor meer informatie of bekijk Lijstweergave voor meer informatie over het toevoegen van lijsten.
• Iedere lijst met navigatie-elementen dient een beschrijvende titel te bevatten voor gebruiksvriendelijkheid.
• Als er gebruik gemaakt wordt van meerdere navigatie-elementen binnen de footer dienen deze gegroeperd te zijn zodat ze gezamelijk schalen op kleinere schermen. Voeg hiervoor een <div> toe rondom de navigatie-elementen.

Voorbeeld

Visueel voorbeeld onderaan deze pagina

Html voorbeeld:

              
<footer>
    <div class="one-third-two-thirds">
        <span class="slogan">De Rijksoverheid. Voor Nederland</span>

        <div class="column-3">
        <nav aria-labelledby="example-footer-2-nav-1-heading">
            <h2 id="example-footer-2-nav-1-heading">Lorem ipsum</h2>
            <ul>
            <li><a href="">Lorem ipsum</a></li>
            <li><a href="">Ipsum</a></li>
            <li><a href="">Dolor set amet</a></li>
            <li><a href="">set</a></li>
            <li><a href="">Amet</a></li>
            </ul>
        </nav>

        <nav aria-labelledby="example-footer-2-nav-2-heading">
            <h2 id="example-footer-2-nav-2-heading">Lorem ipsum</h2>
            <ul>
            <li><a href="">Lorem</a></li>
            <li><a href="">Ipsum</a></li>
            <li><a href="">Dolor</a></li>
            <li><a href="">set</a></li>
            <li><a href="">Amet</a></li>
            </ul>
        </nav>

        <nav aria-labelledby="example-footer-2-nav-3-heading">
            <h2 id="example-footer-2-nav-3-heading">Lorem ipsum</h2>
            <ul>
            <li><a href="">Lorem</a></li>
            <li><a href="">Ipsum</a></li>
            <li><a href="">Dolor</a></li>
            <li><a href="">set</a></li>
            <li><a href="">Amet</a></li>
            </ul>
        </nav>
        </div>

    </div>
</footer>