System
Menu

Componenten / Uitgebreid / Navigatie

Paginering

Door lijsten bladeren met vorige/volgende en paginanummers.

UitgebreidNavigatie1 instellingenpagination

Voorbeeld

Instellingen

Laden…

<nav class="gx-pages" aria-label="Paginering">
  <a class="gx-btn gx-btn--ghost gx-btn--sm" href="#" rel="prev">
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M15 6l-6 6 6 6"/>
    </svg>
    <span>Vorige</span>
  </a>
  <ol>
    <li>
      <a href="#">1</a>
    </li>
    <li>
      <a href="#" aria-current="page">2</a>
    </li>
    <li>
      <a href="#">3</a>
    </li>
    <li>
      <a href="#">4</a>
    </li>
    <li aria-hidden="true">…</li>
    <li>
      <a href="#">12</a>
    </li>
  </ol>
  <a class="gx-btn gx-btn--ghost gx-btn--sm" href="#" rel="next">
    <span>Volgende</span>
    <svg class="gx-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <path d="M9 6l6 6-6 6"/>
    </svg>
  </a>
</nav>

Instellingen

Alles wat je kunt variëren. Ook als query in de URL en als options in de MCP-tool get_component.

SleutelInstellingWaardenStandaard
styleStijlnumbers simplenumbers

Richtlijnen

Toegankelijkheid

  • Huidige pagina met aria-current=page.

Wel

  • Echte links zodat elke pagina een URL heeft.

Niet

  • Oneindig scrollen zonder alternatief.

Verwant

Header en navigatieLockup links, menu en actie rechts. Mobiel een uitklapmenu met details/summary: werkt zonder JavaScript.
KruimelpadWaar ben ik: pad naar de huidige pagina.
FooterAfsluiting met lockup, contact en links. Eenvoudig (één regel, zoals World) of in kolommen.
Hoek-chromeVaste labels in de vier hoeken (World/Portfolea): woordmerk + rol, menu, status met stip en een rollende teller.