Ga direct naar inhoud

Header

De header-navigation wordt vaak gebruikt als extra navigatiepunt en om aan te geven aan de gebruiker dat het einde van de pagina bereikt is.

Benodigde stappen

  1. Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
  2. Voeg de benodigde HTML toe. Voor meer informatie zie: voorbeelden.

Voorbeelden

Alleen navigatie

Visueel voorbeeld

HTML-voorbeeld

<header>
  <a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>

  <nav
    data-open-label="Menu"
    data-close-label="Sluit menu"
    data-media="(min-width: 30rem)"
    aria-label="Hoofdnavigatie"
    class="collapsible"
  >
    <div class="collapsing-element">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/components">Componenten</a></li>
        <li><a href="/documentation">Documentatie</a></li>
      </ul>
    </div>
  </nav>
</header>

Navigatie met content wrapper

Visueel voorbeeld

HTML-voorbeeld

<header>
  <div>
    <a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>

    <nav
      data-open-label="Menu"
      data-close-label="Sluit menu"
      data-media="(min-width: 30rem)"
      aria-label="Hoofdnavigatie"
      class="collapsible"
    >
      <div class="collapsing-element">
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/components">Componenten</a></li>
          <li><a href="/documentation">Documentatie</a></li>
        </ul>
      </div>
    </nav>
  </div>
</header>

Visueel voorbeeld

HTML-voorbeeld

<header>
  <a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>

  <nav
    data-open-label="Menu"
    data-close-label="Sluit menu"
    data-media="(min-width:42rem)"
    aria-label="Hoofdnavigatie"
    class="collapsible"
  >
    <div class="collapsing-element">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/components">Componenten</a></li>
        <li><a href="/documentation">Documentatie</a></li>
      </ul>

      <div>
        <form class="inline">
          <input type="text" placeholder="Zoeken" />
          <button type="submit">
            <span class="icon icon-search" aria-hidden="true"></span>
            <span class="visually-hidden">Zoeken</span>
          </button>
        </form>
      </div>
    </div>
  </nav>
</header>

Visueel voorbeeld

HTML-voorbeeld

<header>
  <div>
    <a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>

    <nav
      data-open-label="Menu"
      data-close-label="Sluit menu"
      data-media="(min-width: 30rem)"
      aria-label="Hoofdnavigatie"
      class="collapsible"
    >
      <a href="/" class="logo">
        <img src="/img/logo-white.svg" alt="Placeholder logo">Manon
      </a>

      <div class="collapsing-element">
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/components">Componenten</a></li>
          <li><a href="/documentation">Documentatie</a></li>
        </ul>
      </div>
    </nav>
  </div>
</header>

Navigatie met meerdere menu's

Visueel voorbeeld

HTML-voorbeeld

<header>
  <div>
      <a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>

      <nav
        data-open-label="Menu"
        data-close-label="Sluit menu"
        data-media="(min-width: 30rem)"
        aria-label="Hoofdnavigatie"
        class="collapsible"
      >
        <div class="collapsing-element">
          <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/components">Componenten</a></li>
            <li><a href="/documentation">Documentatie</a></li>
          </ul>

          <ul>
            <li><a href="/logout">Logout</a></li>
          </ul>
        </div>
      </nav>
  </div>
</header>

Navigatie met formulier-knop

Visueel voorbeeld

HTML-voorbeeld

<header>
  <div>
      <a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>

      <nav
        data-open-label="Menu"
        data-close-label="Sluit menu"
        data-media="(min-width: 30rem)"
        aria-label="Hoofdnavigatie"
        class="collapsible"
      >
        <div class="collapsing-element">
          <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/components">Componenten</a></li>
            <li><a href="/documentation">Documentatie</a></li>
          </ul>

          <ul class="actions">
            <li><a href="/examples/header-navigation-with-form-button" class="avatar">A</a></li>
            <li>
              <form action="/logout" method="POST" class="inline">
                <input type="hidden" name="_token" value="">
                <button type="submit">Logout</button>
              </form>
            </li>
          </ul>
        </div>
      </nav>
  </div>
</header>

Navigatie met logo bovenaan

Visueel voorbeeld

HTML-voorbeeld

<header>
  <a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>

  <a href="/" class="logo">
    <img src="/img/logo.svg" alt="Placeholder logo">Manon
  </a>

  <nav
    data-open-label="Menu"
    data-close-label="Sluit menu"
    data-media="(min-width: 30rem)"
    aria-label="Hoofdnavigatie"
    class="collapsible"
  >
    <div class="collapsing-element">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/components">Componenten</a></li>
        <li><a href="/documentation">Documentatie</a></li>
      </ul>

      <ul>
        <li><a href="/logout">Logout</a></li>
      </ul>
    </div>
  </nav>
</header>

Bijbehorende bestanden

Voeg de (s)css-bestanden toe aan het project of importeer de bestanden. Hiervoor kunnen de bestanden gebruikt worden uit beschikbare Manon-thema's. Of uit zelf gemaakte thema's.

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

Importeer component via npm

CSS-voorbeeld

@use "@minvws/manon/header-navigation";