HTML + CSSFiltros

Menú de ordenación con flecha

Elige por qué ordenar y toca la flecha para cambiar entre ascendente y descendente.

Ajustes

16px
1x

Código

<div class="uv-fso"><button class="tg"><i class="ar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M6 13l6 6 6-6"/></svg></i><b>Más recientes</b></button><div class="mn"><button style="--i:0">Más recientes</button><button style="--i:1">Precio</button><button style="--i:2">Valoración</button><button style="--i:3">Nombre</button></div></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

Todo catálogo necesita uno. Imagina una tienda de vinos donde el cliente ordena por precio, valoración o novedades y gira la flecha para ver primero las botellas más baratas o más caras. Separar el «qué» del «en qué sentido» mantiene corta la lista de opciones. Si buscas un menú de ordenar por para tu tienda, lo tienes aquí.

Deja claro el criterio actual, por ejemplo «Precio» con la flecha al lado, para que se sepa cómo está ordenada la lista. Colócalo justo encima de la rejilla de productos, junto al número de resultados, que es donde ya está mirando la gente.