Tabs, breadcrumbs y más

Además de la barra principal, un sitio usa otros tipos de navegación: pestañas para cambiar de contenido sin recargar, migas de pan para saber dónde estás, paginación para listados largos y menús radiales para acciones rápidas. Todos están listos para copiar.

Cómo usar esta página

Cada demo incluye pestañas HTML / CSS / JS, botón Copiar y enlace al Playground. Personaliza los colores desde las variables de :root.

Tabs (pestañas)

Cuándo usarlo: para mostrar contenido relacionado en un espacio reducido: detalles de un producto (descripción, especificaciones, opiniones), ajustes de una cuenta o planes de precios. No las uses si el usuario necesita comparar el contenido de varias pestañas a la vez.

Tabs accesibles

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• --color-primario colorea la pestaña activa y su línea inferior; --radio el redondeo del contenedor.
• Para añadir una pestaña: un <button role="tab"> nuevo con aria-controls apuntando a un <div role="tabpanel" hidden> con el mismo id.
• Usa las flechas ← →, Inicio y Fin para moverte: sigue el patrón oficial de WAI-ARIA, donde sólo la pestaña activa está en el orden de Tab (tabindex="0").
• ¿Prefieres pestañas tipo "segmento" (fondo relleno)?

[role="tab"][aria-selected="true"] { background: var(--color-primario); color: #fff; }
[role="tab"]::after { display: none; }

Breadcrumbs (migas de pan)

Cuándo usarlo: en sitios con jerarquía profunda (tiendas, documentación, blogs con categorías). Le dicen al usuario dónde está y le permiten subir de nivel con un clic. Además, Google las usa para mostrar la ruta en los resultados de búsqueda.

Breadcrumbs en 4 estilos

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• En el estilo clásico, cambia el separador con la variable --separador (por ejemplo "›", "→" o "•").
• El estilo con chevrons usa una máscara SVG, así que el icono toma el color de --color-suave automáticamente.
• El estilo de flechas es ideal para pasos de un proceso (checkout); se dibuja con clip-path.
• Marca siempre la página actual con aria-current="page" y envuelve todo en un <nav aria-label="..."> con una lista ordenada <ol>.

:root { --separador: "›"; }

Paginación

Cuándo usarlo: en listados largos (productos, artículos, resultados de búsqueda, tablas de un dashboard) cuando quieres que el usuario pueda saltar a una página concreta. Si el contenido es un "feed" casual, considera mejor un botón de "Cargar más".

Paginación funcional

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• Cambia TOTAL por el número real de páginas (normalmente lo calcula tu backend: Math.ceil(totalElementos / porPagina)).
• La función rango() decide qué números mostrar y dónde poner los puntos suspensivos; así nunca hay demasiados botones.
• Sustituye el bloque que pinta .contenido por un fetch a tu API con ?page=${actual}.
• --tam controla el tamaño de los botones; en móvil se reduce y se ocultan los textos "Anterior/Siguiente".

/* Paginación redonda */
.paginacion button { border-radius: 50%; }

Menú radial (circular)

Cuándo usarlo: como botón de acción flotante (FAB) en apps móviles, juegos, herramientas creativas o portafolios llamativos. Es vistoso, pero úsalo sólo para 4–8 acciones rápidas, nunca como navegación principal.

Menú radial

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• --radio-circulo es la distancia de las opciones al centro; --tam-item y --tam-boton sus tamaños.
• Cada opción define su posición con --angulo en el atributo style. Para un abanico de medio círculo (ideal en una esquina), usa ángulos de -180deg a -90deg.
• --i controla el retraso escalonado de la animación; súmale 1 en cada opción nueva.
• La curva cubic-bezier(.34, 1.56, .64, 1) da el efecto de "rebote". Cámbiala por ease si lo quieres más sobrio.

/* Colocarlo como botón flotante en la esquina inferior derecha */
.radial { position: fixed; right: 32px; bottom: 32px; }

Buena práctica

Elige el componente según la tarea: tabs para alternar vistas del mismo tema, breadcrumbs para jerarquías, paginación para listados y menú radial sólo para acciones rápidas. Y en todos, indica el estado actual con atributos ARIA (aria-selected, aria-current, aria-expanded) en lugar de depender sólo del color.