Introducción

Esta guía explica cómo instalar el paquete y dejarlo listo en cinco minutos. No hace falta experiencia previa.

Instalación

Necesitas Node 20 o superior y un gestor de paquetes. Elige el que ya uses en tu proyecto.

Con npm

npm install lumen

Con pnpm

pnpm add lumen

Uso

Importa el componente y pásale tus datos. Funciona igual en el servidor y en el navegador.

Opciones

Todas las opciones tienen un valor por defecto razonable. Cambia solo las que necesites.

Preguntas

Si algo falla, revisa la versión de Node antes que nada. Después, borra la caché y prueba otra vez.

HTML + CSSNavegación

Índice de página con raíl que sigue la lectura

Un índice lateral cuyo raíl se dobla con la sangría de cada apartado y se ilumina en los que estás leyendo al desplazarte.

Ajustes

16px
1x

Código

<div class="uvq12-sr"><div class="sc" tabindex="0" aria-label="Documentación"><section id="uvq12-sr-s0"><h4>Introducción</h4><p>Esta guía explica cómo instalar el paquete y dejarlo listo en cinco minutos. No hace falta experiencia previa.</p></section><section id="uvq12-sr-s1"><h4>Instalación</h4><p>Necesitas Node 20 o superior y un gestor de paquetes. Elige el que ya uses en tu proyecto.</p></section><section id="uvq12-sr-s2"><h5>Con npm</h5><p><code>npm install lumen</code></p></section><section id="uvq12-sr-s3"><h5>Con pnpm</h5><p><code>pnpm add lumen</code></p></section><section id="uvq12-sr-s4"><h4>Uso</h4><p>Importa el componente y pásale tus datos. Funciona igual en el servidor y en el navegador.</p></section><section id="uvq12-sr-s5"><h5>Opciones</h5><p>Todas las opciones tienen un valor por defecto razonable. Cambia solo las que necesites.</p></section><section id="uvq12-sr-s6"><h4>Preguntas</h4><p>Si algo falla, revisa la versión de Node antes que nada. Después, borra la caché y prueba otra vez.</p></section></div><nav class="tc" aria-label="En esta página"><p>En esta página</p><div class="rl"><svg aria-hidden="true"><path class="b"/><path class="h"/></svg><ul><li class="l0"><a href="#uvq12-sr-s0">Introducción</a></li><li class="l0"><a href="#uvq12-sr-s1">Instalación</a></li><li class="l1"><a href="#uvq12-sr-s2">Con npm</a></li><li class="l1"><a href="#uvq12-sr-s3">Con pnpm</a></li><li class="l0"><a href="#uvq12-sr-s4">Uso</a></li><li class="l1"><a href="#uvq12-sr-s5">Opciones</a></li><li class="l0"><a href="#uvq12-sr-s6">Preguntas</a></li></ul></div></nav></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Navegación

Ver todos: Navegación

Dónde usarlo

Un índice para páginas de documentación: el raíl de su izquierda se desplaza hacia dentro en los subapartados e ilumina el tramo que coincide con las secciones que tienes en pantalla. Al desplazar el artículo el resaltado crece, encoge y se mueve, y al pulsar una entrada se llega a ella con suavidad. Un script corto dibuja el trazado a partir de las posiciones reales de los enlaces.

El color principal marca el resaltado y los enlaces activos. Añade o quita secciones y niveles en los datos, y usa títulos cortos para que cada entrada ocupe una o dos líneas.