Aller au contenu

Composant · Navigation

TableOfContents

Documenté

TableOfContents affiche une table d’ancres structurée avec niveaux hiérarchiques. Idéal pour guider la navigation verticale des longues pages.

Présentation

Présentation

Voir le code (Svelte) 
<TableOfContents
  items={[{"id":"intro","label":"Intro","level":1},{"id":"usage","label":"Utilisation","level":1},{"id":"nested","label":"Niveau 2","level":2},{"id":"api","label":"API","level":1},{"id":"acc","label":"Accessibilité","level":1}]}
  title="Sur cette page"
  activeId="intro"
/>

Cas d’usage

Cas d’usage

Voir le code (Svelte) 
<TableOfContents
  items={[{"id":"intro","label":"Intro","level":1},{"id":"usage","label":"Utilisation","level":1},{"id":"nested","label":"Niveau 2","level":2},{"id":"api","label":"API","level":1},{"id":"acc","label":"Accessibilité","level":1}]}
  title="Sommaire"
  activeId="usage"
/>

L’identifiant actif est purement déclaratif (via activeId) dans cette version. Les ancres sont générées avec href="#<id>".

Hiérarchie

Sommaire hiérarchique

Voir le code (Svelte) 
<TableOfContents
  items={[{"id":"intro","label":"Intro","level":1},{"id":"usage","label":"Utilisation","level":1},{"id":"nested","label":"Niveau secondaire","level":2},{"id":"api-3","label":"Niveau tertiaire","level":3},{"id":"api","label":"API","level":1}]}
  title="Sommaire hiérarchique"
  activeId="intro"
/>

Les niveaux inférieurs gagnent une indentation visuelle.

API

PropTypeDéfautEffet
itemsTableOfContentsItem[]obligatoirePivots du sommaire
activeIdstringobligatoireItem actif visuel via aria-current
titlestring""Intitulé optionnel du bloc

Accessibilité

  • Le conteneur expose un nav avec aria-label explicite.
  • Chaque entrée est un lien classique avec href=#id.
  • Le repère actif porte aria-current="location".

Type

Export Svelte: TableOfContentsItem contient id, label, et level? (1 = racine, 2/3 = indentations).