Onderstreping van tabblad voor ankerpositionering

In een tabbladmenu moet je gebruikers visuele hints geven over de pagina waarop ze zich bevinden. Je kunt het tabblad bijvoorbeeld onderstrepen. Met ankerpositionering kun je een vloeiende animatie maken tussen de posities van de onderstreping. Dit werkt niet als er een nieuwe webpagina wordt geladen wanneer je het actieve tabblad wijzigt.

Je kunt dit effect ook gebruiken om een bewegende stip toe te voegen die het actieve tabblad in een verticale tabbladbalk aangeeft.

Maak de onderstreping met een ::before-pseudoelement op de <ul> die de <li>-elementen bevat. Het gebruik van een pseudo-element heeft de voorkeur, omdat het de DOM schoon houdt en voorkomt dat er extra elementen worden toegevoegd voor puur decoratieve effecten.

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

Maak van het actieve lijstitem een anker door de eigenschap anchor-name toe te voegen, die een waarde heeft die begint met --.

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

Koppel de onderstreping aan het anker van het actieve item met een position-anchor die overeenkomt met de anchor-name op het anker en maak deze position: absolute.

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

Positioneer de onderstreping ten opzichte van het anker met de inset-eigenschappen en anchor()-functies.

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);
}

Voeg een hoogte en andere visuele stijlen toe.

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

Voeg tot slot een overgang toe aan de inset-property's.

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;
  }
}

Dit is alleen een visuele indicator en mag niet worden gebruikt als vervanging voor het instellen van de juiste aria-waarden voor aria-current="page" of aria-selected.

<!-- 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>

Reservestrategieën

Als ankerpositionering niet wordt ondersteund in de browser, gebruik je een border-bottom om een onderstreping toe te voegen. Het wordt niet geanimeerd.

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