Contactos

A
  • Ana Ruiz
  • Alberto Gil
B
  • Bea Soto
C
  • Carla Vidal
  • Carlos Mena
D
  • Diego Paz
E
  • Elena Ortiz
G
  • Gabriel Ros
I
  • Irene Sanz
J
  • Javier León
L
  • Laura Peña
  • Lucía Martín
M
  • Mario Gómez
  • Marta Cano
N
  • Nuria Vega
P
  • Pablo Rey
R
  • Raúl Díaz
  • Rosa Gil
S
  • Sara Molina
T
  • Tomás Rivas
V
  • Vera Luna
ABCDEFGHIJKLMNOPQRSTUVWXYZ
HTML + CSSNavigation

Scrubbable A to Z index

A contact list with an A to Z rail: slide your finger along the letters and a bubble shows where you will jump.

Settings

16px
1x

Code

<div class="uvq12-az"><p class="tt">Contacts</p><div class="bx"><div class="ls" tabindex="0" aria-label="Contacts"><section data-l="A"><h5>A</h5><ul><li><i style="--h:#e11d48" aria-hidden="true">AR</i>Ana Ruiz</li><li><i style="--h:#eab308" aria-hidden="true">AG</i>Alberto Gil</li></ul></section><section data-l="B"><h5>B</h5><ul><li><i style="--h:#0ea5e9" aria-hidden="true">BS</i>Bea Soto</li></ul></section><section data-l="C"><h5>C</h5><ul><li><i style="--h:#f97316" aria-hidden="true">CV</i>Carla Vidal</li><li><i style="--h:#f97316" aria-hidden="true">CM</i>Carlos Mena</li></ul></section><section data-l="D"><h5>D</h5><ul><li><i style="--h:#f97316" aria-hidden="true">DP</i>Diego Paz</li></ul></section><section data-l="E"><h5>E</h5><ul><li><i style="--h:#eab308" aria-hidden="true">EO</i>Elena Ortiz</li></ul></section><section data-l="G"><h5>G</h5><ul><li><i style="--h:#f97316" aria-hidden="true">GR</i>Gabriel Ros</li></ul></section><section data-l="I"><h5>I</h5><ul><li><i style="--h:#e11d48" aria-hidden="true">IS</i>Irene Sanz</li></ul></section><section data-l="J"><h5>J</h5><ul><li><i style="--h:#f97316" aria-hidden="true">JL</i>Javier León</li></ul></section><section data-l="L"><h5>L</h5><ul><li><i style="--h:#eab308" aria-hidden="true">LP</i>Laura Peña</li><li><i style="--h:#a855f7" aria-hidden="true">LM</i>Lucía Martín</li></ul></section><section data-l="M"><h5>M</h5><ul><li><i style="--h:#f97316" aria-hidden="true">MG</i>Mario Gómez</li><li><i style="--h:#eab308" aria-hidden="true">MC</i>Marta Cano</li></ul></section><section data-l="N"><h5>N</h5><ul><li><i style="--h:#0ea5e9" aria-hidden="true">NV</i>Nuria Vega</li></ul></section><section data-l="P"><h5>P</h5><ul><li><i style="--h:#e11d48" aria-hidden="true">PR</i>Pablo Rey</li></ul></section><section data-l="R"><h5>R</h5><ul><li><i style="--h:#e11d48" aria-hidden="true">RD</i>Raúl Díaz</li><li><i style="--h:#eab308" aria-hidden="true">RG</i>Rosa Gil</li></ul></section><section data-l="S"><h5>S</h5><ul><li><i style="--h:#f97316" aria-hidden="true">SM</i>Sara Molina</li></ul></section><section data-l="T"><h5>T</h5><ul><li><i style="--h:#22c55e" aria-hidden="true">TR</i>Tomás Rivas</li></ul></section><section data-l="V"><h5>V</h5><ul><li><i style="--h:#22c55e" aria-hidden="true">VL</i>Vera Luna</li></ul></section></div><div class="rl" role="slider" tabindex="0" aria-label="Contents" aria-valuemin="0" aria-valuemax="25" aria-valuenow="0" aria-valuetext="A"><span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span class="no">F</span><span>G</span><span class="no">H</span><span>I</span><span>J</span><span class="no">K</span><span>L</span><span>M</span><span>N</span><span class="no">O</span><span>P</span><span class="no">Q</span><span>R</span><span>S</span><span>T</span><span class="no">U</span><span>V</span><span class="no">W</span><span class="no">X</span><span class="no">Y</span><span class="no">Z</span><b class="bb" aria-hidden="true"><span>A</span></b></div></div></div>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

Markdown version with all the code, for AI assistants

More in Navigation

See all Navigation

Where to use it

The alphabet index from phone contact lists: a rail of letters runs down the side, and sliding a finger or the mouse along it jumps the list to that letter while a teardrop bubble shows the letter next to your finger. Letters with no entries are dimmed, headers stick to the top while you scroll, and the rail works as a slider from the keyboard.

The main color sets the letters and bubble, the secondary color the sticky headers. Sort your data alphabetically, and the empty letters are worked out from it.