TableOfContents
Bouwt automatisch een klikbare inhoudsopgave uit de koppen op de pagina.
Scant de koppen op de pagina en bouwt daar een meelezende, klikbare inhoudsopgave van — ideaal voor lange artikelen.
Toepassingen per site-type
Bij een webshop is dit block minder gangbaar, maar wel bruikbaar op een uitgebreide koopgids of maattabel-pagina met meerdere onderdelen. Een portfolio-site gebruikt het zelden, omdat projectpagina's meestal kort genoeg zijn. Bij een zakelijke dienstverlener met een kennisbank, zoals deze site, is TableOfContents juist standaard: elk artikel met meerdere tussenkoppen krijgt er automatisch baat bij, zonder dat je de inhoudsopgave handmatig hoeft te onderhouden bij elke wijziging in de tekst.
Een veelgemaakte fout is dit block toevoegen aan een pagina met maar één of twee tussenkoppen: dan voegt de inhoudsopgave weinig toe en neemt hij onnodig ruimte in. Gebruik de min-prop om in te stellen vanaf hoeveel koppen de inhoudsopgave pas verschijnt. Een tweede valkuil is koppen op de pagina inconsequent gebruiken, bijvoorbeeld een h3 die eigenlijk een h2 had moeten zijn: omdat TableOfContents de koppenstructuur letterlijk overneemt, wordt een slordige koppenhiërarchie in de pagina ook zichtbaar in de inhoudsopgave.
Dit block werkt automatisch samen met RichText-content: zolang de tekst nette h2- en h3-koppen bevat, herkent TableOfContents ze zonder extra configuratie. Zet het bovenaan een lang artikel, eventueel naast de RecordNav onderaan, zodat de bezoeker zowel binnen de pagina als naar het volgende artikel kan navigeren.
Voor toegankelijkheid is het belangrijk dat de links in de inhoudsopgave naar het juiste kopje springen zonder de focus kwijt te raken, en dat de actieve sectie ook zonder kleur te onderscheiden is, bijvoorbeeld met een dikkere letter of een streepje ervoor.
Gebruik dit block bij lange artikelen of documentatiepagina's met meerdere tussenkoppen: een uitgebreide handleiding, een uitgebreid mogelijkheid-overzicht of een lang nieuwsbericht. Bezoekers zien in één oogopslag de opbouw van de pagina en springen direct naar het onderdeel dat ze zoeken.
Omdat de inhoudsopgave meeleest tijdens het scrollen, blijft ook duidelijk welk onderdeel actief is. Dat verbetert de leesbaarheid van lange pagina's, wat ook bijdraagt aan SEO: bezoekers blijven langer en vinden sneller wat ze zoeken.