HTML + CSSFiltros

Control segmentado vertical

Opciones apiladas para barras laterales de escritorio, con un indicador que sube y baja hasta la activa.

Ajustes

16px
1x

Código

<div class="uv-fsv"><span class="p"></span><button class="on">Resumen</button><button>Diseño</button><button>Código</button><button>Ajustes</button></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.

Más en Filtros

Dónde usarlo

Piensa en la página de ajustes de una app web: Resumen, Facturación, Equipo y Avisos apilados a la izquierda y el contenido cambia a la derecha. El bloque que se desliza indica dónde estás sin un menú pesado. Vale también para una documentación o el área de cliente de una tienda. Mucha gente lo busca como pestañas verticales en CSS.

No pases de cinco o seis opciones y dale un ancho fijo, para que el indicador no baile cuando los textos miden distinto. En el móvil una lista vertical ocupa mucho; ahí cámbialo por chips en horizontal o un desplegable.