Navigation — Peels

Navigation #

Navigation de base — nav avec menu, ol ou ul. Le socle commun à toutes les navigations.

<nav aria-label="Main">
  <menu>
    <li><a href="#" aria-current="page">Home</a></li>
    <li><a href="#">Docs</a></li>
    <li><a href="#">Components</a></li>
    <li><a href="#">Themes</a></li>
  </menu>
</nav>

<nav aria-label="Main">
  <a href="/" rel="home"><strong>Peels</strong></a>
  <menu>
    <li><a href="#">GitHub</a></li>
    <li><a href="#">Themes</a></li>
  </menu>
</nav>

<hr />

<nav aria-label="Main">
  <menu>
    <li><a href="#" aria-current="page">Home</a></li>
    <li><a href="#">Docs</a></li>
  </menu>
  <menu>
    <li><a href="#">GitHub</a></li>
    <li><a href="#">Themes</a></li>
  </menu>
</nav>

<hr />

<nav aria-label="Main">
  <menu>
    <li><a href="#" aria-current="page">Home</a></li>
    <li><a href="#">Docs</a></li>
  </menu>
  <a href="/" rel="home"><strong>Peels</strong></a>
  <menu>
    <li><a href="#">GitHub</a></li>
    <li><a href="#">Themes</a></li>
  </menu>
</nav>

<nav aria-label="Main" data-overflow>
  <a href="/" rel="home"><strong>Peels</strong></a>
  <menu>
    <li><a href="#" aria-current="page">Home</a></li>
    <li><a href="#">Docs</a></li>
    <li><a href="#">Components</a></li>
    <li><a href="#">Themes</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li>
      <button
        type="button"
        popovertarget="nav-overflow-1"
        aria-label="Show the full menu"
      >
        •••
      </button>
      <span id="nav-overflow-1" popover></span>
    </li>
  </menu>
</nav>

En-tête #

En-tête de site — brand + nav responsive avec popover API (pure CSS, pas de JS)

Peels

<header>
  <a href="/"><strong>Peels</strong></a>
  <button popovertarget="site-menu" popovertargetaction="show" type="button"
          aria-label="Ouvrir la navigation" aria-controls="site-menu">
    <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
      <path d="m10 14h28s7.4-0.2 7.4 18c0 5.4-1.7 7.2-4.5 7.2-2.7 0-4.9-3.2-4.9-3.2l-24-24"></path>
      <path d="m10 24h28"></path>
      <path d="m10 34h28s7.4 0.2 7.4-18c0-5.4-1.7-7.2-4.5-7.2-2.7 0-4.9 3.2-4.9 3.2l-24 24"></path>
    </svg>
  </button>
  <nav id="site-menu" popover="auto" aria-label="Main">
    <button popovertarget="site-menu" popovertargetaction="hide" type="button"
            aria-label="Fermer la navigation" aria-controls="site-menu">
      <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
        <path d="m12 12l24 24"></path>
        <path d="m36 12l-24 24"></path>
      </svg>
    </button>
    <menu>
      <li><a href="#" aria-current="page">Home</a></li>
      <li><a href="#">Docs</a></li>
      <li><a href="#">Components</a></li>
      <li><a href="#">Themes</a></li>
    </menu>
  </nav>
</header>

Peels

<header>
  <a href="/"><strong>Peels</strong></a>
  <button popovertarget="site-menu-2" popovertargetaction="show" type="button"
          aria-label="Ouvrir la navigation" aria-controls="site-menu-2">
    <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
      <path d="m10 14h28s7.4-0.2 7.4 18c0 5.4-1.7 7.2-4.5 7.2-2.7 0-4.9-3.2-4.9-3.2l-24-24"></path>
      <path d="m10 24h28"></path>
      <path d="m10 34h28s7.4 0.2 7.4-18c0-5.4-1.7-7.2-4.5-7.2-2.7 0-4.9 3.2-4.9 3.2l-24 24"></path>
    </svg>
  </button>
  <nav id="site-menu-2" popover="auto" aria-label="Main">
    <button popovertarget="site-menu-2" popovertargetaction="hide" type="button"
            aria-label="Fermer la navigation" aria-controls="site-menu-2">
      <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
        <path d="m12 12l24 24"></path>
        <path d="m36 12l-24 24"></path>
      </svg>
    </button>
    <menu>
      <li><a href="#" aria-current="page">Home</a></li>
      <li><a href="#">Docs</a></li>
      <li><a href="#">Components</a></li>
      <li><a href="#">Themes</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </menu>
  </nav>
</header>

Fil d'Ariane #

Fil d'Ariane — nav > ol avec séparateur, aria-current sur la page active

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/docs/">Docs</a></li>
    <li><a href="/docs/components/">Components</a></li>
    <li aria-current="page">Button</li>
  </ol>
