Garis Bawah Tab Pemosisian Anchor

Dalam menu tab, Anda harus memberikan petunjuk visual kepada pengguna tentang halaman yang sedang mereka buka. Salah satu opsinya adalah dengan menggarisbawahi tab. Dengan pemosisian anchor, Anda dapat membuat animasi yang mulus di antara posisi garis bawah. Hal ini tidak berfungsi jika mengubah tab aktif akan memuat halaman web baru.

Anda juga dapat menggunakan efek ini untuk menambahkan titik animasi guna menunjukkan tab aktif di bilah tab vertikal.

Buat garis bawah menggunakan elemen semu ::before pada <ul> yang berisi elemen <li>. Menggunakan elemen semu adalah pendekatan yang lebih disukai karena menjaga DOM tetap bersih dan menghindari penambahan elemen tambahan untuk efek dekoratif murni.

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

Jadikan item daftar aktif sebagai anchor dengan menambahkan properti anchor-name, yang memiliki nilai yang diawali dengan --.

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

Tautkan garis bawah ke anchor item aktif dengan position-anchor yang cocok dengan anchor-name pada anchor, dan jadikan position: absolute.

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

Posisikan garis bawah relatif terhadap anchor menggunakan properti inset dan fungsi 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);
}

Tambahkan tinggi dan gaya visual lainnya.

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

Terakhir, tambahkan transisi pada properti 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;
  }
}

Ini hanyalah indikator visual, dan tidak boleh menjadi pengganti untuk menetapkan nilai aria aria-current="page" atau aria-selected yang sesuai.

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

Strategi penggantian

Jika pemosisian anchor tidak didukung di browser, gunakan border-bottom untuk menambahkan garis bawah. Gambar tidak akan dianimasikan.

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