Vibeset

Menú de ramas

Grupos que se abren y dentro sus opciones, unidas al grupo por unas ramas que se trazan al abrir y se retiran al cerrar: lo que dice que esas opciones cuelgan de ese grupo y de ningún otro. No es un árbol ARIA: ese rol promete al lector una navegación con flechas que hay que programar entera, y un nav con listas y botones con aria-expanded se maneja con el tabulador, que ya saben todos. Si una opción trae href es un enlace de verdad, porque un onClick a secas deja a un buscador sin llegar a ella. Lo plegado lleva inert para que el foco no se pierda dentro de algo que no se ve. Y cada rama la dibuja la opción a la que une, así que añadir o quitar opciones no obliga a tocar nada más.

Y el original de React Bits: Branched Menu

Esta pieza está escrita desde cero en Vibeset: no se ha copiado ni portado nada de React Bits. Hace algo parecido a su Branched Menu, y esto es lo que vimos del suyo por si prefieres usar el original.

Cuándo sí

Para la navegación de unas docs o de un árbol de archivos, con dos niveles. Con muchos más niveles deja de leerse bien.

Ojo con

Es solo un menú: la ruta y el enlace de cada opción los pones tú. Si cada opción es una página, usa enlaces reales y no solo onSelect, o un buscador no llega a ellas.

Accesibilidad

Seis señales aria, teclado y movimiento reducido.