Zijmenu naast de pagina

Voor het plaatsen van een zijmenu naast de pagina.

Gebruik deze weergave als de inhoud van het zijmenu niet over de content van de pagina gaat maar website breed is. Zoals bijvoorbeeld hoofdnavigatie.

Gaat de inhoud van het zijmenu over de inhoud van de content. En hoort het bij de content. Gebruik dan: Zijmenu binnen de pagina

Voorbeelden

Zijmenu

Benodigde stappen

  1. Voeg de class sidemenu toe aan de body.
  2. Voeg direct binnen de body een nav toe met de gewenste inhoud.
  3. Groepeer de overige content in een enkel element indien dat nog niet gebeurd is. Bijvoorbeeld: div. Voor meer informatie zie: Voorbeeld sidemenu structuur.

Aandachtspunten

  • Deze versie is een zijmenu zonder inklapfunctionaliteit. Deze versie maakt geen gebruik van JavaScript.

Visueel voorbeeld

Zie het zijmenu van deze pagina.

HTML-voorbeeld structuur

<body class="sidemenu">
  <nav>
    <!-- Zijmenu content -->
  </nav>

  <div class="page-content">
    <header>
      <!-- Inhoud van de header. -->
    </header>

    <main>
      <!-- Overige pagina content. -->
    </main>

    <footer>
      <!-- Inhoud van de footer. -->
    </footer>
  </div>
</body>

Bijbehorende bestanden

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

Importeer component via npm

CSS-voorbeeld:

@use "@minvws/manon/sidemenu";