Soulignement de l'onglet de positionnement de l'ancre

Dans un menu à onglets, vous devez fournir aux utilisateurs des indications visuelles sur la page sur laquelle ils se trouvent. Une option consiste à souligner l'onglet. Le positionnement d'ancrage vous permet de créer une animation fluide entre les positions du soulignement. Cela ne fonctionne pas lorsque le changement d'onglet actif charge une nouvelle page Web.

Vous pouvez également utiliser cet effet pour ajouter un point animé indiquant l'onglet actif dans une barre d'onglets verticale.

Créez le soulignement à l'aide d'un pseudo-élément ::before sur l'élément <ul> qui contient les éléments <li>. L'utilisation d'un pseudo-élément est l'approche privilégiée, car elle permet de garder le DOM propre et d'éviter d'ajouter des éléments supplémentaires pour des effets purement décoratifs.

ul::before {
  /* Use a pseudo-element on the container to represent the animated indicator */
  content: '';
}

Faites de l'élément de liste actif une ancre en ajoutant la propriété anchor-name, dont la valeur commence par --.

li.active {
  /* Make a unique anchor-name for the active element. */
  anchor-name: --active;
}

Associez le soulignement à l'ancrage de l'élément actif avec un position-anchor qui correspond à l'anchor-name sur l'ancrage, et définissez-le sur position: absolute.

ul::before {
  /* Tether the underline to the active element. */
  position: absolute;
  position-anchor: --active;
}

Positionnez le soulignement par rapport à l'ancrage à l'aide des propriétés d'encart et des fonctions anchor().

ul::before {
  /* DO NOT use position-area, which can not be transitioned. */
  /* Use calc() to offset the top slightly */
  inset-block-start: calc(anchor(bottom) + .1lh);
  inset-inline-start: anchor(left);
  inset-inline-end: anchor(right);
}

Ajoutez une hauteur et d'autres styles visuels.

ul::before {
  /* Apply your project's styles for the indicator */
  block-size: .25lh;
  background: red;
}

Enfin, ajoutez une transition sur les propriétés inset.

ul::before {
  @media (prefers-reduced-motion: no-preference) {
    /* MANDATORY: The transition must be wrapped in a prefers-reduced-motion media query to respect user preferences. */
    transition: inset .2s;
  }
}

Il s'agit uniquement d'un indicateur visuel, qui ne doit pas remplacer la définition des valeurs aria aria-current="page" ou aria-selected appropriées.

<!-- MANDATORY: Provide explicit assistive technology state alongside the visual tab underline -->
<nav aria-label="Primary">
  <ul>
    <li class="active">
      <a href="/home" aria-current="page">Home</a>
    </li>
    <li>
      <a href="/about">About</a>
    </li>
  </ul>
</nav>

Stratégies de remplacement

Si le positionnement de l'ancrage n'est pas compatible avec le navigateur, utilisez un border-bottom pour ajouter un soulignement. Il ne sera pas animé.

ul li.active {
  @supports not (position-anchor: auto) {
    /* Choose a color appropriate to the app theme. */
    border-bottom: .25lh var(--primary) solid;
  }
}