Systèmes de navigation

Tous les extraits de code présentés ici s'implémente dans une zone HTML 5 de type nav.

Lien d'accès rapide

Un lien d'accès rapide permet d'accéder rapidement à une zone de contenu de la page ou de sauter une zone dans la page.

  • HTML
  • CSS

Menu déroulant horizontal

Extrait de code pour un menu déroulant, horizontal et adaptatif avec bouton dit « hamburger ».

  • HTML
  • CSS
  • JS

Menu multi-déroulant horizontal

Extrait de code pour un menu déroulant, horizontal et adaptatif avec bouton dit « hamburger ».

  • HTML
  • CSS
  • JS

Menu type « menubar »

Extrait de code pour un menu déroulant horizontal utilisant les rôles aria 'menubar', 'menu' et 'menuitem'.

  • HTML
  • CSS
  • JS

Menu latéral glissant

Extrait de code pour un menu latéral qui s'ouvre et se ferme avec un focus clavier accessible.

  • HTML
  • CSS
  • JS

Menu latéral glissant avec icônes

Extrait de code pour un menu latéral qui s'ouvre et se ferme avec un focus clavier accessible. Le menu sous sa forme résuite présente des icônes et leur signification dans une info-bulle.

  • HTML
  • CSS
  • JS

Fil d'ariane

Un fil d'ariane est un système de navigation qui fournit une aide visuelle pour indiquer à l'utilisateur où il se trouve dans la hiérarchie du site.

  • HTML
  • CSS

Pagination

La pagination est un système de navigation où l'utilisateur peut passer d'une page à une autre pour un ensemble donné via les numéros de ces pages (généralement affichés en bas de page).

  • HTML
  • CSS