Navigatie

Benodigde stappen

Importeer component via npm

@use "@minvws/manon/navigation";

1. Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
2. Vul de variabelen met de gewenste stijlkeuzes.
3. Voeg de benodigde HTML toe. Voor meer informatie zie: Voorbeelden.

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Aandachtspunten:

• De standaard ingestelde waarden binnen Manon maken gebruik van de Body text set. Om gebruik te maken van deze set, laad de set eenmalig in voordat overige componenten er gebruik van maken. Zie onderstaand voorbeeld voor meer informatie.

Voorbeelden:

Visueel voorbeeld:

Navigatie-component met een lijst met links

HTML-voorbeeld:

<nav>
    <ul>
        <li><a href="#">Voorbeeld-link 1</a></li>
        <li><a href="#">Voorbeeld-link 2</a></li>
        <li><a href="#">Voorbeeld-link 3</a></li>
    </ul>
</nav>

Navigatie-component met een horizontaal uitgelijnde lijst met links

HTML-voorbeeld:

<nav>
    <ul class="horizontal-view">
        <li><a href="#">Voorbeeld-link 1/a></li>
        <li><a href="#">Voorbeeld-link 2</a></li>
        <li><a href="#">Voorbeeld-link 3</a></li>
    </ul>
</nav>