</nav>

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/docs/">Documentation</a></li>
    <li><a href="/docs/components/">Components</a></li>
    <li><a href="/docs/components/navigation/">Navigation</a></li>
    <li><a href="/docs/components/navigation/breadcrumb/">Breadcrumb</a></li>
    <li aria-current="page">Responsive</li>
  </ol>
</nav>

Pagination #

Navigation entre pages — numérotée ou prev/next avec titres

<nav aria-label="Pagination">
  <ul>
    <li><a href="#" rel="prev" aria-label="Page précédente"></a></li>
    <li><a href="#">1</a></li>
    <li><a href="#" aria-current="page">2</a></li>
    <li><a href="#">3</a></li>
    <li><span aria-hidden="true">…</span></li>
    <li><a href="#">8</a></li>
    <li><a href="#" rel="next" aria-label="Page suivante"></a></li>
  </ul>
</nav>

<nav aria-label="Pagination">
  <ul>
    <li><a role="link" rel="prev" aria-label="Page précédente" aria-disabled="true"></a></li>
    <li><a href="#" aria-current="page">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#" rel="next" aria-label="Page suivante"></a></li>
  </ul>
</nav>

<nav aria-label="Pagination">
  <a rel="prev" href="#">
    <span>← Précédent</span>
    <span>Sans thème</span>
  </a>
  <a rel="next" href="#">
    <span>Suivant →</span>
    <span>Contribuer</span>
  </a>
</nav>

Onglets #

Navigation par onglets accessible — [role="tablist"], [role="tab"], [role="tabpanel"]

Contenu de l’onglet Aperçu.

/* CSS ici */

<div>
  <div role="tablist" aria-label="Sections">
    <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Aperçu</button>
    <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2" tabindex="-1">Code</button>
    <button role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3" tabindex="-1">Notes</button>
  </div>

  <div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
    <p>Contenu de l’onglet Aperçu.</p>
  </div>
  <div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
    <pre><code>/* CSS ici */</code></pre>
  </div>
  <div role="tabpanel" id="panel-3" aria-labelledby="tab-3" hidden>
    <p>Notes et considérations d’accessibilité.</p>
  </div>
</div>

Menu déroulant #

Liste de liens ou d'actions qui s'ouvre sous un bouton — button[popovertarget] + menu[popover]

<button type="button" popovertarget="dropdown-account">Compte</button>
<menu id="dropdown-account" popover>
  <li><a href="#">Profil</a></li>
  <li><a href="#">Paramètres</a></li>
  <li><a href="#">Déconnexion</a></li>
</menu>

Navigation latérale #

Navigation latérale — aside > nav, liste verticale avec liens et état actif

<aside>
  <nav>
    <menu>
      <li><a href="#" aria-current="page">Overview</a></li>
      <li><a href="#">Getting started</a></li>
      <li><a href="#">Themes</a></li>
      <li><a href="#">Variables</a></li>
      <li><a href="#">Components</a></li>
    </menu>
  </nav>
</aside>

<aside>
  <nav>
    <menu>
      <li><strong>Section</strong></li>
      <li><a href="#" aria-current="page">Overview</a></li>
      <li><a href="#">Getting started</a></li>
    </menu>
    <menu>
      <li><strong>Reference</strong></li>
      <li><a href="#">Variables</a></li>
      <li><a href="#">Tokens</a></li>
    </menu>
  </nav>
</aside>

Barre latérale #

Conteneur latéral réutilisable — aside avec variables de personnalisation. Le layout (grid, colonnes, sticky, scroll) est à la charge du consommateur.

<aside data-sidebar>
  <nav>
    <menu>
      <li><a href="#" aria-current="page">Accueil</a></li>
      <li><a href="#">Profil</a></li>
      <li><a href="#">Paramètres</a></li>
    </menu>
  </nav>
</aside>

Arborescence #

Navigation hiérarchique repliable — catégories avec sous-liens, basée sur details + sidenav

<aside>
<nav aria-label="Documentation">
  <a class="tree-nav-home" href="#">Accueil</a>

  <div class="tree-nav-item" data-open>
    <a class="tree-nav-cat" href="#content">Contenu</a>
    <details open>
      <summary aria-label="Déplier Contenu"></summary>
      <menu>
        <li><a href="#text" aria-current="true">Texte</a></li>
        <li><a href="#headings">Titres</a></li>
        <li><a href="#list">Listes</a></li>
        <li><a href="#table">Tableaux</a></li>
      </menu>
    </details>
  </div>

  <div class="tree-nav-item">
    <a class="tree-nav-cat" href="#forms">Formulaires</a>
    <details>
      <summary aria-label="Déplier Formulaires"></summary>
      <menu>
        <li><a href="#input">Input</a></li>
        <li><a href="#select">Select</a></li>
        <li><a href="#checkbox">Checkbox</a></li>
      </menu>
    </details>
  </div>

  <a class="tree-nav-foot" href="#">Démos</a>
</nav>
</aside>